CSS Menu - Techist - Tech Forum

Go Back   Techist - Tech Forum > Internet > Web Graphics and Design
Click Here to Login
Closed Thread
 
Thread Tools Display Modes
 
Old 02-01-2009, 03:28 PM   #1 (permalink)
Ultra Techie
 
objecterror's Avatar
 
Join Date: Jan 2006
Location: United States
Posts: 731
Default CSS Menu

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>
__________________

__________________
"After it's all said and done, more will be said than done." -- Quote by Somebody

Steam @ objecterror
objecterror is offline  
Old 02-02-2009, 06:12 PM   #2 (permalink)
Wizard Techie
 
CrazeD's Avatar
 
Join Date: Feb 2006
Location: Maine
Posts: 3,736
Send a message via AIM to CrazeD Send a message via MSN to CrazeD
Default Re: CSS Menu

I don't see any transparency or anything that looks wrong. Can you take a screenshot and circle what is wrong?
__________________

__________________

Intel Q9400 | Gigabyte EP45-UD3P | G.Skill 2x2GB DDR2 1000 | XFX HD5870

Need website help? PM me!
CrazeD is offline  
Old 02-02-2009, 08:25 PM   #3 (permalink)
Ultra Techie
 
objecterror's Avatar
 
Join Date: Jan 2006
Location: United States
Posts: 731
Default Re: CSS Menu

I moved the site to a test page. I got frustrated and reverted the front now to the 'original'. Here is the image


I don't know if I'm doing anything wrong or it's the browser I'm using??
__________________
"After it's all said and done, more will be said than done." -- Quote by Somebody

Steam @ objecterror
objecterror is offline  
Old 02-02-2009, 08:55 PM   #4 (permalink)
Wizard Techie
 
CrazeD's Avatar
 
Join Date: Feb 2006
Location: Maine
Posts: 3,736
Send a message via AIM to CrazeD Send a message via MSN to CrazeD
Default Re: CSS Menu



This is what I see, using Firefox 3.

IE 6.0 works fine too. What browser are you using?
__________________

Intel Q9400 | Gigabyte EP45-UD3P | G.Skill 2x2GB DDR2 1000 | XFX HD5870

Need website help? PM me!
CrazeD is offline  
Old 02-03-2009, 10:32 AM   #5 (permalink)
Master Techie
 
synergy's Avatar
 
Join Date: Mar 2005
Location: 15 Hive
Posts: 2,284
Send a message via MSN to synergy Send a message via Yahoo to synergy
Default Re: CSS Menu

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;
    z-index: -1;
}
__________________
i7 2600K | TRUE 120 w/ Xigmatek XLF-F1253 | Asus Sabertooth P67 | 16 GB G.Skill RipjawX DDR3 1600
EVGA GTX 560Ti | 256 GB Plextor M3 SSD |80 GB Intel X25-M SSD | Corsair Graphite 600T
Coolermaster Purepower 850W | Samsung 25.5" 1920x1200 | Windows 7 Pro 64-bit


HTPC: AMD FX-4100 3.6 GHz | Gigabyte GA-880GM mATX w/ ATI Radeon HD 4250 | 8 GB G.Skill RipjawX DDR3 1600
LG Blu-Ray/HD-DVD ROM + DVD RW | 60 GB OCZ Vertex SSD | WD Caviar 1 TB | Antec Veris Fusion Black HTPC Case
Logitech diNovo Edge KB | Win7 Pro 64-bit
3dMark06 23,159 | 3dMark Vantage 23,579 | TF2 Stats Page | BC2 Stats | BF3 Stats
MCSE (SharePoint 2013), MCITP & MCTS (SharePoint 2010), CIW
synergy is offline  
Old 02-03-2009, 10:48 AM   #6 (permalink)
Ultra Techie
 
objecterror's Avatar
 
Join Date: Jan 2006
Location: United States
Posts: 731
Default Re: CSS Menu

Quote:
Originally Posted by CrazeD View Post


This is what I see, using Firefox 3.

IE 6.0 works fine too. What browser are you using?
I'm using 3.00.5 I believe. I moved it to another page with the CSS Menu back in the HTML.

Diecast Messiah

This is with the z-index applied to the content box.
__________________
"After it's all said and done, more will be said than done." -- Quote by Somebody

Steam @ objecterror
objecterror is offline  
Old 02-03-2009, 10:55 AM   #7 (permalink)
Master Techie
 
synergy's Avatar
 
Join Date: Mar 2005
Location: 15 Hive
Posts: 2,284
Send a message via MSN to synergy Send a message via Yahoo to synergy
Default Re: CSS Menu

