/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Kolonner uden brug af tables h-tags drille~
Fra : Brian Bendtsen


Dato : 22-06-06 13:32

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

 
 
Jens Gyldenkærne Cla~ (22-06-2006)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 22-06-06 13:44

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

Thomas Fagerholt (22-06-2006)
Kommentar
Fra : Thomas Fagerholt


Dato : 22-06-06 13:44

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





Brian Bendtsen (22-06-2006)
Kommentar
Fra : Brian Bendtsen


Dato : 22-06-06 14:29

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

Thomas Fagerholt (22-06-2006)
Kommentar
Fra : Thomas Fagerholt


Dato : 22-06-06 14:44

> 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



Jørgen Farum Jensen (22-06-2006)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 22-06-06 15:08

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
..

Brian Bendtsen (22-06-2006)
Kommentar
Fra : Brian Bendtsen


Dato : 22-06-06 15:12

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

Jens Gyldenkærne Cla~ (22-06-2006)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 22-06-06 14:42

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

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste