---

Hej NG.

Er der en god forklaring på at denne side giver 3 forskellige resultater i
IE6, IE7 og FF2
http://www.test.ac2670.net/test/display.htm

Jeg vil gerne undgå tabeller til layout og håbede at jeg ved at bruge
float:left kunne sikre at efterfølgende blokke blev "stablet" til højre.
I eksemplet her er det også hvad der sker med den orange blok (som har en
width) i IE6 men ikke i IE7 og FF. Her er teksten godt nok til højre for
forgående blok, mens background og border går ind over "Anden blok".

"Lyseblå blok" som ikke har nogen width, opfører sig ligesom "Orange blok" i
alle de testede browsere!

På forhånd tak.
/Søren

---

Jeg glemte lige at sige at i IE6 dækker den grønne boks alt det andet, som
om height ikke respekteres overhovedet.

---

"Søren Larsen" <sblar1@fjerndette.surfpost.dk> skrev i en meddelelse
news:4789e4a8$0$2090$edfadb0f@dtext02.news.tele.dk...
> Hej NG.
>
> Er der en god forklaring på at denne side giver 3 forskellige resultater i
> IE6, IE7 og FF2
> http://www.test.ac2670.net/test/display.htm
>
> Jeg vil gerne undgå tabeller til layout og håbede at jeg ved at bruge
> float:left kunne sikre at efterfølgende blokke blev "stablet" til højre.
> I eksemplet her er det også hvad der sker med den orange blok (som har en
> width) i IE6 men ikke i IE7 og FF. Her er teksten godt nok til højre for
> forgående blok, mens background og border går ind over "Anden blok".
>
> "Lyseblå blok" som ikke har nogen width, opfører sig ligesom "Orange blok"
> i alle de testede browsere!
>
> På forhånd tak.
> /Søren


Først - hvis du vil "stable" til højre, skal du nok bruge float:right i
stedet.

Forskellen på den orange og den lyseblå, er at den lyseblå har en bredde.
Det får IE til at behandle den anderledes (kan så ikke huske - men mener det
svarer til at give den position:relative, og det hænger sammen med den IE
specifikke hasLayout...)

Endelig, er der noget med at floatede elementer skal "cleares", ofr at
parent (det element de er indsat i), accepterer deres tilstedeværelse, og
retter sig til så det faktisk omfatter de indsatte.
Prøv evt. at indsætte en
<br style="clear:both">
i bunden af <div class="player">


Birger
-----
http://bbsorensen.dk

---

"Birger" <sdc@bbsorensen.com> skrev i en meddelelse
news:478a111b$0$90267$14726298@news.sunsite.dk...
> Først - hvis du vil "stable" til højre, skal du nok bruge float:right i
> stedet.
>
> Forskellen på den orange og den lyseblå, er at den lyseblå har en bredde.
> Det får IE til at behandle den anderledes (kan så ikke huske - men mener
> det svarer til at give den position:relative, og det hænger sammen med den
> IE specifikke hasLayout...)
>
> Endelig, er der noget med at floatede elementer skal "cleares", ofr at
> parent (det element de er indsat i), accepterer deres tilstedeværelse, og
> retter sig til så det faktisk omfatter de indsatte.
> Prøv evt. at indsætte en
> <br style="clear:both">
> i bunden af <div class="player">
>
>
> Birger
> -----
> http://bbsorensen.dk

Idéen var at starte fra venstre og stable mod højre, så float:left er det
jeg ønsker.
Bortset fra det hjalp hverken clear:both, position:realtive eller width ikke
men tak for forsøget. Det ændrer resultatet markant, men noget konsistent,
mellem browsere, har jeg ikke kunnet opnå.
Efter at læst lidt på denne artikel
http://www.satzansatz.de/cssd/onhavinglayout.html, kommer næste spørgsmål
så:
Hvad er det lige jeg opnår ved at bruge CSS i stedet for tables? De fleste
anbefaler CSS som verdens ottende vidunder, men med det her i mente kan jeg
ærlig talt ikke se at vi har vundet noget, andet end skulle sætte os ind i
en masse omveje, div. langhårede hacks og uforståelige resultater. Jeg er
dybt frustreret!

/Søren

---

