---

Som så mange andre forsøger jeg at redesigne et website ved brug af
CSS fremfor de gode gamle tabeller. Og det er bestemt ikke let!

Designmæssigt skal jeg lave noget i retning af
http://www.glish.com/css/7.asp, altså et layout med en bjælke i toppen
i fuld browserbredde og tre kolonner nedenunder.

Men derudover vil jeg gerne have en bjælke i bunden af siden, dvs.
efter de tre kolonner:

XXXXXXXXX <- topbjælæe
XX XXX XX <- tre kolonner
XX XXX XX
XX XXX XX
XXX
XXXXXXXXX <- bundbjælke

I princippet svarer det til den løsning, der er brugt på
http://www.webdesign101.dk/css/csslayout/bluerobot3.php eller på
http://www.positioniseverything.net/thr.col.stretch.html, men begge
løsninger har et problem:

Placeringen af bundbjælken er afhængig af, at centerkolonnen som
minimum er samme størrelse eller længere end de andre to kolonner.
Hvis centerkolonnen kun indeholder et par linier, så hænger
bundbjælken oppe under centerkolonnen, og de to andre kolonner vil
overlappe bundbjælken.

Jeg er derfor på udkig efter en løsning på det problem - en løsning,
er vel at mærke skal kunne fungere både på Mac og PC, og som
selvfølgelig ikke involvere tabeller.

Anyone?

--
Jens Tønnesen - http://www.pressefoto.dk

---

Jens Tønnesen skrev:

> Placeringen af bundbjælken er afhængig af, at centerkolonnen som
> minimum er samme størrelse eller længere end de andre to kolonner.
> Hvis centerkolonnen kun indeholder et par linier, så hænger
> bundbjælken oppe under centerkolonnen, og de to andre kolonner vil
> overlappe bundbjælken.

..bundting {
clear: both;
}

burde gøre det?

--
Hans

---

"H. P. Holm" <hpholm@adresse.invalid> skrev i
dk.edb.internet.webdesign.html:

>Jens Tønnesen skrev:

>> Placeringen af bundbjælken er afhængig af, at centerkolonnen som
>> minimum er samme størrelse eller længere end de andre to kolonner.
>> Hvis centerkolonnen kun indeholder et par linier, så hænger
>> bundbjælken oppe under centerkolonnen, og de to andre kolonner vil
>> overlappe bundbjælken.

>.bundting {
>clear: both;
>}

>burde gøre det?

Nej, desværre. Hvis de to yder-kolonner er længere end
midter-kolonnen, så vil de stadig overlappe bundbjælken.

--
Jens Tønnesen - http://www.pressefoto.dk

---

"Jens" == Jens Tønnesen <usenet@pressefoto.invalid> writes:

...

> Placeringen af bundbjælken er afhængig af, at centerkolonnen som
> minimum er samme størrelse eller længere end de andre to kolonner.
> Hvis centerkolonnen kun indeholder et par linier, så hænger
> bundbjælken oppe under centerkolonnen, og de to andre kolonner vil
> overlappe bundbjælken.

Da de to side kolonner er placeret med position: absolute, er der
ingen check på om de overlapper med noget - det kunne jo være at det
var hensigten.

> Jeg er derfor på udkig efter en løsning på det problem - en løsning,
> er vel at mærke skal kunne fungere både på Mac og PC, og som
> selvfølgelig ikke involvere tabeller.

Prøv at floate alle tre kolonner, og brug så clear: both på den
nederste bjælke. Alternativet er at sikre at den midterste kolonne
altid er højest.

--
/Wegge <http://outside.bakkelygaard.dk/~wegge/>

---

Jens Tønnesen <usenet@pressefoto.invalid> skrev i
dk.edb.internet.webdesign.html:

>Hvis centerkolonnen kun indeholder et par linier, så hænger
>bundbjælken oppe under centerkolonnen, og de to andre kolonner vil
>overlappe bundbjælken.

Det lykkedes mig til sidst at finde en løsning på
positioneverything.net:
http://www.positioniseverything.net/ordered-floats.html

Og som flere i gruppen var inde på, så var det ganske rigtigt lidt
clear: both, der skulle til.

--
Jens Tønnesen - http://www.pressefoto.dk