Sorry, I'm not seeing what your problem is. Can you specify?
__________________
i7 2600K | TRUE 120 w/ Xigmatek XLF-F1253 | Asus Sabertooth P67 | 16 GB G.Skill RipjawX DDR3 1600
EVGA GTX 560Ti | 256 GB Plextor M3 SSD |80 GB Intel X25-M SSD | Corsair Graphite 600T
Coolermaster Purepower 850W | Samsung 25.5" 1920x1200 | Windows 7 Pro 64-bit


HTPC: AMD FX-4100 3.6 GHz | Gigabyte GA-880GM mATX w/ ATI Radeon HD 4250 | 8 GB G.Skill RipjawX DDR3 1600
LG Blu-Ray/HD-DVD ROM + DVD RW | 60 GB OCZ Vertex SSD | WD Caviar 1 TB | Antec Veris Fusion Black HTPC Case
Logitech diNovo Edge KB | Win7 Pro 64-bit
3dMark06 23,159 | 3dMark Vantage 23,579 | TF2 Stats Page | BC2 Stats | BF3 Stats
MCSE (SharePoint 2013), MCITP & MCTS (SharePoint 2010), CIW
synergy is offline  
Old 02-03-2009, 08:15 PM   #8 (permalink)
Wizard Techie
 
CrazeD's Avatar
 
Join Date: Feb 2006
Location: Maine
Posts: 3,736
Send a message via AIM to CrazeD Send a message via MSN to CrazeD
Default Re: CSS Menu

Quote:
Originally Posted by synergy View Post
Sorry, I'm not seeing what your problem is. Can you specify?
Me either.

__________________

Intel Q9400 | Gigabyte EP45-UD3P | G.Skill 2x2GB DDR2 1000 | XFX HD5870

Need website help? PM me!
CrazeD is offline  
Old 02-05-2009, 03:00 PM   #9 (permalink)
Ultra Techie
 
objecterror's Avatar
 
Join Date: Jan 2006
Location: United States
Posts: 731
Default Re: CSS Menu

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?
__________________
"After it's all said and done, more will be said than done." -- Quote by Somebody

Steam @ objecterror
objecterror is offline  
Old 02-06-2009, 11:16 AM   #10 (permalink)
Master Techie
 
synergy's Avatar
 
Join Date: Mar 2005
Location: 15 Hive
Posts: 2,284
Send a message via MSN to synergy Send a message via Yahoo to synergy
Default Re: CSS Menu

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.
__________________

__________________
i7 2600K | TRUE 120 w/ Xigmatek XLF-F1253 | Asus Sabertooth P67 | 16 GB G.Skill RipjawX DDR3 1600
EVGA GTX 560Ti | 256 GB Plextor M3 SSD |80 GB Intel X25-M SSD | Corsair Graphite 600T
Coolermaster Purepower 850W | Samsung 25.5" 1920x1200 | Windows 7 Pro 64-bit


HTPC: AMD FX-4100 3.6 GHz | Gigabyte GA-880GM mATX w/ ATI Radeon HD 4250 | 8 GB G.Skill RipjawX DDR3 1600
LG Blu-Ray/HD-DVD ROM + DVD RW | 60 GB OCZ Vertex SSD | WD Caviar 1 TB | Antec Veris Fusion Black HTPC Case
Logitech diNovo Edge KB | Win7 Pro 64-bit
3dMark06 23,159 | 3dMark Vantage 23,579 | TF2 Stats Page | BC2 Stats | BF3 Stats
MCSE (SharePoint 2013), MCITP & MCTS (SharePoint 2010), CIW
synergy is offline  
Closed Thread

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Please analyze my Hijackthis log soarwitheagles HijackThis Logs (finished) 4 10-27-2008 06:09 PM
CSS for Bringing Up Images Last Rex100 Programming 1 08-05-2008 04:29 PM
My Log with questions.... KSoD HijackThis Logs (finished) 3 01-28-2008 10:05 PM


Our Communities

Our communities encompass many different hobbies and interests, but each one is built on friendly, intelligent membership.

» More about our Communities

Automotive Communities

Our Automotive communities encompass many different makes and models. From U.S. domestics to European Saloons.

» More about our Automotive Communities

Marine Communities

Our Marine websites focus on Cruising and Sailing Vessels, including forums and the largest cruising Wiki project on the web today.

» More about our Marine Communities


Copyright 2002- Social Knowledge, LLC All Rights Reserved.

All times are GMT -5. The time now is 05:31 AM.


Powered by vBulletin® Version 3.8.8 Beta 1
Copyright ©2000 - 2017, vBulletin Solutions, Inc.