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

Fixed navigation <div> elements with other elements over top

Posted on 2013-05-17
6
322 Views
Last Modified: 2013-05-20
My test page:
http://sterlingmodular.com/test

Each of the colored bars running across the page is a <div> with position:fixed.

Now, I want to place the logo <img> and have it be overtop the colored bars, but it is behind (you can see part of it below the third bar). It comes after the bars in the markup, so I thought it would always be on top. The position:fixed changes that?

Is there some other way I can make the colored bars more of a background, so that I can put the logo overtop? Other than doing a position:absolute with the logo, set a z-index, etc.?

Basically, how do I keep those bars as position:fixed, but not have them affect other elements place overtop? They should be behind everything else.

Thank you!
0
Comment
Question by:bbdesign
  • 3
  • 2
6 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39177250
This gets your answer http://jsbin.com/oduzoc/1/ but not really a good way of doing it.

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sterling Modular</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Michroma">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Alex+Brush">
<link rel="stylesheet" href="http://sterlingmodular.com/test/css/normalize.css">
<link rel="stylesheet" href="http://sterlingmodular.com/test/css/main.css">
<link rel="stylesheet" type="text/css" href="fhttp://sterlingmodular.com/test/loatbox/floatbox.css" />
<script src="http://sterlingmodular.com/test/floatbox/floatbox.js"></script>
<script src="http://sterlingmodular.com/test/js/vendor/modernizr-2.6.1.min.js"></script>
 <style>
 #logo {
	position: absolute;
	z-index: 99999;
	left: 0px;
	top: 0px;
}
 </style> 
</head>
<body>
  <div id="logo"><img src="http://sterlingmodular.com/test/img/lg_sterling-modular.jpg" alt="Sterling Modular" width="141" height="47" border="0" /></div>
<div id="nav1" class="redbar">

	<ul>
		<li><a href="">INTERNATIONAL SALES</a></li>
		<li><a href="">PRESS / REVIEWS</a></li>
		<li><a href="">ABOUT US</a></li>
		<li><a href="">DOWNLOADS</a></li>
		<li><a href="">CONTACT</a></li>
		<li><a href="">SHOPPING CART</a></li>
	</ul>
</div>

<div id="nav2" class="lightbar">
	<div id="tagline">Fine Studio Furniture from the Most Respected Name in the Industry</div>
</div>

<div id="nav3" class="darkbar">
	<ul>
		<li><a href="">U.S. RETAILERS</a></li>
		<li><a href="">ABOUT CONSOLES AND ACOUSTICS</a></li>
		<li><a href="">PHOTO GALLERY</a></li>
		<li><a href="">STERLING USERS</a></li>
	</ul>
</div>

<div id="wrapper">
	

	<p>Sample default font size and styling for Michroma.</p>

	<p class="cursive">Yes... You Have Arrived</p>

	<p><a class="btn">SAMPLE BUTTON</a></p>

	<p style="width:200px;height:100px;background-color:#9b1d30;text-align:center;">SAMPLE RED COLOR</p>
</div>

<div id="nav4" class="lightbar">
	<ul>
		<li><a href="">ACCESSORIES</a></li>
		<li><a href="">HIGH END MASTERING</a></li>
		<li><a href="">CUSTOM SHOP</a></li>
	</ul>
</div>

<script src="http://sterlingmodular.com/test/js/vendor/jquery-1.7.2.min.js"></script>
<script src="http://sterlingmodular.com/test/js/plugins.js"></script>
<script src="http://sterlingmodular.com/test/js/main.js"></script>

</body>
</html>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39177258
I would probably make your 3 top bars one image, a thin slice that repeats in the background of a header div.  Then use css to make the image on the top left (change to a transparent png) and float the logo div to the left and margin right.  Then you will have the nav text for the 3 levels to the right of the logo.

<div id="header">
     <div id="logo">myimage</div>
     <div id="three_navs">
           <div id="top_nav">stuff</div>
           <div id="mid_nav">stuff</div>
            <div id="bottom_nav">stuff</div>
     </div>
</div>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39177424
If you want something to be fixed background, the turn it into an image and set it as the fixed background.  If you want it to be part of content, then learn to use css to do real layout instead of just plopping thing in a page using fixed and/or absolute positioning.

Cd&
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:bbdesign
ID: 39178497
My reasoning behind doing the separate <div> elements is because I may want to use those same backgrounds elsewhere in the website. I thought I would define them once, and reuse as necessary. Maybe I can put all three in a <div> and fix that <div>, instead of fixing each individual one?

Thanks for your input, I will go through this in more detail tomorrow.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39179307
If you want to use the same background in other parts of the site, just set it up as a sprit.  

Consider this when taking the extra steps to make a sprit; assume the think slice is 3k, viewed a 10,000 times is about 30 megs of bandwidth.  If you save 2k by using the sprite, that's 20 megs of bandwidth.     I think you would need to see a million page views before the bandwidth savings make a difference.
0
 

Author Comment

by:bbdesign
ID: 39182601
Thanks for your good advice. I'm still working on it, but I think I know what to do now.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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
Divi Theme - extra fonts I don't want 13 41
URGENT - Wordpress site missing  theme 9 53
Botom of page is wrong color 5 17
Increase the size of the modal in Bootstrap 5 43
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!
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 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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

828 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