Kildekode til eksempler og figurer

Alle links på denne side fører til de beskrevne eksempler/figurer. For så vidt referencen er til en figur, vil den viste webside svare til figuren.

I alle tilfælde omfatter sådanne eksempelsider al den kode, der indgår i eksemplet/figuren. Denne kan du se/kopiere ved at bruge browserens Vis kilde-funktion.

For at vende tilbage til denne oversigtsside må du bruge browserens tilbageknap.

Kapitel 2

Figur 2-1
En traditionel webside layoutet på en ny måde. Inkl. eksempel 2-1 og eksempel 2-2. Bemærk at dette eksempel er komplet i forhold til bogens eksempel, samt at stylesheets til både skærmvisning og udskrift er indsat i head-delen af dokumentet.

Kapitel 3

Figur 3-3
En tom CSS-boks tegnet af div-markøren.

Kapitel 5

Figur 5-3
Forskellige links-farver på samme side

Kapitel 7

Figur 7-7
Indsætning af flere CSS-kasser på en webside

Kapitel 8

Figur 8-4, figur 8-5, figur 8-6, figur 8-7 og figur 8-9.
Skrifter og overførbare skrifter
Figur 8-11 og figur 8-12
Symbolskrifter

Kapitel 10

Figur 10-8
Kontaktliste
Figur 10-10
Vandret liste
Figur 10-12
Førerlinie indsat som browergenereret indhold. Internet Explorer viser ikke førerlinien.
Figur 10-13
Indholdet af cite-attributten indsat efter det citerede tekststykke. Internet Explorer viser ikke dette indhold.
Figur 10-15 og figur 10-16.
En url indsat efter et link. Effekten kan kun ses i print preview (eller ved at udskrive eksemplet). Internet Explorer viser ikke url'en.
Figur 10-17
Citationstegn som browsergenereret indhold. Internet Explorer viser ikke citationstegnene.

Kapitel 11

Figur 11-1
CSS-boksen med tekstindhold
OBS! der er en fejl i CSS-koden (eksempel 11-2) i bogen
Figur 11-2
CSS-boksen med for meget tekstindhold. Bemærk at Internet Explorer 6 viser kassen ukorrekt.

Kapitel 12

Figur 12-21
Webside, layoutet med float-bokse.

Kapitel 13

Figur 13-1
Webside med absolut positioneret venstre kolonne.
Figur 13-5
Mellemrubrikker flyttet til venstre i forhold til artikelteksten med position:relative;
Figur 13-9
Et menupanel, fikseret i browservinduet ved hjælp af Eric Berdnaz' metode.

Kapitel 17

Figur 17-02
Model 1: Simpelt 1-spaltet layout med sidehoved. (Eksempel 17-1 og eksempel 17-2).
Figur 17-03
Model 2: To flydende kolonner, højrestillet menukolonne
Figur 17-05
Model 3: Spejlvending af figur 17-03.
Figur 17-06
Model 6 med tre flydende kolonner, uden sidehoved og sidefod.
Figur 17-07
Model 6: Tre flydende kolonner, spaltestreger mellem kolonnerne.
Figur 17-08
Model 6: Fire flydende kolonner.
Figur 17-09
Model 4: To kolonner, indsat sidehoved og sidefod. Float-metoden.
Figur 17-10
Model 4: To kolonner, fikseret venstre kolonnebredde, sidehoved og sidefod. Position-metoden.
Figur 17-11
Model 5: Højrestillet menukolonne. Position-metoden.
Figur 17-12
Model 6: Tre kolonner med flydende midterkolonne. Position-metoden.
Figur 17-13
Model 8: To kolonner med navigationsbjælke og højrestillet undermenu.
Figur 17-14
Model 7: Komplet webside med navigationsbjælke og venstrestillet menukolonne.
Figur 17-15
Model 8: Websidelayout med fikserede kolonnebredder.
Figur 17-23
Tospaltet layout med ens kolonnehøjde.

Sidefodens placering

Det er afgørende for forståelsen af bogens eksempler, at der er stor forskel på de beskrevne designprincipper.

1. Figur 17-19 viser et eksempel, hvor sidefoden er nederst i browservinduet, hvis indholdet af websiden ikke er tilstrækkeligt til at udfylde browservinduet. Er der mere indhold, skubber dette indhold sidefoden ned "under" browservinduets kant. Det usædvanlige ved eksemplet er således kun, at sidefoden ses nederst i browservinduet, hvis mængden af indhold er ringe, som i eksemplet.

2. Figur 17-20 viser et eksempel hvor sidefoden altid er placeret nederst i browservinduet, uanset mængden af indhold i dette.

Som det fremgår af bogen, er der problemer med at anvende position:fixed i Internet Explorer 5 og 6, men ikke i Internet Explorer 7. Der er flere metoder til at sikre den ønskede virkning i de to ældre Microsoft browsere: dels brugen af Dean Edwards IE 7 Javascript patch, omtalt i bogens appendiks D, som jeg har brugt som eksempel her, og del Eric Berdnaz' metode, som jeg omtaler fyldigt i bogen. Efter fremkomsten af IE7 anbefaler jeg dog den her anviste metode fremfor den i bogen omtalte.

Kapitel 18

Figur 18-03
Elastisk grafisk bagrund for et sidehoved. Bliver browservinduet smallere bliver billedet også smallere.
Figur 18-04
Beskåret grafisk baggrund for et sidehoved.
Figur 18-06
Baggrundsbillede indsat i body-elementet.
Figur 18-07
Baggrundsbillede med background-attachment: fixed baggrunde under tekstelementer. Effekten er ikke synlig i Internet Explorer 6.

Kapitel 19

Eksemplet, der refereres til herunder, er komplet, og omfatter også en window.open funktion, der viser et større billede, hvis der klikkes på et småbillede. Brug browserens Vis kilde-funktion til at se kildekoden til siden i dens helhed.

Figur 19-4
En stylesheet-layoutet webside med et galleri af småbilleder.

Kapitel 21

Figur 21-1
Stylesheet formatering af formularer.

Kapitel 22

Eksempel 22-8 (figur 22-4).
Universal-stylesheet til lodretstillet CSS-menupanel med rollover-effekt.
Jeg beskriver nogle variationer over dette tema på siden Overvejelser om universal menupanel.
Eksempel 22-10 (figur 22-5).
En webside med en navigationsbjælke som hovedmenu og et menupanel som sektionsmenu.
Eksempel 22-12 (figur 22-10).
Et universalstylesheet til en vandretstillet navigationsbjælke med rollover-effekt, udelukkende ved hjælp af CSS.
Aht til nøjagtig kontrol af liniefaldet kan det være hensigtsmæssigt at give a-markøren en line-height på 100 procent (100%).
Eksempel 22-12a.
Samme som foregående, men med adskilte menupunkter. (Ikke vist i bogen).
Figur 22-13 (eksempel 22-13 og 22-14).
En navigationsbjælke formgivet som en menu af fanebladsfaner.
Figur 22-14
Fanebladsmenu med undermenuer.
Figur 22-15
Fremhævning af menupunkt, der viser aktuel side.
Figur 22-16
Markering af aktuel side
Figur 22-17
Navigationsbjælke forsynet med tastaturgenveje.
Figur 22-21 (eksempel 22-28).
Dynamisk CSS-menupanel med rollover-effekt. Microsoft behavior-egenskaben, indlæsning af .htc-fil.
Figur 22-21a
Dynamisk CSS-menupanel med rollover-effekt. JavaScript-drevet
Figur 22-22
Dynamisk CSS-menumenupanel med rollover-effekt. Højrestillet.
Figur 22-23
CSS-formateret dropdown navigationsbjælke
Figur 22-24
CSS-formateret dropdown navigationsbjælke, positionering på siden.
Figur 22-25
En grafisk, JavaScript-drevet rollover med kun to grafiske elementer.
Figur 22-26
En grafisk menu med rollover-effekt, lavet udelukkende med et stylesheet
Figur 22-27
Grafisk navigationsbjælke med rollover-effekt.

Kapitel 23

Figur 23-3
Eksempel på, hvorledes en bruger kan vælge mellem forskellige stylesheets ved at klikke på L, M, S eller Tekst

Kapitel 24

Figur 24-2
Et billede skrumper på den ene led, når browservinduet gøres smallere.
Figur 24-3 A
Drop Caps (Initialer) kun bogstaver
Figur 24-3 B
Drop Caps (Initialer) med grafisk baggrund
Figur 24-4
Listige slagskygger med CSS
Figur 24-5
CSS-kasse med runde hjørner
Figur 24-7 (Side 329)
HTML- og CSS-kode til denne figur er skamløst stjålet fra webstedet A List Apart, Sørens Madsens artikel. Kun grafikkerne er af egen tilvirkning. Jeg beklager, at jeg ikke har tydeliggjort dette i bogen.
Figur 24-10
Alene ved hjælp af CSS er det muligt at indsætte en dynamisk informationsboks, hvis indhold ændrer sig, alt efter hvilket link musen føres hen over.
Figur 24-11
Jeg henviser til min artikel om dette emne: Image Replacement.

Appendikser

Figur D-1
Brug af background-attachment:fixed, så korrekt visning opnås i såvel IE5/6 som i IE7 og andre moderne browsere.

Denne side er senest opdateret: 16. November, 2006