På H.C. Andersen Centret (
www.andersen.sdu.dk) har jeg fået den bragende
idé at selve sideindholdet skal op øverst i koden (dog efter sidehoved),
bla. af hensyn til
folk med ikke-visuelle browsere (nå - skulle Google synes om resultatet
så gør det jo heller ikke noget
. Idéen har fået meget god
modtagelse, så jeg arbejder videre med sagen.
Jeg har derudover tænkt mig at skrive en lille artikel om layout med div
og css, med forskellige opsætningsmuligheder og simple eksempler, så
hvis det er ok med jer andre går jeg grundigt til værks i mit spørgsmål her.
Priotiteterne ved HCA-layoutet er: (tostjernede er ufravigelige)
1** Flydende sidelængde (ingen div med scroll og fast højde)
2** Fast menubredde i px (venstrespalte)
3** Selv om menuspalten er længere end indholdsspalten må den ikke ramle
ind i sidefoden, og vice-versa.
4** Skalérbar indholdsspalte (højrespalte)
5* Sidefod nederst, i fuld bredde
6* Indholdet kommer først i koden
1-6 skal helst sættes opfyldes med et layout. Vi har det næsten med
nuværende layout - indholdet kommer bare ikke først! (eksempel:
www.andersen.sdu.dk)
Vi kan sagtens få indholdet først med en position:absolute-baseret
opsætning, men så kan _jeg_ ikke få sidefoden ned på plads så hverken
menuspalte eller indholdsspalte kolliderer med den (uden at den skal
ligge i bunden af indholdsspalten, og således ikke nå hele vejen tværs
over) (eksempel <
http://www.garion.dk/webdesign/divpos/absolute.html>).
Vi kan også let få indholdet først, menuen derefter og endelig sidefoden
sidst, med en float-baseret opsætning, eksempel
<
http://www.garion.dk/webdesign/divpos/index.html>.
Problemet her bliver at menuspalte-div'en ikke kan være fast defineret i
px, den bliver nødt til at være defineret i %, da den bare skal udfylde
resten af bredden efter den %-definerede indholdsdiv. En nødløsning
kunne være at lave skalérbar venstrespalte, og så højrestille en
px-bredde-defineret div med menuen inden i denne. Det er muligt, men det
er en nødløsning
Så læste jeg at position:relative-blokke kommer i normal
tekst-rækkefølge, men at man inden i position-relative blokken kan
forskyde elementer. Jeg tænkte at det kunne jeg bruge til at lave 3
div'er efter hinanden, Sidehoved - Indhold+menu, og Sidefod. I den
midterste - Indhold+menu - kunne kan så med absolute lægge de to på
plads ved siden af hinanden. Det virker ikke - de kommer på plads, men
sidefoden bliver ikke nede hvor den skal. Jeg kan ikke lægge de to i
midten på plads med relative, for så skulle jeg vide hvor lang
indholdsspalten er, for at kunne lægge menuspalten op på plads - og det
ved jeg ikke. Eksempel:
<
http://www.garion.dk/webdesign/divpos/relative.html>
Mit store spørgsmål er altså: har jeg overset nogle muligheder så
position:absolute- eller float-scenariet kan bringes det sidste stykke
vej til den perfekte løsning (til det her formål)?
(Kildemateriale:
http://html-faq.dk/2003.asp Placering og design med div og css
http://www.positioniseverything.net/
http://www.positioniseverything.net/articles/flow-pos.html
http://www.positioniseverything.net/ordered-floats.html
http://www.html.dk/artikler/00043/ Drop tabeller til layout
http://www.html.dk/artikler/00006/ Brug af css til sideopbygning
)
mvh
Jesper Brunholm