Hvordan lage forskjellige menyer med css

[theone1990]

Er ikke så god med html og css. men jeg driver å lager en side der det er en vertikal meny, og en horisontal meny. Jeg har brukt denne koden til den horisontale.

 

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

 

#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after
{
content: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 80%;
font-size: 0.8em;
}

ul#navlist li
{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

 

Det er den samme koden som er på den vertikale (bare at menyen går vertikalt da:P)

Jeg lurer på hvordan jeg kan få menyene til å gå vertikalt og horisontalt.

Når jeg har laget en horisontal meny, så blir den andre menyen også horisontal. Hvordan kan jeg gjøre så den blir vertikal? Så det ikke blir den samme css koden til hele dokumentet. håper dere skjønner hva jeg mener.

[Anders Moen]

Gi de forskjellige klasser (class="et_navn") så styler du ut ifra klassenavnet i CSS-en

 

(Hvis du skjønte min 'fine' forklaring?)

[theone1990]

nei, egentlig ikke:P Skal jeg skrive class="navn" i html koden?

[Anders Moen]

Skal skrive et eksempel så du får en horisontal og en vertikal meny nå.

 

Vertikal meny (CSS):

ul {
list-style-type: none;
}
.meny_vert a {
color: #000;
}

 

Vertikal meny (HTML):

<ul>
<li class="meny_vert"><a href="link.htm">Link</a></li>
<li class="meny_vert"><a href="link.htm">Link</a></li>
</ul>

 

Horisontal meny (CSS):

.meny_hori {
display: inline;
/* La på denne for jeg tror den må være der for at det skal fungere i IE */
}
.meny_hori a {
float: left;
color: #000;
}

Horisontal meny (HTML):

<ul>
<li class="meny_hori"><a href="link.htm">Link</a></li>
<li class="meny_hori"><a href="link.htm">Link</a></li>
</ul>

 

 

Edit:

Bare ga noen navn til dem nå.

 

. betyr at det skal være class="" og hvis det står # så betyr det at det skal være id="" (id skal brukes maks 1 gang i et HTML dokument)

 

Hmm..noe mer jeg skulle si nå? Tror ikke det...

 

 

Prøv den. Si ifra om noe ikke fungerer riktig. Tror jeg kanskje skrev litt for kjapt hehe

 

 

Edit 2:

Sikkert en dårlig forklaring, eller hva?

Endret 4. juli 2007 av Anders-Moen

[eigan]

Du har jo en del her da: listamatic