Crazy menus...

escaflowne11 · #1 (**permalink**) Oct 1st, 2006, 03:03

Well I'm back again with more problems. I seem to have all the stuff work up to this point, so I am at least making progress. now I have some major issues with my menu system. It may be a lot to look over, but if you can help me out, it would save me an seizure. (I have been working on sorting this one out for 2 days straight morning to 4am)

First off, heres the new page and css code.

http://www.scoffshop.com/redesign/index2.html

http://www.scoffshop.com/redesign/content2.css

OK, now let me explain my problem in detail.

I cant figure out for the life of me how to make the menu drop down clean, with a white background, and without the gap between the menu and submenu. Every time, it either pulls the white backing over the line (as it is now) or it wont let me get to the links at all. I just want the sub menus to gracefully drop down right below just like it is set right now, without covering the border line.

I have run over the ukgeoff tutorial several times, but it just leaves me in the end with a "But you can fix this - can't you?" No offence to geoff, but no I cant fix it...

I also dont know if my code is clean or not... does it look ok to you guys?

To those who can help me, you get major props!

ukgeoff · #2 (**permalink**) Oct 1st, 2006, 16:48

Below is your file with many corrections. I have included the css in the html file for my convenience when sorting it out for you.

If you want things to work, you need to learn to follow a tutorial as laid out and mark up your html correctly.

Code: Select all

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<style type='text/css'>
html, body 
{ 
margin: 0; 
padding: 0; 
height: 100%;
background: #005fa4 url("backing.gif") repeat-x;
}

#main
{
height:100%;
width:600px;
margin: 0px auto 0px auto;/* ':' This was to the left of the ';' and screwing things up. */ /* top, right, bottom, left*/
background-color:#ffffff;
border:#000000 2px solid;
border-top: none;
border-bottom: none;
position: relative; /* position: absolute; */
/* left: 100px; You probably put this in to compensate for the cock-up above in margin. */
}

#head
{
background-image:'';
height: 100px;
border-bottom:#000000 2px solid;
width: 100%;
}

#content
{
height: 100%;
margin: 5px 10px 5px 10px; /* top, right, bottom, left*/
overflow: auto;
display: none;
}

#navigation
{
/* Coding as required */
position: relative;
font-size: 12px;
font-family:"Courier New", Courier, monospace;
/* border-bottom: 2px #000000 solid; */
/* height: 16px; */
z-index: 1;
}

div#navigation ul
{
list-style: none;
list-image: none;
margin: 0;
padding: 0; /* Padding: 0; Capital 'P'*/
position: absolute;
background-color: ffffff;
/* width: 80px; Horizontal menu so needs to be at level1. */
}

div#navigation ul ul
{
position: absolute;
left: -9999px;
}

div#navigation li /* .submenu */
{
position: relative;
/* text-align: center; This is in the wrong place. Should be in 'li' */
}

div#navigation li.submenu:hover ul.level2
{
display: block;
/* width:100px; Need to specify this for each sub-menu as widths can be different. */
left: 0; /* left:55px; */
top: 15px; /* top:0px; */
/* z-index:1; Specified at the highest level, #navigation. */
}

div#navigation ul#sub1 /* Might need one of these for each sub-menu as widths may need to vary. */
{
width: 170px;
}

div#navigation li a
{
display: block;
padding: 2px 0 2px 0; /* padding: 5px 0 3px 3px; Your padding plus font-size add up to more than the height of the navigation. */
text-decoration: none;
width: 100px;
}

/* This is not required. Width moved to above.
div#navigation ul.level1 a
{
width: 100px;
}
*/

div#navigation li a:hover
{
color: #000000;
background-color: #ffffff;
background-image: url('tab1.gif');
background-repeat: no-repeat;
background-position: top center;
}

div#navigation ul.level1
{
width: 600px;
height: 16px;  /* height: 20px; Can't sensibly be more that height specified for #navigation. */
}

div#navigation ul.level1 li
{
position: relative;
float: left;
/* These two below now in right place. */
width: 100px;
text-align: center;
}

div#navigation ul.level2 li
{
border: 2px solid #000000;
border-top: none;
}

/* This is the second declaration for this style even though you  have a capital 'D'
Div#navigation li.submenu:hover ul.level2
{
display: block;
left: -2px;
top: 18px;
}
*/
</style>

<!--[if lte IE 6]>
<link rel="StyleSheet" type="text/css" href="ieonly.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="content2.css" />
<title>Scoff Skateboarding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
    <div id='main'>
    
        <div id='head'>
        </div>
            <!-- Note that I have removed the <a> link from the top level <li>. -->
            <div id='navigation'>
                <ul class='level1'>
                    <li class='submenu'>Scoff
                        <ul class='level2' id='sub1'>
                            <li><a href="#">News</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Contests</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
               </li> <!-- This was in the wrong place. Should wrap around ul. -->
                    <li class='submenu'>Products
                        <ul class='level2' id='sub2'>
                            <li><a href="#">Store</a></li>
                            <li><a href="#">Workshop</a></li>
                            <li><a href="#">Retailers</a></li>

                        </ul>
               </li> <!-- This was in the wrong place. Should wrap around ul. -->
                    <li class='submenu'>Media
                        <ul class='level2' id='sub3'>
                            <li><a href="#">Catalog</a></li>
                            <li><a href="#">Photos</a></li>
                            <li><a href="#">Videos</a></li>
                        </ul>
               </li> <!-- This was in the wrong place. Should wrap around ul. -->
                    <li class='submenu'>Team
                        <ul class='level2' id='sub4'>
                            <li><a href="#">Riders</a></li>
                            <li><a href="#">Join Us</a></li>
                        </ul>
               </li> <!-- This was in the wrong place. Should wrap around ul. -->
                    <li><a href='#'>Forums</a></li>
                </ul>
            </div>
        
        <div id='content'>
        </div>
        
    </div>

</body>

escaflowne11 · #3 (**permalink**) Oct 1st, 2006, 16:56

I followed up your tutorial several times before, but I still needed to write this menu, which I tried to adjust as you suggested in the tutorial. Thank you so much for fixing that up for me, your great!

(edit)
Now for a few questions I have of the overall build of this. I would just like to have a full understanding of this technique.

1) Under div#navigation ul.level1, you state "height: 16px; /* height: 20px; Can't sensibly be more that height specified for #navigation. */". Where would I have set the height? I dont see a command for it yet anywhere in the code. (at least since you removed it from there...

2) you made me switch out the position: absolute in the beginning for a relative. Why did you do that? I dont exactly understand those 2 commands so well...

3) I now have the new code inserted into the CSS, along with the edited html file, I want a few more things to be altered. I first of all need those parent menu options to be links, so I left the "a href" codes there. I also want to have a border underlining the entire bottom of the menu, from side to side of the divs. I cant for my life figure out how to put a border there.

Im not sure about this though. Am I just approaching the idea of a CSS driven menu the wrong way? Anyways, the new code and html is up, and its the same links as in the ones above. Tell me what you think please, you have been such a blessing to me for all the wonderful help.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Crazy disabling buttons	1840dsgn	Flash & Multimedia Forum	1	Nov 1st, 2007 22:46
Help!! probably stupid Q. but I'm going crazy 'cos of it	nutbolt	Starting Out	1	Feb 6th, 2007 16:44
Going crazy with Float	Sporky	Web Page Design	7	Nov 30th, 2006 01:52
What I'm working on (idea is crazy)	buyseconds	Introduce Yourself	4	Nov 18th, 2005 13:58

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Crazy menus...