[solved] Menu Nightmare

saltedm8 · #1 (**permalink**) Apr 14th, 2008, 20:02

i have a menu that i pinched from css play , the problem is they never made it validate and i was wondering if you guys can - whilst keeping the effect
thanks

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
    margin:0 auto;
    width:792px;
    height:206px;
    border:thin #cccccc solid;
    border-bottom: thin #000000 solid ;
    clear:both;

}

#menu {
    margin:0 auto;
    width:782px;
    height:40px;
    margin-top:167px;
    clear:both;
}

#wrapper {
    margin:0 auto;
    width:792px;
    margin-top:5px;
    overflow:auto;
    
}

#main {
    float:right;
    width:550px;
    height:300px;
    margin: 0 0 10px 0;
    border:thin #cccccc dashed;
    padding:  0 0 0 0;
    clear:right;
    
}

#left {
    float:left;
    width:220px;
    height:300px;
    margin-bottom:10px;
    border:thin #cccccc dashed;
    padding:  0 0 0 0;
     clear:left;
    
}

#footer {
    margin:0 auto;
    width:790px;
    height:40px;
    border:thin #cccccc solid;
    clear:both;
    margin-bottom:5px;
    
}

.tabs {list-style:none; padding:15px 0 0 10px; margin:30px 10px 50px 0; height:23px;}
.tabs li {display:block; float:left; margin:0 -13px -1px 0;}
.tabs li a {display:block; text-decoration:none;}

