CSS Menu

Status
Not open for further replies.
objecterror

objecterror

Daemon Poster
Messages
734
Location
United States
I supplied the code as not to raise any questions. This is an original layout I'm using for our linkshell. Currently, the webpage 'works' but i wanted to add some menu's to reduce congestion. Why is it though, the image and background makes a transparency of the menu bars?? Am I doing some thing wrong??

Full site is here @ Diecast Messiah

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Diecast Messiah  </title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	background-image:url('Images/moogle2.gif');
	background-repeat:repeat-y;
	background-color: #E8D1B2;
	font-size: 10px;
	color: #996600;
	font-family: verdana, arial, sans-serif;
}
#layout1 {	
	width: 1024px;
	height: 768px;
	background-image:url('Images/moogle1.jpg');
}
#content {
	position: absolute;
	width: 365px;
	top: -70px;
	left: 235px;
}
#navigation {
	position: absolute;
	width: 190px;
	top: 230px;
	left: 20px;
}
#menu {
	width: 19em;
	text-decoration:none;
} 
#menu ul { /* remove bullets and list indents */
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu a {
	font: bold 11px/16px arial, helvetica, sans-serif;
	display: block;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #888 #555 #bbb;
	margin: 0;
	padding-top: 5px 3px;
}
#menu a {
	color: #000;
	background: #efefef;
	text-decoration: none;
}
#menu a:hover {
	color: #a00;
	background: #fff;
}
#menu li {
	position: relative;
} 

#menu ul ul ul {
	position: absolute;
	top: 0;
	left: 100%; /* to position them to the right of their containing block */
	width: 100%; /* width is based on the containing block */
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul {
	display: none;
}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
h1 {
	color: #770000;
	font-family: georgia, verdana, sans-serif;
	font-style: italic;
	font-size: 14px;
	text-align: right;
}
h2 {
	color: #770000;
	font-family: georgia, verdana, sans-serif;
	font-style: italic;
	font-size: 14px;
	text-align: right;
}
p {text-align: justify;}
a {
	color: #ffffff;
	border-bottom: 2px dotted #770000;
	text-decoration: none;
}
a:hover {
	color: #770000;
	text-decoration: line-through;
}
.center {text-align: center;}
</style>
</head>
<div id="layout1">
<body>
<div id="navigation">
<div id="menu">
<h3>News</h3>

<font color="darkred"> 1»</font> xxx
<font color="darkred"> 2»</font> xxx
<font color="darkred"> 3»</font> xxx 


<h2>News</h2>
    <ul>
      <li><a href="#" title="SEO Consultants Directory">Diecast Messiah</a></li>
        <li><a href="#" title="tanfa Introduction">Final Fantasy XI</a></li>
       </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
 <h2>Linkshell</h2>
    <ul>
      <li><a href="#"  title="SEO Consultants Vertical Example">Linkshell Conduct</a></li>
      <li><a href="#"  title="Complete Example">How to Apply</a>
      <li><a href="#"  title="Memberships">Members</a>
        <ul>
          <li><a href="#">Leader</a>
        <ul>
              <li><a href="#" title="Leader">Leader</a></li>
              </ul>
          <li><a href="#">Officers</a><!-- link to seo vertical tut -->		
            <ul>
              <li><a href="#"  title="Vertical Menu - Page 1">Officer 1</a></li>
              <li><a href="#"  title="Vertical Menu - Page 2">Officer 2</a></li>			
              <li><a href="#"  title="Vertical Menu - Page 3">Officer 3</a></li>
              <li><a href="#"  title="Vertical Menu - Page 4">Officer 4</a></li>
              </ul>
           <li><a href="#">Members</a>
           <ul>
              <li><a href="#" title="Vertical Menu - Page 1">Current Roster</a></li>
              </ul>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ul>
 <li><h2>Horizontal Drop & Pop Menu</h2>
 <ul>
 <li><a href="#" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
 <li><a href="#" >tanfa Demo example</a><!-- fully working sample -->
 <ul>
 <li><a href="#">tanfa Tutorial</a><!-- link to horizontal tut -->		
 <ul>
 <li><a href="#"  title="Horizontal Menu - Page 1">Stage 1</a></li>
 <li><a href="#"  title="Horizontal Menu - Page 2">Stage 2</a></li>			
 <li><a href="#"  title="Horizontal Menu - Page 3">Stage 3</a></li>
 <li><a href="#"  title="Horizontal Menu - Page 4">Stage 4</a></li>
 <li><a href="#"  title="Horizontal Menu - Page 5">Stage 5</a></li>			
 <li><a href="#"  title="Horizontal Menu - Page 6">Stage 6</a></li>
 </ul></li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>							
<h2>Linkshell</h2>
	<a href="#" target="blank">Rules</a>
    <a href="#" target="blank">Application</a>
	<a href="#" target="blank">Point System</a>
    <a href="#" target="blank">Members</a>
    <a href="#" target="blank">Link}</a>
    <a href="#" target="blank">Link}</a>
<br />
<h2>Events</h2>
	<a href="#" target="blank">Dynamis</a>
	<a href="#" target="blank">Limbus</a>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
 <br />

<h2></h2>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
	<a href="#" target="blank">Link}</a>
 <br />


<h2>{Message</h2>


<h2>{Bye Kupo</h2>
</div>

<div id="content">
<h1>{title|date</h1><img src="Images/moogle4.gif" align=right>
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write kupo.

<BR><BR><center><img src="Images/moogle3.jpg"></center><BR>

<h1>{title|date</h1><img src="moogle4.gif" align=right>
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write kupo.

<BR><BR><center><img src="Images/moogle3.jpg"></center><BR>


<h1>{title|date</h1><img src="Images/moogle4.gif" align=right>
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. write here kupo. 
write kupo.

<BR>
<BR>
<center><img src="http://i138.photobucket.com/albums/q260/res8zenith/moogle3.jpg"></center><BR>
</body>
</div>

</html>
 
I don't see any transparency or anything that looks wrong. Can you take a screenshot and circle what is wrong?
 
I moved the site to a test page. I got frustrated and reverted the front now to the 'original'. Here is the image
Screenshotcopy.jpg


I don't know if I'm doing anything wrong or it's the browser I'm using??:confused:
 
whatisee.jpg


This is what I see, using Firefox 3.

IE 6.0 works fine too. What browser are you using?
 
You could try giving the menu container a higher z-index. This will position it on top of other elements.

I'll mess around with it and see if I can find something that works.

EDIT: Okay, instead of assigning a z-index to the menu (z-index only works on absolutely positioned elements) I put a z-index of -1 to the content div. That seemed to work.
Code: 
#content {
    position: absolute;
    width: 365px;
    top: -70px;
    left: 235px;
   [COLOR=Red] z-index: -1;[/COLOR]
}
 
My original image. I applied the Z-index to the background image like you suggested. But what does that do to the remaining div that's ontop of that? It feels kind of pancaked with the menu working but the text is gone. Does that make sense? Should i switch the index around for the content div?
 
I don't really get what you are saying. If you apply the z-index to just the content div the rest doesn't need to be touched.
 
Status
Not open for further replies.

Similar threads

D
"could not parse error", what should i do?
Replies
1
Views
1K
petergroft29
P
A
Column gap in HTML?
Replies
5
Views
923
tehnokraat
T
C0RR0SIVE
HTML/CSS newbie...
Replies
3
Views
3K
tehnokraat
T
M
Help With PHP Calender Code
2
Replies
18
Views
6K
crghsam
C
M
PHP Code to Edit MySQL Database
Replies
3
Views
2K
root
root
Back
Top Bottom