---

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

---

Jesper Brunholm wrote:
[SNIP en masse spørgsmål]

Jeg kan heller ikke lige få det til at virke. Jeg har dog en lille
kommentar til din kode: Jeg tror det er en god ide at bruge <div
id="content"> i stedet for class. Jeg har i hvert fald erfaring for at
det giver mere overskuelighed, når man har nogle enkelte <div id=""> til
sektionerne.


--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Om man bruger ID eller CLASS kommer an på hvad det skal bruges til.

ID kan kun anvendes et sted på siden så bruges typisk til
positionering da det vil være usmart at positionere flere ting samme
sted på en gang.

CLASS kan anvendes flere steder på siden så bruges typisk til ting der
har med udseende at gøre såsom at specificere samme font på flere
forskellige steder.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

On Sun, 11 Jan 2004 00:43:29 +0100, Lars Olesen <lsolesen@hotmail.com>
wrote:

>Jeg kan heller ikke lige få det til at virke. Jeg har dog en lille
>kommentar til din kode: Jeg tror det er en god ide at bruge <div
>id="content"> i stedet for class. Jeg har i hvert fald erfaring for at
>det giver mere overskuelighed, når man har nogle enkelte <div id=""> til
>sektionerne.

---

> Om man bruger ID eller CLASS kommer an på hvad det skal bruges til.

Helt enig, men han bruger dem netop sine div'er til positionering.
Derfor kommentaren :)

--
Lars
www.fodboldenslegestue.dk   www.larsolesen.dk
www.discimport.dk      www.vih.dk

---

Jens Peter Karlsen skrev:

> Om man bruger ID eller CLASS kommer an på hvad det skal bruges
> til.

Helt enig.

> ID kan kun anvendes et sted på siden

> CLASS kan anvendes flere steder på siden

Den forskel sætter nogle restriktioner på hvad man kan bruge id til
- men det giver ikke nogen egentlig grund til at anvende id i
stedet for class.

Men en praktisk forskel på id og class er den vægt css-regler
tildeles. Regler baseret på id vejer tungere end alt andet (pånær
direkte style via style-parameteren). Den forskel kan have
betydning når de samme css-filer skal deles af mange html-filer.

Se evt. oversigten over specificivitet for css-selektorer her:
<http://www.w3.org/TR/CSS21/cascade.html#specificity>
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen skrev:

[snip: id vs class til definition af positionerede div'er]

> Men en praktisk forskel på id og class er den vægt css-regler
> tildeles. Regler baseret på id vejer tungere end alt andet (pånær
> direkte style via style-parameteren). Den forskel kan have
> betydning når de samme css-filer skal deles af mange html-filer.

Vil det sige at dette ophæver 'nærhedsregelen' sådan så 'Jesper' i flg
eksempel bliver med rødt?
<head>
<style>
#roed {
color: red;
}
..blaa {
color: blue;
}
b {
color: green;
}
</style>
</head>
<body>
<p id="roed" class="blaa">
<b>Jesper</b>
</p>
</body>

> Se evt. oversigten over specificivitet for css-selektorer her:
> <http://www.w3.org/TR/CSS21/cascade.html#specificity>

Det er spændende - og lige så spændende hvordan det bliver overholdt, så
her er det lille eksperiment sat i en kode (Karin er med inline style
efter id'et):

http://garion.dk/webdesign/specificity.html

Det ser ganske regelret ud i både Mozilla 1.5 og Explorer 5.5 her hos
mig - lækkert (ja ok - nærhedsreglen var lidt lettere at følge, men den
bliver jo også kun delvis sat ud af kraft her )

mvh

Jesper Brunholm

---

Nej, i dit eksempel bliver den grøn fordi du har angivet den farve for
<B>. Hvis derimod du fjerner <b> og </b> bliver farven rød og ikke
blå.
Selvom class er sidst vinder ID på grund af højere specificitet.
Havde der derimod stået style="..." havde dette "vundet" efter reglen
om højest specificitet.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

On 11 Jan 2004 22:38:04 +0100, Jesper Brunholm
<nospam@brunholm-scharff.dk> wrote:

>Vil det sige at dette ophæver 'nærhedsregelen' sådan så 'Jesper' i flg
>eksempel bliver med rødt?

> <p id="roed" class="blaa">
> <b>Jesper</b>

---

Jens Peter Karlsen skrev:
> Nej, i dit eksempel bliver den grøn fordi du har angivet den farve for
> <B>. Hvis derimod du fjerner <b> og </b> bliver farven rød og ikke
> blå.
> Selvom class er sidst vinder ID på grund af højere specificitet.
> Havde der derimod stået style="..." havde dette "vundet" efter reglen
> om højest specificitet.


Det er fornemt at du sådan vil specificere de erfaringer man kan drage
af inline links i de to foregående posts ud.

Er der nogen der har styr på om specificiteten kun gælder inden for
samme tag (som i mit eksempel hvor #roed har højere specificitet end
..blaa), eller om man kunne forestille sig at id i en <p> også
overtrumfer en style-definition som på en eller anden måde er påført
tekst i div'en?

mvh

Jesper Brunholm

---

Jesper Brunholm skrev:

> Er der nogen der har styr på om specificiteten kun gælder
> inden for samme tag (som i mit eksempel hvor #roed har højere
> specificitet end .blaa), eller om man kunne forestille sig at
> id i en <p> også overtrumfer en style-definition som på en
> eller anden måde er påført tekst i div'en?

Jeg er ikke helt sikker på hvad du mener, men et eksempel hvor id's
højere specificivitet får effekt kan ses her:

<head>
<style type="text/css">
#roed b{
color: red;
}
..blaa {
color: blue;
}
b.speciel {
color: green;
}
</style>
</head>
<body>
<p id="roed" class="blaa">
<b class="speciel">Jesper</b>
</p>
</body>

Selv om b har klassen "speciel" (og css-definitionen på .speciel
står sidst) er det conditional-koden #roed b der vinder - og
"Jesper" står derfor med rødt.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen skrev:
> Jeg er ikke helt sikker på hvad du mener, men et eksempel hvor id's
> højere specificivitet får effekt kan ses her:
> <head>
> <style type="text/css">
> #roed b{
> color: red;
> }
> </style>

> <p id="roed" class="blaa">
> <b class="speciel">Jesper</b>
> </p>

> Selv om b har klassen "speciel" (og css-definitionen på .speciel
> står sidst) er det conditional-koden #roed b der vinder - og
> "Jesper" står derfor med rødt.

Det var det jeg mente, og så alligevel ikke. Hvis man bare skriver #roed
så er den ikke mere specifik end class=special. Når man tilføjer 'b' så
bliver den mere specifik, og så har den også netop en finger med i
spillet i samme tag (b-tagget).

Det jeg prøvede at få klarhed over var om specifikativiteten (mon det
kan hedde det på dansk? ) kan være så stærk så den virker ud over et
tag (og her er tag forstået som ikke et sæt af "<> </>", men derimod
kun "<>").

Så vidt jeg forstår bliver konklusionen at specifikativiteten kun kan
ophæve nærhedsreglen hvis den er indenfor samme tag.

mvh

Jesper Brunholm

---

Som jeg forstår dit spørgsmål vil svaret være nej.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

On 12 Jan 2004 16:45:22 +0100, Jesper Brunholm
<nospam@brunholm-scharff.dk> wrote:

>Det jeg prøvede at få klarhed over var om specifikativiteten (mon det
>kan hedde det på dansk? ) kan være så stærk så den virker ud over et
> tag (og her er tag forstået som ikke et sæt af "<> </>", men derimod
>kun "<>").