Layering BKGRD image over navigation menu loses links

HTML & CSS
1

I’m trying to take a background image and layer it over a navigation menu on the left side, but when I do, the background image ‘covers’ the links and they won’t work (I understand why, but what is my other option?). So I cheated by adding a background to the navigation menu (which sucks because not all browsers are rendering it correctly).

What I would like to do is just have the background flow with the text on the right, but I need it to be on top of the navigation menu on the left side.

I’ve thought about splitting the whole design in half, floating it side by side, but that would seem to be a huge waste of time.

Can anyone give me some help with this?

I’ve provided my code below. Sorry if I’m unable to foward a link:

<head>
<style type="text/css">
<!--
#header {
background: #000 url(images/photo_home.jpg) no-repeat top right;
}
-->
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/png-fix.css" />
<![endif]-->
</head>

<body>
<div class="body-center">
<div id="esth-body">
<div id="header">
<div class="logo">
<p style="margin: 0px;"><a href="index.html"><img src="images/logo.gif" alt="Evolution Esthetiques" width="110" height="126" border="0" /></a></p>
<p><span>evolution esthetiques</span></p>
<p><span class="address">Wade Dickinson, M.D.</span></p>
<p><span class="address">7055 N. Maple #106</span></p>
<p><span class="phone">559.797.9797</span></p>
</div>
</div>
<div class="list group">
<ul id="navmenu" class="group">
<li class="about-us"><a href="about_us.html">About Us</a></li>
<li class="our-products"><a href="products.html">Our Products</a></li>
<li class="our-services"><a href="services.html">Our Services</a></li>
<li class="contact-us"><a href="contact.html">Contact Us</a></li>
</ul></div>
<div id="body-content" class="group">
<!--<div id="column-left">
<div style="margin-top: 10em;"></div>
</div>-->
<div id="column-right">
<div class="padding">
<div class="contright"><p>At Evolution Esthetiques our goal is to provide you with the very latest, innovative, non-invasive cosmetic services and products. And, to provide education and information, with the highest level of integrity, that helps you to fully understand the choices available and make well-informed treatment decisions with our staff. Our trained staff of nurse practitioners, registered nurses, and aestheticians deliver the most effective aesthetic procedures, while doing so in a relaxing and welcoming environment.</p>
<h2>radiate, rejuvenate, reform. </h2>
<p><span><a href="#">> click here for current specials </a></span></p></div>
</div>
</div></div>
</div>
</div>
</body>

design

html, body {
margin: 0px;
padding: 0px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #FFF;
}

h1 {
	padding: 0px;
	text-transform: lowercase;
	font-weight: bold;
	text-align: right;
	font-size: 30px;	
}

h2 {
	font-size: 30px;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1em;
}

p span a, p span a:visited { color: #ec008c; text-decoration: none; }
p span a:hover { color: #333; text-decoration: none; }
p span a:active {
	color: #000;
	text-decoration: none;
}

#body-center {
text-align: left;
}

#esth-body {
 position: relative;
	width: 1000px;
	text-align: left;
	background: #FFF;
	margin: 0px auto;
	border: 1px solid #a40664;
}

#header {
margin: 0px;
padding: 0px;
background: #000;
height: 328px;
}

.logo {
	position: relative;
	width: 258px;
	top: 29px;
	left: 29px;
	z-index: 1001;
}

.logo p {
text-align: center;
color: #FFF;
}

.logo p span {
font-size: 23px;
}

.logo p span.address {
line-height: 70%;
font-size: 18px;
}

.logo p span.phone {
color: #ec008c;
font-size: 20px;
line-height: 70%;
}

.padding {
padding: 30px 24px 30px 10px;
}

#body-content {
	position: relative;	
	background: url(../images/art.png) repeat-y -113px -50px;	
}

#column-left {
	position: relative;
	float: left;
	display: inline;
	width: 442px;
	height: auto;
}

#column-right {
margin: 0px;
width: 558px;
float: right;
}

#menu {
float: left;
width: 598px;
margin: 0px;
color: #ec008c;
list-style: none;
}

#menu a {
float: left;
display: block;
margin: 0px;
padding: 1px 5px;
text-decoration: none;
text-transform: uppercase;
color: #ec008c;
border-right: 1px solid #ec008c;
}

#menu li#skins a {
border-right: none;
}

