Solved

layering divs on top of nivo slider

Posted on 2013-06-03
9
398 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 51

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
 
LVL 51

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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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 51

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 51

Expert Comment

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

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

758 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now