list formatting

[donnalouwho]

Hey Michael,

I'm doing another list and having trouble remembering how to get the items in a vertical line other than top to bottom. Can you help? Here is my code for the list:

.cheese_list {
text-align: center;
display: block;
height: 50px;
width: 868px;
position: absolute;
list-style-image: none;
list-style-type: none;
font-size: 10px;
margin-right: 10px;
float: left;
}

and

<ul class="cheese_list">

<li><a href="brie.html" title="brie">Brie</a></li>

<li><a href="camembert.html" title="Camembert">Camembert</a></li>

<li><a href="bleu_de_laqueuille.html" title="Blue de Laqueuille">Bleu de Laqueuille</a></li>

<li><a href="munster.html" title="Munster">Munster</a></li>

<li><a href="le_bichon.html" title="Le Bichon">Le Bichon</a></li>

<li><a href="boucanier.html" title="Boucanier">Boucanier</a></li>



</ul>

I'm trying to have them read in a line rather than up and down. I know I'm forgetting that very special thing that will be the answer!

[Instructor]

You're very much on the right track, but you haven't gone far enough. Keep digging! Your ".cheese_list" style will only affect the overall <ul> tag for the menu, so you can make it a line all you like, but the <li> items within it aren't going to pay any attention to you. You've got to crack the whip and style them to make them do your bidding. Gotta' break your tags like horses sometimes.

Your code should look something like this (modify as you see fit):

Code: Select all

/* Menu Container Style (styles <ul> tags) */

ul.cheese_list {
        display: block;
        height: 50px;
        width: 868px;
        position: absolute;
        list-style-image: none;
        list-style-type: none;
        margin-right: 10px;
}

/* End Menu Container Style (styles <ul> tags) */


/* Button Container Style (styles <li> tags) */

ul.cheese_list li {
        display: block;
        float: left;
        height: 50px;
        width: 135px;
        margin-right: 4px;
        margin-left: 4px;
}

/* End Button Container Style (styles <li> tags) */

/* Button Style (styles <a> tags) */

ul.cheese_list li a {
        font-size: 10px;
        text-align: center;
        -- Put all your pretty button styling (text, color, drop shadow, etc.) in here --
}

/* End Button Style (styles <a> tags) */

Basically with this code you're now styling the overall menu container (the <ul> tag), each button container (the <li> tags), and the buttons themselves (the <a> tags). Now that you have manual control over the containing tag and the inner tags you can now make the menu you want.

See this quick conceptual tutorial:
http://www.w3schools.com/css/css_navbar.asp

[donnalouwho]

Thanks, Michael - new question, however. It is behaving correctly and aligning properly (for the most part) in the wysiwyg but when I preview in a browser (Chrome) it still has the bullet points and is vertical. Why the heck would that be?!

NEVERMIND!!!!! Glory be, I figured it out! THANK YOU!

[Instructor]

So ... you got it ... or ... ?

Just remember Rule #1 of any work in Dreamweaver:
The WYSIWYG is a dirty lie!