"Søren Larsen" <sblar1@fjerndette.surfpost.dk> skrev i meddelelsen
news:478a2202$0$2100$edfadb0f@dtext02.news.tele.dk...

> Hvad er det lige jeg opnår ved at bruge CSS i stedet for tables? De fleste
> anbefaler CSS som verdens ottende vidunder, men med det her i mente kan
> jeg ærlig talt ikke se at vi har vundet noget, andet end skulle sætte os
> ind i en masse omveje, div. langhårede hacks og uforståelige resultater.
> Jeg er dybt frustreret!

Det føles kun sådan, indtil du får det ind på rygmarven. Jeg har også bandet
og svovlet meget over det, da det var nyt for mig.
Fordelen er dog, at det bliver lettere for dig at bryde om på layoutet
senere, fordi du kan nøjes med at rette i css-filen fremfor i 100-1000
forskellige html-filer (hvis du f.eks. vil gå fra lodret til vandret menu
eller foretage andre grundlæggende ombrydninger).

Desuden er koden også mere overskuelig på dén måde.
Jeg har i hvert fald svært ved at overskue tabellayout - og dét endnu mere
på hjemmesider, som jeg ikke selv har kodet.
Folk her inde vil dermed være mindre villige til at hjælpe mig, hvis de ser
noget totalt kaotisk tabellayout, når de kigger på min kode.

Hvad er mest overskueligt og nemmest at rette i senere?
1)
<div id="indhold">
indholdet på siden
</div>
<div id="menu">
menu
</div>
<div id="logotop">
Toppen med sidens logo osv.
</div>

eller
2)
<table>
<tr>
<td colspan="2">
Indholdet i toppen af siden med logo osv.
</td>
</tr>
<tr>
<td>
Menu
</td>
<td>
Indholdet på siden
</td>
</tr>
</table>

Ydermere giver css-layoutet mulighed for søgemaskineoptimering.
Bemærk, at jeg i det øverste eksempel har lagt menu og logo-felt nederst i
koden, selv om det måske er tiltænkt at stå først på siden.
Søgemaskinerne kommer dermed hurtigere til indholdet på min side, og det
gør, at folk måske i højere grad finder, hvad de leder efter, når de
forvilder sig ind på min hjemmeside.

---

"Philip Nunnegaard" <philip@fjerndettehitsurf.dk> skrev i en meddelelse
news:478a7713$0$2091$edfadb0f@dtext02.news.tele.dk...
> Det føles kun sådan, indtil du får det ind på rygmarven. Jeg har også
> bandet og svovlet meget over det, da det var nyt for mig.
> Fordelen er dog, at det bliver lettere for dig at bryde om på layoutet
> senere, fordi du kan nøjes med at rette i css-filen fremfor i 100-1000
> forskellige html-filer (hvis du f.eks. vil gå fra lodret til vandret menu
> eller foretage andre grundlæggende ombrydninger).
>
> Desuden er koden også mere overskuelig på dén måde.
> Jeg har i hvert fald svært ved at overskue tabellayout - og dét endnu mere
> på hjemmesider, som jeg ikke selv har kodet.
> Folk her inde vil dermed være mindre villige til at hjælpe mig, hvis de
> ser noget totalt kaotisk tabellayout, når de kigger på min kode.
>

Jeg er absolut ikke uenig med dig, og var da også, indtil det her, meget
begejstret for CSS. Men - når jeg oplever sådan noget som det her, er jeg
altså ved at rive håret ud af hovedet.
Det frustrerende ved det er den meget store forskel i de forskellige
browsere med det jeg prøver at lave her. Jeg har da i andre tilfælde
bemærket andre
småting som er til at leve med, men dette eksempel er jo helt umuligt. Det
jeg gerne ville opnå med CSS i stedet for tabeller, kan ses her
http://www.test.ac2670.net/test/hold.asp?hold=1, altså et billede til
venstre, en kolonne med et antal beskrivelser og derefter en kolonne med
data. Vel ikke noget urimeligt krav

Nogen bud på tilsvarende CSS?

/Søren

---

Den 13-01-08 22.12 skrev Søren Larsen følgende:

> Det jeg gerne ville opnå med CSS i stedet for tabeller, kan ses her
> http://www.test.ac2670.net/test/hold.asp?hold=1, altså et billede til
> venstre, en kolonne med et antal beskrivelser og derefter en kolonne med
> data. Vel ikke noget urimeligt krav

