---

Hej

Jeg forsøger at lave 3 kolonner uden brug af tables ved at bruge
<span>-tags. Bruger jeg <h>-tags inden for mine <span>-tags bliver det
til rækker.

Min kode:

<div style="width: 640px;" class="box">
<span style="width: 33%; vertical-align: top; display:
block;"><h6>menu item 1</h6><p>Lorem ipsum...</span>
<span style="width: 33%; vertical-align: top; display:
block;"><h5>menu item 2</h5><p>Lorem ipsum...</span>
<span style="width: 33%; vertical-align: top; display:
block;"><h4>menu item 3</h4><p>Lorem ipsum...</span>
</div>

/Brian Bendtsen

---

Brian Bendtsen skrev:

> <span style="width: 33%; vertical-align: top; display:
> block;">

Hvad er formålet med at bruge <span style="...display: block;">?
Det svarer fuldstændig til en div.

Hvis du skal have tre kolonner skal du bruge float eller
positionering - fx:

<div id="blok1"></div>
<div id="blok2"></div>
<div id="blok3"></div>


#blok1, #blok2{ float: left; width: 33%; }
--
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

---

Brug div'er og float:

<div style="width: 640px;" class="box">
<div style="width: 33%; vertical-align: top; float:left;"><h6>menu item
1</h6><p>Lorem ipsum...</div>
<div style="width: 33%; vertical-align: top; float:left;"><h5>menu item
2</h5><p>Lorem ipsum...</div>
<div style="width: 33%; vertical-align: top; float:left;"><h4>menu item
3</h4><p>Lorem ipsum...</div>
</div>

Mvh
Thomas Fagerholt
---------------------------------------------------------
www.profilEdit.dk - CMS med css-design og valid xhtml

---

Thomas Fagerholt wrote:
> Brug div'er og float:
>
> <div style="width: 640px;" class="box">
> <div style="width: 33%; vertical-align: top; float:left;"><h6>menu item
> 1</h6><p>Lorem ipsum...</div>
> <div style="width: 33%; vertical-align: top; float:left;"><h5>menu item
> 2</h5><p>Lorem ipsum...</div>
> <div style="width: 33%; vertical-align: top; float:left;"><h4>menu item
> 3</h4><p>Lorem ipsum...</div>
> </div>
>
> Mvh
> Thomas Fagerholt
> ---------------------------------------------------------
> www.profilEdit.dk - CMS med css-design og valid xhtml
>
>
>
>
ok, men nu har jeg prøvet og sætte margin på da jeg vil have lidt luft i
mellem:

..box #blok1, .box #blok2, .box #blok3 {float: left; width: 33%;margin: 2px;}

Dette resulterer i at den sidste boks flyttes under de andre.

/Brian

---

> ok, men nu har jeg prøvet og sætte margin på da jeg vil have lidt luft i
> mellem:
>
> .box #blok1, .box #blok2, .box #blok3 {float: left; width: 33%;margin:
> 2px;}
>
> Dette resulterer i at den sidste boks flyttes under de andre.
>

Det er jo klart, da summen af bredderne er større end den bredde den ydre
div har.
Margin lægger sig på ydersiden. Hvis du ændre bredden til at være i pixels
kan du lettere finde den rigtige værdi.

/Thomas Fagerholt

---

Thomas Fagerholt wrote:
>>ok, men nu har jeg prøvet og sætte margin på da jeg vil have lidt luft i
>>mellem:
>>
>>.box #blok1, .box #blok2, .box #blok3 {float: left; width: 33%;margin:
>>2px;}
>>
>>Dette resulterer i at den sidste boks flyttes under de andre.
>>
>
>
> Det er jo klart, da summen af bredderne er større end den bredde den ydre
> div har.
> Margin lægger sig på ydersiden. Hvis du ændre bredden til at være i pixels
> kan du lettere finde den rigtige værdi.

Eller margin til at være i procent.
+ husk ie's dobbelt-margin float bug. Giv dine
bokse display-egenskaben display:inline;


--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Thomas Fagerholt wrote:
>>ok, men nu har jeg prøvet og sætte margin på da jeg vil have lidt luft i
>>mellem:
>>
>>.box #blok1, .box #blok2, .box #blok3 {float: left; width: 33%;margin:
>>2px;}
>>
>>Dette resulterer i at den sidste boks flyttes under de andre.
>>
>
>
> Det er jo klart, da summen af bredderne er større end den bredde den ydre
> div har.
> Margin lægger sig på ydersiden. Hvis du ændre bredden til at være i pixels
> kan du lettere finde den rigtige værdi.
>
> /Thomas Fagerholt
>
>
Klart klart, er ikke lige vandt til at bruge float, men det er ved at
sive ind.

Tak for jeres hjælp

/Brian

---

Brian Bendtsen skrev:

> ok, men nu har jeg prøvet og sætte margin på da jeg vil have
> lidt luft i mellem:
>
> .box #blok1, .box #blok2, .box #blok3 {float: left; width:
> 33%;margin: 2px;}
>
> Dette resulterer i at den sidste boks flyttes under de andre.

Ikke så mærkeligt. Du har 640px til rådighed. De 99% (3*33) -
svarende til ca 634 går til boksene. Så bruger du 2 * 2px til
margen på hver boks (2px i hver side) - det bliver i alt 12px.
Dermed har du brugt mere plads end du har, og med en float betyder
det at den skubbes ned under de foregående elementer.

Du kan få luft "indad" ved at bruge padding i stedet for margen.
--
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