5 replies [Last post]
dk
Offline
Regular
Last seen: 17 years 17 weeks ago
Joined: 2004-02-25
Posts: 11
Points: 0

I have a div called sidebar, which is a graphic, and I need to place a menu on top of that graphic, however when I try using position: absolute for the sidebar div and then position: relative for the menu div, the menu shows up incorrectly (not directly over the sidebar div) in Opera and Mozilla. What can I do to fix it? Thanks!

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 10 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Div on top of Div

Why don't you use one div, and use the CSS background declaration? You can then quite happily use the navigation inside the same div.

<div id="sidebarNav">
menu code here
menu code here
menu code here
</div>

and have the css style:

div#sidebarNav
     {
     background: url(images/sidebarBg.gif) transparent no-repeat;
     }

...obviously change what you need (transparent to your preferred hex-colour if required etc.)

The next sentence is true. The previous sentence is false. Discuss...

dk
Offline
Regular
Last seen: 17 years 17 weeks ago
Joined: 2004-02-25
Posts: 11
Points: 0

Div on top of Div - again

co2 - how would i do that with the attached layout. This is an exact replica of what my menu must look like. It's driving me CRAZY!!! Thanks for responding.

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 10 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Div on top of Div

Don't get too wound up with divs. You can do what you need with 1 or 2 at most.

Also, I couldn't quite figure out if level 2 was a sub-menu list of level 1 or a text area. I've used a text area in my example:

http://dev.c-o2.net/nav.htm

Here's the HTML (the CSS is displayed in the example):

<div id="nav">
	<ul>
		<li><h4>Menu Level 1</h4></li>
		<li><a href="#">Menu Link 1</a></li>
		<li><a href="#">Menu Link 2</a></li>
		<li><a href="#">Menu Link 3</a></li>
	</ul>
	<div id="text">
		<h4>Text Header (Level 2)</h4>
		<p>Text area content goes here.</p>
		<h4>Text Header</h4>
		<p>Text area content goes here.</p>
	</div>
	<ul>
		<li><h4>Menu Level 3</h4></li>
		<li><a href="#">Menu Link 1</a></li>
		<li><a href="#">Menu Link 2</a></li>
	</ul>
</div>

The next sentence is true. The previous sentence is false. Discuss...

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 10 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

Div on top of Div

I should also add... there several ways you could accomplish this. You could use 3 divs as you suggested. You could use 1 div. It depends how exactly you want it to work (maybe mine isn't the greatest, but it's late Wink )

The next sentence is true. The previous sentence is false. Discuss...

dk
Offline
Regular
Last seen: 17 years 17 weeks ago
Joined: 2004-02-25
Posts: 11
Points: 0

Div in a Div

Thanks for responding co2. That second menu was supposed to be a submenu. What i ended up doing instead of using lists was to use images for the bullets and then in three divs place the menu (one for each level). The code looks like this:

HTML BODY #pagebarleft .menu P.menulevelone 
{
	position: relative;
	line-height: 80%;
	width: auto;
	margin-left: 0px;
	margin-top: 0px;
	background-color: #fff;
	z-index: 99;
	font-weight: normal;
	color: #3366cc;
	font-size: 75%;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	text-align: left;
}
HTML BODY #pagebarleft .menu P.menuleveltwo
{
	position: relative;
	line-height: 95%;
	width: auto;
	margin-left: 15px;
	margin-top: 0px;
	background-color: #fff;
	z-index: 98;
	font-weight: normal;
	color: blue;
	font-size: 75%;
	text-align: left;
}

HTML BODY #pagebarleft .menu P.menulevelthree
{
	position: relative;
	line-height: 80%;
	width: auto;
	margin-left: 25px;
	margin-top: 0px;
	background-color: #f5f5f5;
	z-index: 98;
	font-weight: normal;
	color: blue;
	font-size: 75%;
	border-right: 1px solid #ccc;
	text-align: left;
}