Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

layering divs on top of nivo slider

Posted on 2013-06-03
9
Medium Priority
?
476 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
  • 5
  • 4
9 Comments
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 60

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 60

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 60

Expert Comment

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

773 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