---

Hej NG.

Jeg sidder og bryder min nød med en udfording i CSS.

Et billede der illustrerer min intention:
<url: http://img27.imageshack.us/img27/6132/exampleu.gif>

#container har - eksempelvis - disse værdier:
#container
{
   width: 800px;
   margin: 0px auto 0px auto;
   padding: 0px 50px 0px 50px;
   height: 400px;
}

mine div.elm elementer ligger så hen i det uvisse.

Jeg ønsker at de to ydre elementer placerer sig op ad kanten af
#container (i det her tilfælde ved padding-værdien) og den i midten
placerer sig centreret i forhold til de to yderste.

Ingen problem som sådan at stille ovenstående op, såfremt det ikke skal
være dynamisk.

Men jeg kunne godt tænke mig hvis det var muligt for mig at smide alle
de div.elm ind jeg ville (grænsen nås ved breddens plads naturligvis)
uden at skulle lave adskillige CSS klasser.

Spørgsmålet er om det overhovedet er muligt.

Jeg håber jeg fik forklaret mig godt nok.

--
Dan Storm - storm at err0r dot dk / http://err0r.dk

People who claim they don't let little things bother
them have never slept in a room with a single mosquito.

---

Dan Storm sendte dette med sin computer:
> Hej NG.
>
> Jeg sidder og bryder min nød med en udfording i CSS.
>
> Et billede der illustrerer min intention:
> <url: http://img27.imageshack.us/img27/6132/exampleu.gif>
>
> #container har - eksempelvis - disse værdier:
> #container
> {
>    width: 800px;
>    margin: 0px auto 0px auto;
>    padding: 0px 50px 0px 50px;
>    height: 400px;
> }
>
> mine div.elm elementer ligger så hen i det uvisse.
>
> Jeg ønsker at de to ydre elementer placerer sig op ad kanten af #container (i
> det her tilfælde ved padding-værdien) og den i midten placerer sig centreret
> i forhold til de to yderste.
>
> Ingen problem som sådan at stille ovenstående op, såfremt det ikke skal være
> dynamisk.
>
> Men jeg kunne godt tænke mig hvis det var muligt for mig at smide alle de
> div.elm ind jeg ville (grænsen nås ved breddens plads naturligvis) uden at
> skulle lave adskillige CSS klasser.
>
> Spørgsmålet er om det overhovedet er muligt.
>
> Jeg håber jeg fik forklaret mig godt nok.

I CSS for det element du vil have til venstre, skal du angive float :
left;
Elementet til højre skal hedde float: right;
Elementet i midten skal ikke have float - det skal vist helst være et
inline element - og i #container tilføjer du text-align : center;

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen skrev:
> I CSS for det element du vil have til venstre, skal du angive float : left;
> Elementet til højre skal hedde float: right;
> Elementet i midten skal ikke have float - det skal vist helst være et
> inline element - og i #container tilføjer du text-align : center;

Så jeg kan i princippet ikke komme ud over at jeg skal have mindst tre
forskellige klasser for mine tre elementer... Det var såmænd også bare
det jeg skulle have bekræftet.

--
Dan Storm - storm at err0r dot dk / http://err0r.dk

People who claim they don't let little things bother
them have never slept in a room with a single mosquito.

---

Birger Sørensen wrote:

> I CSS for det element du vil have til venstre, skal du angive float :
> left;
> Elementet til højre skal hedde float: right;
> Elementet i midten skal ikke have float - det skal vist helst være et
> inline element - og i #container tilføjer du text-align : center;

Elementet i midten skal ikke være inline. Det skal have margin:auto.

Alle tre elementer skal selvfølgelig have defineret en bredde.

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

---

Erik Ginnerskov frembragte:
> Birger Sørensen wrote:
>
>> I CSS for det element du vil have til venstre, skal du angive float :
>> left;
>> Elementet til højre skal hedde float: right;
>> Elementet i midten skal ikke have float - det skal vist helst være et
>> inline element - og i #container tilføjer du text-align : center;
>
> Elementet i midten skal ikke være inline. Det skal have margin:auto.
>
> Alle tre elementer skal selvfølgelig have defineret en bredde.

Også hvis der er mere end eet element "i midten"?

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen wrote:
>> Elementet i midten skal ikke være inline. Det skal have margin:auto.

> Også hvis der er mere end eet element "i midten"?

Det skal stadig være display:block med defineret bredde, men når vi bevæger
os ud i 4-spaltet design bliver det mere kompliceret.

Vi skal nok gøre det på den måde, at højre spalte indsættes først og med
float:right, hvorefter spalte 1, 2 og 3 indsættes med float:left. Beregning
af mellemrummene, der må skulle defineres som margin-left på spalte 2 og 3,
bliver noget af et regnestykke.

Jeg vil tro, vi så skal have fat i noget js, der tjekker den til rådighed
værende plads, fratrækker spalternes pladsforbrug og fordeler resten
ligeligt i spaltemellemrummene. Måske Jørgen har en anden løsning?

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

---

Erik Ginnerskov udtrykte præcist:
> Birger Sørensen wrote:
>>> Elementet i midten skal ikke være inline. Det skal have margin:auto.
>
>> Også hvis der er mere end eet element "i midten"?
>
> Det skal stadig være display:block med defineret bredde, men når vi bevæger
> os ud i 4-spaltet design bliver det mere kompliceret.
>
> Vi skal nok gøre det på den måde, at højre spalte indsættes først og med
> float:right, hvorefter spalte 1, 2 og 3 indsættes med float:left. Beregning
> af mellemrummene, der må skulle defineres som margin-left på spalte 2 og 3,
> bliver noget af et regnestykke.
>
> Jeg vil tro, vi så skal have fat i noget js, der tjekker den til rådighed
> værende plads, fratrækker spalternes pladsforbrug og fordeler resten ligeligt
> i spaltemellemrummene. Måske Jørgen har en anden løsning?

Uden at have testet, mener jeg at elementer i midten vil flyde rigtigt,
hvis de er inline - og hvis der er plads til dem, selvfølgelig.

Det kan lade sig gøre at foretage beregningen i js, og det behøver ikke
være så indviklet, som du antyder B-)
Det kan også gøres serverside, hvis man på forhånd ved, hvor meget
plads der er til rådighed.

Spørgeren var vist på udkig efter en måde at bruge samme css på alle
elementer.
Men det kan jeg ikke se kan gøres.


Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk