CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

Have a line pass thorough an image with CSS

I have an image, which is the "icon" and a grey line beneath. You can see it on line here http://sundayeventsboutique.it/?lang=en

The markup is quite simple, with bootstrap classes

<div class="row">
    <div class="col-md-4">
    <div class="row dmbs-header">
            <div class="dmbs-header-img">
                <a href="http://sundayeventsboutique.it/"><img width="300" height="150" alt="Sunday Logo" src="http://sundayeventsboutique.it/wp-content/themes/devdmbootstrap3/img/logo.jpg"></a>
            </div>
    </div>
   </div>
<div class="col-md-8 d-bar">

    <div class="row dmbs-top-menu">

        <nav role="navigation" class="navbar navbar-inverse">

        </nav>

   </div>
    </div>
    <div class="hr-line-grey hr-line-margin"></div>
</div>

The problem is that i can't seem to be able to move the line above the image, if i use a negative top margin it doesn't move until it goes to the top

enter image description here while i would like to align it under "sunday events boutique"

Upvotes: 0

Views: 173

Answers (2)

Amanjot
Amanjot

Reputation: 2048

.hr-line-grey {
overflow: hidden;
height: 1px;
width: 100%;
background-color: #B5B5B6;
margin: 20px 0px 12px;
position: absolute;
top: 120px;
}

Change the class to this. Also, position:relative will cause responsive issues. you should use position:absolute.

Upvotes: 0

gopalraju
gopalraju

Reputation: 2309

Add position:relative to .hr-line-grey and adjust the top value

.hr-line-grey{
 position:relative;
 top:-63px;
}

Upvotes: 6

Related Questions