En snabb och förenklad guide!
En meny görs lättast och smartast med taggarna <ul>, <li> samt <a>.
<ul> - Står för "Unordered list" och begränsar din lista med "list item"s <li>, för att sedan göra knapparna klickbara behövs <a>
Exempel:
<ul id="meny">
<li><a href="index.html">Hem</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="ommig.html">Om mig</a></li>
</ul>
Vidare förklaring av koden:
Som jag förstått har du bara använt dreamweaver så det kan vara bra att förklara lite grunder i koden.
Nästan varje html-element består av "tags" och "attributes", en tag är till exempel <ul>, <li>, <a>, <div>, <table> osv..
I dessa kan du ange attributes, som jag gjorde med <ul id="meny"> där "meny" syftar på det stil-id som elementet ska hämta sin css-information ifrån.
Vidare har vi en till attribut som heter href="" som syftar på vilken sida man ska hamna på när man klickar på länken<a></a>.
För att snygga till det hela behövs det lite css-kod.
En sådan här lista kommer att vara väldigt ful och se ut ungefär som en punktlista i word innan man snyggar till den med hjälp av css.
CSS:
ul#meny {
padding: 0px;
margin: 0px;
}
ul#meny li {
list-style-type: none;
}
ul#meny li a {
padding: 5px;
background: #2a2a2a;
font: 11px Tahoma;
color: #ffffff;
text-decoration: none;
}
ul#meny li a:hover {
background: #ffffff;
color: #2a2a2a;
}
Förklaring av CSS:
Först börjar vi med att deklarera vad för typ av element som din stil är skapad för, detta görs vida ul#meny {}, alltså elementet är av typen <ul>.
Sedan vill vi ställa in padding och margin, läst på om detta på internet ifall du inte har koll på det!
Sedan skapar vi en stil för alla <li>-element som är INOM <ul id="meny">här</ul>, och bestämmer att alla dessa ska inte ha någon list-style-type vilket innebär att de inte kommer ha en punkt, fyrkant, streck eller numrering som är vanligt vid en lista.
Efter det går vi vidare och skapar en stilmall för alla <a>-element INOM <li> som är inom <ul id="meny">! Där bestäms återigen padding, men även bakgrund, typsnitt, textfärg och text-decoration (Innebär att texten inte stryks under när den är länk).
Slutligen bestäms det :hover som är en selector inom css (läs om den på internet). Denna bestämmer i detta fall vad som ska hända när man drar musen över ett <a>-element som är inom <li> som i sin tur är inom <ul id="meny">. Där bestäms en ny bakgrundsfärg och text-färg!
Hoppas att denna korta guide hjälper!
MVH, Simon