#column-right p {
	line-height: 200%;
	padding: 0px;
	margin: 0px;
}

.contright {
margin-top: 1em;
}

.minimenu {
text-align: right;
font-size: 11px;
}

.minimenu a {
padding: 5px;
text-deocoration: none;
letter-spacing: -.5px;
}

.minimenu a, .minimenu a:link {
color: #ec008c;
text-decoration: none;
}

body#our-products .select, body#services .select {
color: #000;
}

#ablist {
	width: 90%;
	margin: 0px auto;
	padding: 0px;
	position: relative;
}

#ablist li {
line-height: 200%;
}

.group:after { /* for browsers that support :after */
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}

* html .group { 
height: 1%;
overflow: visible;
} /*for IE6 */

*:first-child+html .group {
min-height: 1px;
} /* for IE7 */

navigation menu

#navmenu {
margin: 0px;
padding: 6px 0px;
background: #ec008c;
color: #000;
list-style: none;
float: right;
display: inline;
width: 558px;
}

div.list {
	background: #ec008c url(../images/menu-decor.gif) no-repeat 0 0;
	width: 100%;
	z-index: 5;
	}

#navmenu li {
float: left;
display: inline;
margin: 0 1px 0 0;
padding: 0px;
}

#navmenu a {
float: left;
display: block;
margin: 0px;
padding: 7px 28px;
text-decoration: none;
text-transform: uppercase;
color: #000;
border-right: 1px solid #000;
background: #ec008c;
}

#navmenu a:hover {
color: #FFF;
}

#navmenu li.contact-us a {
border-right: none;
}

body#our-products li.our-products a, body#about-us li.about-us a, body#contact-us li.contact-us a, body#services li.our-services a {
color: #FFF;
}
2

I started this thread (http://www.sitepoint.com/forums/showthread.php?t=670860), but didn’t have any responses, so I brought an image along to see if anyone can help me figure out how to do the following.

I have a navigation menu, but I need to add a background to the content element which will be located just below the navigation menu. Inside that content element are two floated columns. The background image needs to reside on the left side and directly layered on top of the navigation menu; but when I do that by setting a negative margin to the content element, I lose the links in the navigation bar (understandable since content element takes up the full width of the screen, thus covering the navigation menu).

Attached is pic of what I would like to do.

3

I can’t “see” what you want. You want a bg over the links but not over the links??

Could you post a screenshot/PSD of what you’re trying to do?? That would help immensely.

4

Hi,

You’d need to do it in three stages.

The pink background (.list) would be in a static placed element as it already is ( do not add position:relative).

Then on the floated nav add position:relative and a high z-index:


#navmenu {
    position:relative;
    z-index:99;
}

then on your body-content set a lower z-index than the nav.


#body-content {
    position: relative;
z-index:2;
}

This will allow the content to sit on top of the pink background but not on top of the text in the nav.

5

Weird, what happened? when I posted there was only one post with code??

6

I merged the threads as there was another thread with no answers further down the forum.

Note to OP - Don’t make duplicate threads as it is against the guidelines and confusing :slight_smile:

7

I did what you advised, but the art deco image does not surface above the navigation menu.

Any other thoughts? It’s available for review here.

8

Hi,

You didn’t drag it on top!


#body-content {
    position: relative;
    background: url(http://rewebbed.net/gin/images/art.png)[B] repeat-y -113px 0;[/B]
    z-index: 2;
[B]    margin-top:-50px;
    width:100&#37;;[/B]
}

You just moved the background-position which only moves the image within it’s own container. It can’t move the image outside the container it is placed in :slight_smile:

Just drag the whole container.

9

Great! It works! But I’m still confused as to why div.list shouldn’t be set to position: relative?

I just recently purchased The CSS Anthology. I hope I’ll be able to understand it better.

Thank you again!

10

If you give div.list a position:relative it creates a stacking context for its children and then IE7 and under will assign a z-index of zero by default.

This will mean that you can’t interweave any elements between div.list and and it’s children unless they are also children. All elements outside of div.list will either have to sit on top of all of it and its children or be under all of it and it’s children.

By omitting the position:relative on div.list you can then intertwine your graphic between div.list and it’s children.

(Note that browsers other than ie7 (and under) use a default z-index of auto on positioned elements which would allow other elements to be mingled with the children of that element.)

11

It helps to know that. Thank you!

Too bad IE is so tricky to develop for.