Er det:
    Navn
Natalie Årgang
Plads

osv. du vil have en css-løsning til? I så fald, glem det. Det er
tabulære data, og det er lige netop den slags tabeller er beregnet til.

--
Mvh. Kim Ludvigsen
Lær at bruge Google som lommeregner.
http://kimludvigsen.dk

---

"Kim Ludvigsen" <usenet@kimludvigsen.dk> skrev i en meddelelse
news:478a9f3d$0$2093$edfadb0f@dtext02.news.tele.dk...
> Er det:
> Navn
> Natalie Årgang
> Plads
>
> osv. du vil have en css-løsning til? I så fald, glem det. Det er tabulære
> data, og det er lige netop den slags tabeller er beregnet til.
>
> --
> Mvh. Kim Ludvigsen
> Lær at bruge Google som lommeregner.
> http://kimludvigsen.dk

Præcis. Tak for et meget konkret svar - jeg fortsætter med tabeller (i dette
tilfælde).

/Søren

---

"Søren Larsen" <sblar1@fjerndette.surfpost.dk> skrev i en meddelelse
news:478b0f1c$0$2085$edfadb0f@dtext02.news.tele.dk...
> "Kim Ludvigsen" <usenet@kimludvigsen.dk> skrev i en meddelelse
> news:478a9f3d$0$2093$edfadb0f@dtext02.news.tele.dk...
>> Er det:
>> Navn
>> Natalie Årgang
>> Plads
>>
>> osv. du vil have en css-løsning til? I så fald, glem det. Det er tabulære
>> data, og det er lige netop den slags tabeller er beregnet til.
>>
>> --
>> Mvh. Kim Ludvigsen
>> Lær at bruge Google som lommeregner.
>> http://kimludvigsen.dk
>
> Præcis. Tak for et meget konkret svar - jeg fortsætter med tabeller (i
> dette tilfælde).
>
> /Søren
>

Tabeller er beregnet til display af data.
Og jeg vil nok holde med Kim, at spillere på et hold er data, og det er
tilladt at bruge tabel til visning - og tag bare både trænere og reserverne
med også ;>)
Det er vel altid et spørgsmål om hvornår det er "tilladt"...

Jeg kunne så ikke lade være, bare for at demonstrere, at det kan altså godt
lade sig gøre :
http://test3.bbsorensen.dk
er det samme med css - og den ser ud til at komme korrekt ud i FF, IE7 og
Opera.


Birger
-----
http://bbsorensen.dk

---

"Birger" <sdc@bbsorensen.com> skrev i en meddelelse
news:478b1e63$0$90265$14726298@news.sunsite.dk...
> Tabeller er beregnet til display af data.
> Og jeg vil nok holde med Kim, at spillere på et hold er data, og det er
> tilladt at bruge tabel til visning - og tag bare både trænere og
> reserverne med også ;>)
> Det er vel altid et spørgsmål om hvornår det er "tilladt"...
>
> Jeg kunne så ikke lade være, bare for at demonstrere, at det kan altså
> godt lade sig gøre :
> http://test3.bbsorensen.dk
> er det samme med css - og den ser ud til at komme korrekt ud i FF, IE7 og
> Opera.
>
>
> Birger
> -----
> http://bbsorensen.dk

Stærkt Birger. Hvad var tricket? Jeg kan godt se at det selvfølgelig er mere
enkelt at gøre det række efter række og så bare stable felterne efter
hinanden...
eller er det .brall med clear:both der gør det?

/Søren

---