.tabs li a em {float:left; padding:0 20px; height:22px; border-top:1px solid #fff; border-bottom:1px solid #000; position:relative; z-index:100; font-style:normal; color:#fff; background:#f93 url(images/tab_d.gif) repeat-x bottom left; font-size:11px; font-family:verdana; line-height:20px;}

.tabs li a b {font-size:0; line-height:0; position:relative; border-bottom:1px solid #000; border-top:1px solid #fff; width:1px; display:block; float:left; z-index:300; background:#f93 url(images/tab_d.gif) repeat-x bottom left;}

.tabs li b.p1 {height:19px; background:#fff; margin-top:4px; border-top:0; z-index:100;}
.tabs li b.p2 {height:19px; margin-top:2px; border-top:2px solid #fff; border-bottom:1px solid #888; z-index:100;}
.tabs li b.p3 {width:2px; height:21px; margin-top:1px; z-index:100;}
.tabs li b.p5 {height:20px; margin-top:2px;}
.tabs li b.p6 {height:19px; margin-top:3px;}
.tabs li b.p7 {height:18px; margin-top:4px;}
.tabs li b.p8 {height:17px; margin-top:5px;}
.tabs li b.p9 {height:16px; margin-top:6px;}
.tabs li b.p10 {height:15px; margin-top:7px;}
.tabs li b.p11 {height:14px; margin-top:8px;}
.tabs li b.p12 {height:13px; margin-top:9px;}
.tabs li b.p13 {height:12px; margin-top:10px;}
.tabs li b.p14 {height:11px; margin-top:11px;}
.tabs li b.p15 {height:10px; margin-top:12px;}
.tabs li b.p16 {height:9px; margin-top:13px;}
.tabs li b.p17 {height:8px; margin-top:14px;}
.tabs li b.p18 {height:7px; margin-top:15px;}
.tabs li b.p19 {height:6px; margin-top:16px;}
.tabs li b.p20 {height:5px; margin-top:17px;}
.tabs li b.p21 {height:4px; margin-top:18px;}
.tabs li b.p22 {height:3px; margin-top:19px;}
.tabs li b.p23 {height:2px; margin-top:20px;}
.tabs li b.p24 {height:1px; margin-top:21px;overflow:hidden;}
.tabs li b.p25 {width:1px; height:1px; background:#fff; margin-top:22px; border-top:0; overflow:hidden;}
.tabs li b.p26 {width:1px; height:1px; background:#000; margin-top:23px; border:0; overflow:hidden;}

.tabs li em b.shdw {position:absolute; display:block; left:-4px; bottom:0; border:0; width:17px; height:17px; background: #f93 url(images/tab_a.gif) bottom left; z-index:500;}

.tabs li a:hover,
.tabs li a:focus, 
.tabs li a:active 
{white-space:nowrap; color:#000; position:relative; z-index:500; cursor:pointer;}
.tabs li a:hover em, 
.tabs li a:focus em, 
.tabs li a:active em 
{color:#800; background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
.tabs li a:hover em b.shdw,
.tabs li a:focus em b.shdw, 
.tabs li a:active em b.shdw  
{visibility:hidden;}
.tabs li a:hover b, 
.tabs li a:focus b, 
.tabs li a:active b 
{background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
.tabs li a:hover b.p1, 
.tabs li a:focus b.p1, 
.tabs li a:active b.p1 
{background:#fff; border-bottom-color:#888;}
.tabs li a:hover b.p25, 
.tabs li a:focus b.p25, 
.tabs li a:active b.p25 
{background:#fff; border-bottom-color:#888;}
.tabs li a:hover b.p26, 
.tabs li a:focus b.p26, 
.tabs li a:active b.p26 
{background:#888;}

.tabs li a.selected, 
.tabs li a:hover.selected,  
.tabs li a:active.selected  
{white-space:nowrap; color:#000; position:relative; z-index:600; cursor:default;}
.tabs li a.selected em, 
.tabs li a:hover.selected em,
.tabs li a:active.selected em
{color:#800; background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
.tabs li a.selected em b.shdw, 
.tabs li a:hover.selected em b.shdw, 
.tabs li a:active.selected em b.shdw 
{visibility:hidden;}
.tabs li a.selected b, 
.tabs li a:hover.selected b, 
.tabs li a:active.selected b 
{background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
.tabs li a.selected b.p1, 
.tabs li a:hover.selected b.p1, 
.tabs li a:active.selected b.p1 
{background:#fff; border-bottom-color:#fff;}
.tabs li a.selected b.p26, 
.tabs li a:hover.selected b.p26, 
.tabs li a:active.selected b.p26 
{width:1px; height:1px; background:#fff; margin-top:23px; border-top:0; overflow:hidden;}

-->
</style>
</head>

<body>
<div id="header">
<div id="menu" class="tabs"><li><a href="overlap.html?current=one"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Home</em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li>

<li><a href="overlap.html?current=two"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Products<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li>

<li><a href="overlap.html?current=three" class="selected"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>What we do<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>

</a></li>

<li><a href="overlap.html?current=four"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Contact us<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li>

<li><a href="overlap.html?current=five"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Privacy Policy<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li>

<li><a href="overlap.html?current=six"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Links<b class="shdw"></b></em>

<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li>

</ul></div>
</div>
<div id="wrapper">
<div id="main"></div>
<div id="left"></div>

</div>
<div id="footer"></div>

</body>
</html>

shalom_m · #2 (**permalink**) Apr 14th, 2008, 20:52

There is obviously a <ul> missing after <div id="menu" class="tabs">
Now that <ul> will mess things up later on but put it in anyway.
I then tried deleting the </div> after the </ul> and the

<div id="wrapper">
<div id="main"></div>
<div id="left"></div>

became active again.

I think that solves 99% of the problems

dab42pat · #3 (**permalink**) Apr 14th, 2008, 22:13

OK I think ive sorted it, but I made that many changes to the code I lost track of what I did.

So here is the whole code for you to look at.

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#header {
    margin:0 ;
    width:792px;
    height:206px;
    border:thin #cccccc solid;
    border-bottom: thin #000000 solid ;
    clear:both;

}

#menu {
    margin:-40px;
    width:700px;
    height:40px;
   margin-top:169px;
    clear:both;
}

#wrapper {
    margin:0 auto;
    width:792px;
    margin-top:5px;
    overflow:auto;
    
}

#main {
    float:right;
    width:550px;
    height:300px;
    margin: 0 auto;
    border:thin #cccccc dashed;
    padding:  0 0 0 0;
    clear:right;
    
}

#left {
    float:left;
    width:220px;
    height:300px;
    margin-bottom:10px;
    border:thin #cccccc dashed;
    padding:  0 0 0 0;
     clear:left;
    
}

#footer {
    margin:0 auto;
    width:790px;
    height:40px;
    border:thin #cccccc solid;
    clear:both;
    margin-bottom:5px;
    
}
.tabs ul{margin:-2px; }
.tabs {list-style:none; padding:15px 0 0 10px; margin:30px 10px 50px 0; height:23px;}
.tabs li {display:block; float:left; margin:0 -13px -1px 0; clear:right;}
.tabs li a {display:block; text-decoration:none;}

.tabs li a em {float:left; padding:0 20px; height:22px; border-top:1px solid #fff; border-bottom:1px solid #000; position:relative; z-index:100; font-style:normal; color:#fff; background:#f93 url(images/tab_d.gif) repeat-x bottom left; font-size:11px; font-family:verdana; line-height:20px;}

.tabs li a b {font-size:0; line-height:0; position: ; border-bottom:1px solid #000; border-top:1px solid #fff; width:1px; display:block; float:left; z-index:300; background:#f93 url(images/tab_d.gif) repeat-x bottom left;}

.tabs li b.p1 {height:19px; background:#fff; margin-top:4px; border-top:2px; z-index:100;}
.tabs li b.p2 {height:19px; margin-top:2px; border-top:2px solid #fff; border-bottom:1px solid #888; z-index:100;}
.tabs li b.p3 {width:2px; height:21px; margin-top:1px; z-index:100;}
.tabs li b.p5 {height:20px; margin-top:2px;}
.tabs li b.p6 {height:19px; margin-top:3px;}
.tabs li b.p7 {height:18px; margin-top:4px;}
.tabs li b.p8 {height:17px; margin-top:5px;}
.tabs li b.p9 {height:16px; margin-top:6px;}
.tabs li b.p10 {height:15px; margin-top:7px;}
.tabs li b.p11 {height:14px; margin-top:8px;}
.tabs li b.p12 {height:13px; margin-top:9px;}
.tabs li b.p13 {height:12px; margin-top:10px;}
.tabs li b.p14 {height:11px; margin-top:11px;}
.tabs li b.p15 {height:10px; margin-top:12px;}
.tabs li b.p16 {height:9px; margin-top:13px;}
.tabs li b.p17 {height:8px; margin-top:14px;}
.tabs li b.p18 {height:7px; margin-top:15px;}
.tabs li b.p19 {height:6px; margin-top:16px;}
.tabs li b.p20 {height:5px; margin-top:17px;}
.tabs li b.p21 {height:4px; margin-top:18px;}
.tabs li b.p22 {height:3px; margin-top:19px;}
.tabs li b.p23 {height:2px; margin-top:20px;}
.tabs li b.p24 {height:1px; margin-top:21px;overflow:hidden;}
.tabs li b.p25 {width:1px; height:1px; background:#fff; margin-top:22px; border-top:0; overflow:hidden;}
.tabs li b.p26 {width:1px; height:1px; background:#000; margin-top:23px; border:0; overflow:hidden;}

.tabs li em b.shdw {position:absolute; display:block; left:-4px; bottom:0; border:0; width:17px; height:17px; background: #f93 url(images/tab_a.gif) bottom left; z-index:500;}

.tabs li a:hover,
.tabs li a:focus, 
.tabs li a:active 
{white-space:nowrap; color:#000; position:relative; z-index:500; cursor:pointer;}
.tabs li a:hover em, 
.tabs li a:focus em, 
.tabs li a:active em 
{color:#800; background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
.tabs li a:hover em b.shdw,
.tabs li a:focus em b.shdw, 
.tabs li a:active em b.shdw  
{visibility:hidden;}
.tabs li a:hover b, 
.tabs li a:focus b, 
.tabs li a:active b 
{background:#fc8 url(images/tab_b.gif) bottom left; border-bottom-color:#888;}
.tabs li a:hover b.p1, 
.tabs li a:focus b.p1, 
.tabs li a:active b.p1 
{background:#fff; border-bottom-color:#888;}
.tabs li a:hover b.p25, 
.tabs li a:focus b.p25, 
.tabs li a:active b.p25 
{background:#fff; border-bottom-color:#888;}
.tabs li a:hover b.p26, 
.tabs li a:focus b.p26, 
.tabs li a:active b.p26 
{background:#888;}

.tabs li a.selected, 
.tabs li a:hover.selected,  
.tabs li a:active.selected  
{white-space:nowrap; color:#000; position:relative; z-index:600; cursor:default;}
.tabs li a.selected em, 
.tabs li a:hover.selected em,
.tabs li a:active.selected em
{color:#800; background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
.tabs li a.selected em b.shdw, 
.tabs li a:hover.selected em b.shdw, 
.tabs li a:active.selected em b.shdw 
{visibility:hidden;}
.tabs li a.selected b, 
.tabs li a:hover.selected b, 
.tabs li a:active.selected b 
{background:#fff url(images/tab_c.gif) bottom left; border-bottom-color:#fff;}
.tabs li a.selected b.p1, 
.tabs li a:hover.selected b.p1, 
.tabs li a:active.selected b.p1 
{background:#fff; border-bottom-color:#fff;}
.tabs li a.selected b.p26, 
.tabs li a:hover.selected b.p26, 
.tabs li a:active.selected b.p26 
{width:1px; height:1px; background:#fff; margin-top:23px; border-top:0; overflow:hidden;}

-->
</style>
</head>

<body>
<div id="header">
<div id="menu" class="tabs"><ul><li><a href="overlap.html?current=one"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Home<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li></ul>
<ul>
<li><a href="overlap.html?current=two"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Products<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li></ul>
<ul>
<li><a href="overlap.html?current=three" class="selected"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>What we do<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>

</a></li></ul>
<ul>
<li><a href="overlap.html?current=four"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Contact us<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li></ul>
<ul>
<li><a href="overlap.html?current=five"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Privacy Policy<b class="shdw"></b></em>
<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li></ul>
<ul>
<li><a href="overlap.html?current=six"><b class="p1"></b><b class="p2"></b><b class="p3"></b>
<em>Links<b class="shdw"></b></em>

<b class="p3"></b><b class="p5"></b><b class="p6"></b><b class="p7"></b><b class="p8"></b><b class="p9"></b><b class="p10"></b><b class="p11"></b><b class="p12"></b><b class="p13"></b><b class="p14"></b><b class="p15"></b><b class="p16"></b><b class="p17"></b><b class="p18"></b><b class="p19"></b><b class="p20"></b><b class="p21"></b><b class="p22"></b><b class="p23"></b><b class="p24"></b><b class="p25"></b><b class="p26"></b>
</a></li></ul>
</div></div>
<div id="wrapper">
<div id="main"></div>
<div id="left"></div>

</div>
<div id="footer"></div>

</body>
</html>

saltedm8 · #4 (**permalink**) Apr 14th, 2008, 22:35

Smart ASS !! lol,

well done thank you both

( just had to put the 'margin: 0 auto;' back on the header, perfect )

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Nightmare query	AdRock	Databases	0	Nov 17th, 2007 15:50
[SOLVED] css rollover menu help	danny322	Web Page Design	7	Oct 23rd, 2007 13:58
Nightmare product/Category structure	D3mon	Databases	2	May 5th, 2005 16:39

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[solved] Menu Nightmare