CSS:PART2: Simpelt design uden tables kun CSS

Hey igen alle!
Denne guide er en fortsættelse på http://testmax.dk/Forum/T.....-tables-kun-CSS.aspx
Vi vil i denne part2 gøre lidt mere ud af designet, for det så pænt kedeligt ud der hvor vi slap det sidst!

Lad os gå i gang!

Vi vil starte ud med vores default.html (Hvis du ikke har den bør du følge part 1 som er linket til ovenover)
Denne gang vil vi virkeligt gerne have et lidt smartere topbanner samt en ordenlig menu og lidt indhold på siden, og vi starter med headeren..
i vores div hvor vi har topbanneret skal vi faktisk ikke ændre noget, det gør vi nemlig i css'en.

Videre til menuen.

Før havde vi kun teksten "MENUEN" i menuen, men den her gang har jeg tilføjet først en overskrift til menuen:

Altså en overskrift2 med tilhørende class som vil gå igen i content boksen også som en form for overskrift :)
Jeg har så sat nogle links ind i menuen også, men jeg har stillet dem op i en liste da det er min foretrukne måde at opstille en menu på, og der er måske

nogen der vil give mig ret og måske endda nogen der tænker "Doh hvorfor har jeg ikke tænkt på det noget før.."
De links der nu ligger i denne liste har fået et id "menulink" sådan vi kan style disse links uden at alle andre links på siden vil blive berørt.

Og vores kære content boks har jeg også kommet til at pille lidt ved!

Øverst har jeg igen sat den samme "overskrift" ind som jeg gjorde i menuen.
Så har jeg tilføjet en tekst til siden, jeg fandt bare en random latin generator da det er god fylde på en side :)

Så igen kommer der en overskrift og igen lidt tekst om.. Mig :D ?
Så ikke den store ændring, lidt tekst og noget overskrift.

Okay, det var det kedelige, nu til det virkelig sjove, nemlig CSS delen! :D
Vi starter med vores topbanner som vi allerede har stylet, men nu vil vi lige tilføje lidt!

Jeg har valgt at lave et billede og sætte ind i stedet for vores logo tekst.

Vores background-repeat:no-repeat; gør at vores baggrundsbillede IKKE gentager sig, var den derimod sat til repeat-x var billedet fortsat vandret og hvis den

var sat til repeat-y var den fortsat lodret.
Men da dette var et baggrundsbillede har vi jo så stadig vores tekst i banneret, og da jeg har lavet teksten til banneret på selve baggrundsbilledet vil vi

selvfølgelig ikke have den der LOGO tekst. Man kan jo altid fjerne den i html koden men hvis nu at css ikke er understøttet (f.eks mobiltelefoner osv.) Så er

det meget rart der kan stå en tekst hvis billedet ikke kan vises via css. Så derfor vælger vi at gemme teksten, ja faktisk smider vi det 9999 pixels til

venstre:

På den måde har vi stadig vores tekst hvis en browser ikke kan tage css, og hvis den kan skjuler den teksten og viser vores baggrundsbillede, smart!

Nu til vores menu. Well ikke den store ændring udover vi sætter den til at være 100% høj:


Nu til vores overskrifter på siden, den i toppen af menuen f.eks og dem i content boksen. Det er en class så den skal starte med et . (punktum).

Vi starter med at sætte vores skrift til at være 14 pixel og vælger hvilken skrifttype vi vil bruge.
Næste linie har vi valgt at gøre teksten fed, altså ligesom man ville gøre i html med <b>fed tekst</b>
Color betyder skriftens farve, og dernæst har jeg tilføjet en kant, men kun på undersiden af teksten som er 2 pixels og har en bestemt farve.
Dette kan jeg meget bedre li' i stedet for en alm. underline da man kan style linien under teksten på den her måde.
Ellers har jeg bare valgt at lave lidt afstand hist og her med padding og margin, vil foreslå i selv leger med de forskellige tal og ser resultaterne efter,

derved lærer i det også selv :)

Nu vil vi gerne style teksten, altså vores paragraph.

Vi vil ikke have et punkt foran hver eneste linie i vores liste så den har vi fjernet med:

og igen har vi lagt lidt luft til med padding, men jeg har kun valgt at bruge padding og ikke f.eks
padding-top
padding-right
padding-bottom
padding left
Men derimod

Men hvad er hvad?
Jo se på det som en firkant hvor vi starter fra toppen og så følger vi med urets retning hele vejen rundt:
padding-top
padding-right
padding-bottom
padding left

Simpelt nok :)

nu har vi stylet vores liste, men for at gøre det lidt mere spændende når vi holder musen over det vil vi gerne have en effekt som kun er der når vi som sagt

holder musen over et link i menuen:

Ligesom med et link tag altså a kan vi også bruger :hover på andre tags og i dette tilfælde er det vores liste.
Vi har givet den lidt luft, en baggrundsfarve og en kant til venstre. Prøv funktionen af og se resultatet :).

Nu vil vi så til sidst lige style vores links så de ikke er den kedelige blå med en linie under som er browserens standard:

Første linie af koden betyder at både vores link OG links som allerede er besøgt må gerne se ens ud og dem adskiller med , (komma)
Vi har givet skriften en farve og næst at vi FJERNET linien underlinks.
Vi har også lavet det sådan at holder vi musen over et link skal den skifte farve sådan vi kan se hvad vi holder musen over.

Det var links på selve siden, men vi skal lige have en sidste ting med, nemlig dem i menuen som faktisk også er stylet med koden ovenover, men det er bare

ret træls at vi SKAL ramme teksten præcis. Vi vil gerne have det sådan at selvom vi er på linie med linket men ikke rammer teksten men i stedet for lidt ud

til højre, dog stadig i menuen, skal linket stadig aktiveres, og det gør vi med:

Og vi har sat et ID på vores menulinks som var #menulink, så vi tilføjer lige det til vores css

Så nu har vi sat vores display:block; ind og samtidig har vi stylet linket i menuen endnu mere selvom det var stylet lidt i forvejen.

Så nu har vi faktisk vores færdige resultat, og jeg synes selv det ser en del bedre ud end hvad det gjorde da vi blev færdige med at sætte det hele op i part

1 af denne guide.

Hele default.html koden


Hele styles.css koden


Håber det var noget der kunne bruges og i fik lært lidt.

I kan desuden se det færdige resultat på:
http://net-freak.dk/tutor.....n/default_part2.html

/Net-Freak