"Søren Larsen" <sblar1@fjerndette.surfpost.dk> skrev i en meddelelse
news:478b9e18$0$2092$edfadb0f@dtext02.news.tele.dk...
>
> "Birger" <sdc@bbsorensen.com> skrev i en meddelelse
> news:478b1e63$0$90265$14726298@news.sunsite.dk...
>> Tabeller er beregnet til display af data.
>> Og jeg vil nok holde med Kim, at spillere på et hold er data, og det er
>> tilladt at bruge tabel til visning - og tag bare både trænere og
>> reserverne med også ;>)
>> Det er vel altid et spørgsmål om hvornår det er "tilladt"...
>>
>> Jeg kunne så ikke lade være, bare for at demonstrere, at det kan altså
>> godt lade sig gøre :
>> http://test3.bbsorensen.dk
>> er det samme med css - og den ser ud til at komme korrekt ud i FF, IE7 og
>> Opera.
>>
>>
>> Birger
>> -----
>> http://bbsorensen.dk
>
> Stærkt Birger. Hvad var tricket? Jeg kan godt se at det selvfølgelig er
> mere enkelt at gøre det række efter række og så bare stable felterne efter
> hinanden...
> eller er det .brall med clear:both der gør det?
>
> /Søren
>

clar:both er nødvendig, for at få den yderste div til at vide, at de øvrige
er inde i den.
Der er ikke nogen speciel logik i det - bortset fra, at det er når der er
klar sigt til begge sider, at ingenting længere kan floate. Man kunne
forvente, at browseren selv kunne finde ud af det - jeg mener IE7 kan, men
FF kan ikke - og det kan de altså ikke generelt. Hvis man f.eks. har ramme
om tingene, vil man kunne se, at det yderste element (det som de floatede
elementer indsættes i), ikke omfatter de elementer der reelt er inde i det,
hvis man ikke clearer.
Hvis man har en opstilling, hvor man også har en "footer" - hvis du havde
haft et felt på tværs af alle de andre, nederst i tabellen - kan man i den
sætte clear:both, i stedet for linieskiftet. Det er en ofte anvendt teknik,
når man designer med spalter.
(prøv evt selv at lege med koden.)

Der er en div der indeholder hele spillerinformationen.
Den indeholder billedet, og en yderligere div der er floated venstre, der
indeholder tekstlinierne - hver tekst er opdelt i to div, der begge er
floated venstre. Derefter et linieskift, der også clearer til begge sider.
Dette er nødvendigt, for evt. rammer. Man kan godt bruge span i stedet for,
men kan så (så vidt jeg ved) ikke umiddelbart sætte bredde på - hvilket jo
er det der skaber ligheden med tabellen.
Eksemplet har masser af rammer, og de er selvfølgelig ikke nødvendige - det
var bare for illustrationen - det gør det lidt nemmere at se hvad der er
hvad.

Du kan godt gøre, som du forsøgte i første omgang - har lige lagt en spiller
mere på mit eksempel, blot for at illustrere.
Problemet med dit forsøg var, at det fylder mere end sidebredden (din orange
boks er 70% af bredden), og derfor falder tingene ned, og lægger sig til
venstre margin. Prøv at gøre den orange boks smallere...
De vil også falde ned i mit eksempel, hvis du gør vinduet smalt nok.
Forskellen på mit og dit er så kun, at du forsøger at lægge alle spalterne i
een div - jeg bygger det op som to spalter, hvor den ene består af to
spalter.. Men at have dem i kun een skal også kunne lade sig gøre.


Birger
-----
http://bbsorensen.dk

---

"Søren Larsen" <sblar1@fjerndette.surfpost.dk> skrev i en meddelelse
news:478a2202$0$2100$edfadb0f@dtext02.news.tele.dk...
>
> "Birger" <sdc@bbsorensen.com> skrev i en meddelelse
> news:478a111b$0$90267$14726298@news.sunsite.dk...
>> Først - hvis du vil "stable" til højre, skal du nok bruge float:right i
>> stedet.
>>
>> Forskellen på den orange og den lyseblå, er at den lyseblå har en bredde.
>> Det får IE til at behandle den anderledes (kan så ikke huske - men mener
>> det svarer til at give den position:relative, og det hænger sammen med
>> den IE specifikke hasLayout...)
>>
>> Endelig, er der noget med at floatede elementer skal "cleares", ofr at
>> parent (det element de er indsat i), accepterer deres tilstedeværelse, og
>> retter sig til så det faktisk omfatter de indsatte.
>> Prøv evt. at indsætte en
>> <br style="clear:both">
>> i bunden af <div class="player">
>>
>>
>> Birger
>> -----
>> http://bbsorensen.dk
>
> Idéen var at starte fra venstre og stable mod højre, så float:left er det
> jeg ønsker.
> Bortset fra det hjalp hverken clear:both, position:realtive eller width
> ikke men tak for forsøget. Det ændrer resultatet markant, men noget
> konsistent, mellem browsere, har jeg ikke kunnet opnå.
> Efter at læst lidt på denne artikel
> http://www.satzansatz.de/cssd/onhavinglayout.html, kommer næste spørgsmål
> så:
> Hvad er det lige jeg opnår ved at bruge CSS i stedet for tables? De fleste
> anbefaler CSS som verdens ottende vidunder, men med det her i mente kan
> jeg ærlig talt ikke se at vi har vundet noget, andet end skulle sætte os
> ind i en masse omveje, div. langhårede hacks og uforståelige resultater.
> Jeg er dybt frustreret!
>
> /Søren
>


