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
Solved

layering divs on top of nivo slider

Posted on 2013-06-03
9
434 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 55

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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 55

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 55

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 55

Expert Comment

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
css, html 5 52
bootstrap footer centering and expand problems 7 55
Bottom border change 5 18
flex div overflows its container 4 26
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

860 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