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