Der er mange gode grunde til at bruge css i stedet for noget der er beregnet
til noget andet.
Og al begyndelse er svær - al tilvending tager tid.

Dit layout... jeg ser på det i IE 7.
De tre første blokke lægger sig rigtigt til venstre, med de margins, padding
rammer og farver du beder dem om.
Den orange blok, gør faktisk også rigtigt. Den har en bredde på 70%, og -
uden at regne på det - ser det ud somom det ikke lade sig gøre at den er til
højre for alle de tre forgående, på min skærm (1280x1024), derfor lægger den
sig ned under 3. hvor der nogengange er plads til den.
Gør du skærmen smallere, smutter den helt ned under og står helt til venstre
(omkring 740 pixels).
Den blå blok clearer both, og stiller sig derfor hvor der er frit til begge
sider - altså under det alt sammen.

Så bortset fra, at din ydersted blok - den grønne baggrund med rammen - ikke
omslutter alle elementer inde i den, fordi der ikke cleares, opfører det
sig, temmelig præcist som du beder om.


Birger
-----
http://bbsorensen.dk

---

"Birger" <sdc@bbsorensen.com> skrev i en meddelelse
news:478a7d21$0$90263$14726298@news.sunsite.dk...
>
> Der er mange gode grunde til at bruge css i stedet for noget der er
> beregnet til noget andet.
> Og al begyndelse er svær - al tilvending tager tid.
>
> Dit layout... jeg ser på det i IE 7.
> De tre første blokke lægger sig rigtigt til venstre, med de margins,
> padding rammer og farver du beder dem om.
> Den orange blok, gør faktisk også rigtigt. Den har en bredde på 70%, og -
> uden at regne på det - ser det ud somom det ikke lade sig gøre at den er
> til højre for alle de tre forgående, på min skærm (1280x1024), derfor
> lægger den sig ned under 3. hvor der nogengange er plads til den.
> Gør du skærmen smallere, smutter den helt ned under og står helt til
> venstre (omkring 740 pixels).
> Den blå blok clearer both, og stiller sig derfor hvor der er frit til
> begge sider - altså under det alt sammen.
>
> Så bortset fra, at din ydersted blok - den grønne baggrund med rammen -
> ikke omslutter alle elementer inde i den, fordi der ikke cleares, opfører
> det sig, temmelig præcist som du beder om.
>
>
> Birger
> -----
> http://bbsorensen.dk

Hej Birger.

Tilvendingen til CSS var godt i gang og jeg var faktisk rimeligt begejstret
indtil det her
Det er muligt at tingende opfører sig som beskrevet i een browser, min
frustration opstår når jeg så store forskelle mellem de forskellige
browsere.
Jeg var godt klar over at IE <7 havde visse tilbøjeligheder, men det er
første gang jeg ser så stor forskel på IE7 og FF.
Jeg takker meget for den tid i bruger på at analysere det jeg har lavet og
jeg er ked af at desværre ikke hjælper så meget.

/Søren

---

Søren Larsen wrote:
> Hej NG.
>
> Er der en god forklaring på at denne side giver 3 forskellige
> resultater i IE6, IE7 og FF2
> http://www.test.ac2670.net/test/display.htm

Det er uforudsigeligt, hvilken konsekvens det har i forskellige browsere,
men du mangler denne kodelinje mellem din DocType og <head> :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk

---

1000 tak for alle de gode svar som jeg vil studere nærmere og bruge som
reference når jeg forhåbentlig snart får tid til at lave det jeg gerne ville
med "tabellen".

/Søren