CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Santhucool
Santhucool

Reputation: 1706

Bootstrap3 slider image is got intersect with transparent box - need to move down

I am using bootstrap3 to create my page. I created a slider with images and inside the slider image I have created a <div> with some content inside it with white transparent background. My code as follows:

<div class="header-banner">
    <div class="flexslider header-slider hidden-xs col-sm-3">
        <ul class="slides">
            <li>
                <img src="img/transparent.png" alt="">
                <div data-image="img/content/Slide_Intro_1.png"></div>
                <div class="slider-caption container">
                    <div class="row">
                        <div class="slider-caption container">
                            <div class="col-xs-10 col-sm-5" style="background: rgba(255, 255, 255, 0.4 );">
                                <h3 class="mb-7px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum</h3>
                                <p class="mid-dle-font-size mb-5px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum Lorem ipsum </p>
                                <a href="#" class="btn btn-red" style="margin:0 0 0 20px ;">Know More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div>
        </div>

But the transparent box I created is intersect on top of the slider image. I need that box to be little more down, so that it should not intersect on top of the slider. Please check the image as follows:

**image**

I am marking it with red. I need to move that box to little more down say it as 40px down. I tried that by giving style="padding:40px 0 0 0"; But the alignment is getting changed and responsiveness also changing. How can I do it without affecting the left and right positions of the transparent box. Any help will be appreciated.

Upvotes: 0

Views: 65

Answers (2)

Rene Korss
Rene Korss

Reputation: 5484

You have to use margin for this.

margin-top: 40px;

I'll explain a little bit. See image below.

The CSS Box Model

Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

Source: W3Schools: CSS Box model

You tried to add padding, what moved only the content down. That's because background-color applies to padding and content. Result would be that box is on same position from top and content moves down by 40px increasing element height.

But margin is outside of HTML element, therefore it moves whole box down. So it won't affect height of element. Since margin is outside of element, background-color dosen't affect it.

Upvotes: 2

Santhucool
Santhucool

Reputation: 1706

<div class="slider-caption container">
                    <div class="row">
                        <div class="slider-caption container" style="margin-top: 40px;">
                            <div class="col-xs-10 col-sm-5" style="background: rgba(255, 255, 255, 0.4 );">
                                <h3 class="mb-7px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum</h3>

Need to include style="margin-top: 40px;" It works. Thank you all

Upvotes: 1

Related Questions