Artikeln förutsätter att du läst de föregående artiklarna i Dreamweaver Guide.
Formatera listor
Lite trixande med display och pseudoklasser
I den här artikeln lär du dig att skapa en lista till den webbsida som användes i förra kapitlet. Du lär dig också att använda display:inline som gör att listan skrivs ut horisontellt istället för vertikalt, en egenskap som även kan användas på andra XHTML-taggar. Till sist visar jag hur du kan använda pseudoklassen first:child för att endast påverka det första listelementet.
Skapa en lista i DreamWeaver
Du skapar en numrerad- eller onumrerad lista genom att i menyn längst upp välja "Text --> List --> "unordered list" (ul) eller "ordered list" (ol).
- Varje listelement, exempelvis detta, skrivs inom taggarna <li> och </li>.
- När du trycker på returtangenten (i design-läge) skapas automatiskt ett nytt listelement.
- Om du trycker på returtangenten två gånger efter varandra så avslutar DreamWeaver listan.
Skapa en horisontell lista
- Öppna upp webbsidan som användes i förra kapitlet. Jag valde att använda den sida där en stilmall användes, men det spelar egentligen ingen roll. Jag nämner det bara för att göra dig uppmärksam på att den tidigare XHTML-koden kan se lite olika ut beroende på om du har använt dig av en stilmall eller inline CSS från tidigare kapitlet.
- Radera all kod i sidhuvudet, men behåll div-elementet.
- Placera markören i div-elementet (i design-vyn) och välj "text --> list -> unordered list".
- Skriv in "Länk 1" och tryck retur.
- Skriv in "Länk 2" och tryck retur.
- Skriv in "Länk 3" och tryck retur.
- För att göra så att listelementen <li> visas horisontellt, så lägger du till detta i CSS-filen som skapade tidigare.
div#sidhuvud li {display:inline;}
- Eftersom länkarna kommer att ligga för tätt inpå varandra så skapar vi en högerpadding för varje listelement enligt:
div#sidhuvud li {display:inline; padding-right: 12px;}
- Om du vill så kan du skapa en kantlinje som skiljer elementen åt:
div#sidhuvud li {display:inline; padding-right: 12px; border-right: solid 1px;}
- Det blir dock snyggare om vi har padding på både höger och vänster sida då vi använder kantlinje. Vi ersätter höger-paddingen på 12px med en vänsterpadding på 6px och en högerpadding på 6px:
div#sidhuvud li {display:inline; padding-left: 6px; padding-right: 6px;border-right: solid 1px;}
First child
- Ibland kan det vara bra att kunna en kantlinje även på elementet längst till vänster för att få en enhetlig design. Att lägga en border-left på alla element blir dock fult eftersom den egenskapen då kommer att "krocka" med det föregående elementets border-right. Istället använder du dig av en pseudoklass. Lägg till detta i stilmallen:
div#sidhuvud ul:first-child {border-left: solid 1px;}
"First-child" betyder direktöversatt "första barnet".
Kommentar: Om ett element (2) ligger inuti ett annat element (1) så räknas det som ett barn till 1.
Första barnet till taggen ul får med denna kod tillagd i stilmallen en 1 pixels solid kantlinje.
Kommentar: Motsatsen till first-child är last:child, som påverkar det sista elementet och fungerar på samma sätt.
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: HTML (.txt) CSS (.txt)
Nästa artikel: Skapa sidomeny
