CODEWITHSUNDEEP
htmlcss
Valio Raltchev
Valio Raltchev

Reputation: 113

Position: Fixed Div Covers Images

So, Im trying to make an image stuck to the bottom of the page with position:fixed (kinda like navigation bar). The problem is that I have text somewhere in the center of the page and when I zoom, this image covers some of the text and it cant be seen.

CSS:

.bottom {
    display: block;
    position:fixed;
    width:100%;
    height: 70px;
    bottom: 0px;
}

p.BrunchENG_TXT{
    padding-top: 20px;
    text-align: justify;
    margin: 0 auto;
    width: 60%;
    color:#7b0d4c;
    font-family:"Verdana";
}

HTML:

<div>
 <p class="BrunchENG_TXT"> 
  <b>Brunch</b> 
  </br>
  The weekends are holydays, giving us the chance to share special moments with the people we love the most….We welcome everybody each Sunday starting 11 o’clock so that all of you can enjoy fully this precious time and recharge with healthy food and energy for the day….Welcome to the Sunday Bruch @ Mumbai Burgas - the menus are composed with special attention to the children and the vegetarians and are published well in advance on our FB page.
 </p> 

 <div>
  <img src="images/repetB.jpg" class="bottom">
 </div>
</div>

Upvotes: 3

Views: 1176

Answers (2)

Valio Raltchev
Valio Raltchev

Reputation: 113

I used margin-bottom: 100px; and it worked!

Upvotes: 1

user3062282
user3062282

Reputation:

Try this code is working for me

CSS:

 .bottom {
 display: block;
 position:fixed;
 width:100%;
 height: 70px;
 bottom: 0px;
 }

  p.BrunchENG_TXT{
  padding-top: 20px;
  text-align: justify;
  margin: 0 auto;
  width: 60%;
  color:#7b0d4c;
  font-family:"Verdana";
  }

  #img-footer{
    height: 100px; /* change 100px by height of the picture "repetB.jpg"*/
  }

HTML:

<div>
 <p class="BrunchENG_TXT"> <b>Brunch</b> </br>
 The weekends are holydays, giving us the chance to share special moments with the people we love the most….We welcome everybody each Sunday starting 11 o’clock so that all of you can enjoy fully this precious time and recharge with healthy food and energy for the day….Welcome to the Sunday Bruch @ Mumbai Burgas - the menus are composed with special attention to the children and the vegetarians and are published well in advance on our FB page.
 </p> 

<div id="img-footer">
<img src="images/repetB.jpg" class="bottom">
</div>
</div>

Upvotes: 0

Related Questions