Listor och tabeller

I det här momentet lär vi oss använda olika typer av listor och tabeller.

Tabeller
Tidigare användes tabeller för att desgina sidor. Det används det inte längre som eftersom designen av sidan hamnade i HTML och inte i css, så allt underhåll av sidan blev besvärligt. Numer används tabeller det de var avsedda för från början, att visa information.

Listor
Listor används för det mesta för att skapa navigation. 

 

 

 

Uppgifter tabell

Utgå från boken eller platser på nätet och lös de här uppgifterna.

Skapa en lista som innehåller 3 rader och 3 kolumner.

Styla med css listan så att tabell head (dvs första raden blir lite avvikande från resten)

Styla med css så du ändrar färg och tjocklek på borders.

 

Här finns en bra tutorial hur du gör

 

Uppgifter lista

Skapa en unordered list och en orderered list.

Experimentera med några olika typer av list-styles och se vad du får för resultat.

 

Här har du exempel på olika listor typer

 

listor

 

Navbar

Skapa en navbar som på bilden nedan. Testa utför den både horisontell och vertikal

 

Använd en lista och skapa en navbar som på bilden nedanför

navbar

 

Du behöver använda dig av de här attributen som jag inte har gått igenom ännu.

display

:hover (pseudo class)

facit

Här finns en tutorial hur du gör

 

Lite svårare

Lägg till en border runt navbaren, se också till så du får ett mellanrum till vänster mellan där texten börjar och navbaren börjar.

navbar border