layering divs on top of nivo slider

Hello,

I have a nivo slider on a web page, I want to have 2 divs positioned on top of it using z-index, one is a navigation bar and the other is a text box. The site and slider are responsive so I need the navigation bar to maintain the distance from the top of the nivo slider and the text box maintain a fixed 20px distance beneath the nav bar. The nav bar will change height on smaller screens and mobile so I'm not sure how best to do this.

If the site was a fixed size I could do it but I'm just not sure with it all being responsive.

Can anyone help please?

Screenshot shows the layout at it's max width.

screenshot showing the 2 divs on top of the slider
igloobobAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
Put the nav bar and text box inside another div and position this aboslutely.

Make the margines : 0 auto to center it.

The width of the container can then be set to a percentage of total width.

You will now be able to position the text box exactly 20px below the navbar.
Some simple code to demonstrate the concept
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
  font-family: Helvetica;
  color: #333;
}
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
#nav-container {
  width: 95%;
  position: absolute;
  margin: 0 2.5%;
  z-index: 1000;
}
#nav-bar ul {
  list-style: none;
  overflow: hidden;
  background: #fefefe;
}
#nav-bar ul li {
  display: inline-block;
  margin-right: 20px;
}
#nav-bar ul li:last-child {
  margin-right: 0;
}
#nav-bar ul li a{ 
  font-size: 15px;
}
#slider-container {
  z-index: 1;
  position: relative;
  overflow: hidden;
} 
#slider {
  width: 100%;
  height: 400px;
  background: blue;
}
#text-box {
  text-align: center;
  font-size: 40px;
  margin-top: 20px;
  opacity: .75;
  background: #333;
  color: #fff;
}
</style>
</head>
<body>
<div id="slider-container">
  <div id="nav-container">
    <div id="nav-bar">
      <ul>
        <li><a href="#">COMMERCIAL GROUNDS MAINTENANCE</a></li>
        <li><a href="#">PRIVATE GARDEN MAINTENANCE</a></li>
        <li><a href="#">GARDEN DESIGN</a></li>
        <li><a href="#">LANDSCAPING</a></li>
        <li><a href="#">FORESTRY</a></li>
      </ul>
    </div>
    <div id="text-box">
      CREATING HORTICULTURAL EXCELLENCE FOR OVER 30 YEARS
    </div>
  </div>
  <div id="slider">
  </div>
</div>
</body>
</html>

Open in new window

0
 
igloobobAuthor Commented:
awesome thanks!
0
 
igloobobAuthor Commented:
sorry just one more question, I've done this before a few years back and can't remember how but how do I stop the text in the text box from having the transparency? I just want the box to have transparency and the text to be full strength. Does the text need to be in another div within that transparent box div?
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
Julian HansenCommented:
No - you need to put the text in another div over the div with the transparency otherwise the text will assume the opacity.

BUT - a better way is to use a 1px PNG with the opacity you want and make that a background for the div - that won't affect the transparency on the text.
0
 
igloobobAuthor Commented:
sound cheers I'll do that then :)
0
 
igloobobAuthor Commented:
ok and just one more thing if you don't mind (sorry!)

if I wanted to have that text box sit on the bottom of the slider on a different page what is the best way to do that as a separate id / class?

quick visual attached.
Screen-shot-2013-06-03-at-16.31..png
0
 
Julian HansenCommented:
If this is a different location for a different page then you could do it a number of ways - one would be to make the container box a specific height and have the text box stick to the bottom - or position the box absolutely.

It all depends on how your backend is structured to render different pages. The only reason for putting the text box in the same container as the navbar was to maintain the exact 20px distance between the two on a responsive layout - i.e. when menu wraps make the textbox move down so it stays 20px below nav.

If that is no longer a requirement and it is now relative to the bottom then you can simply make it absolute and have it a fixed distance from the bottom.
0
 
igloobobAuthor Commented:
Ah of course thanks again. You've been most helpful :)
0
 
Julian HansenCommented:
Your are welcome - thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.