Solved

layering divs on top of nivo slider

Posted on 2013-06-03
9
448 Views
Last Modified: 2013-06-03
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
0
Comment
Question by:igloobob
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39216292
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
 

Author Comment

by:igloobob
ID: 39216331
awesome thanks!
0
 

Author Comment

by:igloobob
ID: 39216343
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39216403
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
 

Author Comment

by:igloobob
ID: 39216480
sound cheers I'll do that then :)
0
 

Author Comment

by:igloobob
ID: 39216497
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
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39216574
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
 

Author Comment

by:igloobob
ID: 39216595
Ah of course thanks again. You've been most helpful :)
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39216650
Your are welcome - thanks for the points.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question