Fri, 2010-07-02 05:29
My new horizontal menu worked perfectly when the CSS was in the internal style sheet. I moved the CSS to an external style sheet and the menu went vertical. I moved the CSS back to the internal style sheet and the menu is still vertical.
Here is what I am doing differently from what I have done in the past: Beginning all of my selectors with a number sign. (That is something I do not understand. I was just following what the tutorial said to do.)
The HTML:
<ul class = "bigger"> <li><a href="index.php">Home</a></li> <li><a href="classifieds.php">Classifieds</a></li> <li><a href="promotion.php">Business Promotion</a></li> <li><a href="design.php">Website Design</a></li> <li><a href="opportunity.php">Opportunity</a></li> <li><a href="register.php">Register</a></li> </ul>
The CSS:
#navigation{ width:100%; height:30px; background-color:#000033; } #navigation ul{ margin:0px; padding:0px; } #navigation ul li{ list-style:none; margin-left:30px; display:inline; height:30px; float:left; list-style:none; position:relative; } #navigation li a{ color: #4682B4; text-decoration:none; } #navigation li a:hover{ color:#fff; text-decoration:underline; } navigation li ul{ margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-color:#000033; } #navigation li:hover ul{ display:block; width:160px; } #navigation li li{ list-style:none; display:list-item; } #navigation li li a{ color:#fff; text-decoration:none; } #navigation li li a:hover{ color:#fff; text-decoration:underline; }
The page can be found at http://worldwide-classifieds.biz/test.php.
Fri, 2010-07-02 06:22
#1
Peter77 wrote: Beginning all
Beginning all of my selectors with a number sign.
That means you're targetting elements with an ID, rather than an element with a class or an element without ID or class. If you don't understand something, you should be careful about doing it, because for all you know, the tutorial might be wrong.
The problem as I see it is that you've got all these rules for #navigation in your CSS, but no element with an ID of navigation in your HTML.
Fri, 2010-07-02 06:29
#2
You also have navigation li
You also have navigation li ul with no hash mark in the front.
Fri, 2010-07-02 07:48
#3
Don't simply follow tutorials
Don't simply follow tutorials blindly, if you do not understand a part of them and tbh a pretty important thing such as an ID then you MUST do some more general tutorials on the basics of CSS and Markup.
There is altogether far too much skipping forward past the basics nowadays due to all these copy and paste tutorials they simply allow people to avoid really learning a craft.
Fri, 2010-07-02 10:46
#4
My horizontal menu works now
Thank you (both of you) for your comments.
I began taking the W3Schools CSS tutorial and it led me to the answer. I put my menu inside a division with the name of "navigation" like this
<div id="navigation"> <?php include("menuClassAPeter.php"); ?> </div>
Now it works perfectly.