CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

ichtysdk Nybegynder

22. januar 2004 - 21:17 Der er 31 kommentarer og
1 løsning

Automatisk udvidelse af en <div>

Jeg har lavet min side med css, og de kasser som indeholder siden dele er defineret med <div> kommandoen...

Jeg har en "main" <div>, som har en ramme og en baggrund, men som ikke har noget indhold, udover en mængde andre <div> bokse... Problemet er at jeg vil have min "main" <div> til at udvide sig nedad, når der kommer mere fyld i de andre bokse...

Kan det lade sig gøre?

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 21:20 #1

med <div style="height: 400px"></div> ??

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 21:21 #2

eller - hvis den har main som id -

#main {
height: 400px;
}

i din style definition..

ps: 400 er bare grebet ud af luften - bare indsæt en værdi, som er passende...

Synes godt om

lordhead Nybegynder

22. januar 2004 - 21:30 #3

Kan denne artikel evt. bruges? http://www.alistapart.com/articles/fauxcolumns/

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 21:32 #4

Ja ja... det er jeg klar over man kan :)

Det kan jeg ikke bruge til ret meget, da siden ikke har en fast højde... Højden skal bare tilpasse sig efter hvor meget indhold der er...

Synes godt om

lordhead Nybegynder

22. januar 2004 - 21:36 #5

Hvem var den kommentar til?

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 21:36 #6

Det skulle den da også meget gerne gøre, hvis de div's som ligger indeni også har højde :-)

Har du evt. noget kode / site, hvor man kan se det...

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 21:45 #7

Du kan kigge på http://www.ichtys.dk/test/v2/index.php - Den sorte streg over billedet er min "main" <div>, men ideen med den var jo at den skulle danne baggrund bag den andre bokse...

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 21:49 #8

>Hvem var den kommentar til?

Den var til bearhugx!

Jeg har lige læst den artikel du (lordhead) anbefalede, og det er da ganske smart, men kan ikke lige se hvordan jeg kan bruge det... Det skal jo ikke fylde hele side-højden.

I kan evt. se mit nuværende layout, for at få en idé om hvordan jeg vil ha det :)

http://www.ichtys.dk

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 21:58 #9

Ahh ... lige hvad jeg frygtede ...

Hvis du har absolut-positionerede elementer, vil disse blive taget ud af det pågældende lag - og derfor ikke længere være en del af det flow... Det er samtlige af de "divs" som er inden i main-div'en -- Derfor vil den ikke vokse - fordi der ikke bliver renderet noget inden i den!

I dette tilfælde skal du ikke positionere alle disse menuer osv absolut - de skal komme som en del flowet - således at de kan "skubbe" bunden af main-div'en nedad...

Synes godt om

lordhead Nybegynder

22. januar 2004 - 22:02 #10

Jeg ville også foretrække position:relative

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 22:03 #11

Skal jeg så positionere dem som relative eller hvordan? Kan ikke rigtigt huske det der med positionerne mere... pyyh :)

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 22:06 #12

bare fjern position settingen - så vil det som default blive positioneret, hvor det skal i flowet...

position-relative bruges, hvis man vil positionere i nyt lag uden for flowet, men relativt til et element I flowet (således som jeg har forstået det-- men har ikke meget erfaring med position:relative;

Synes godt om

lordhead Nybegynder

22. januar 2004 - 22:10 #13

Relative er meget ens med hvis man ikke definere en position. Ihvertfald hvis man vælger at putte indholdet i en container!

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 22:19 #14

Hmm... prøv at se hvad der sker når jeg fjerner positions settingen... http://www.ichtys.dk/test/v2/

Det virker da i det mindste med baggrunden, men nu ligger det hele jo bare efter hinanden nedad! Sådan skal mit design ikke se ud - hehe :)

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 22:22 #15

Nej - du skal have noget ud i venstre side --- så derfor fører du det ind i en div for sig selv - og sætter det "float:left;" :-)

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 22:25 #16

hurtigt eksempel:

<body>
<div id="header"> her er din header</div>
<div id="left-bar">
<div id="menu"> ....</div>
<div id="anden-boks">....</div>
</div>
<div id="contents">
hjdshgkshdflhgskhld
</div>
<div id="footer"> ....</div>
</body>

#header {
}
#left-bar {
float: left;
width: 150px;
}
#contents {
margin-left: 150px; /* IE HACK */
}

osv

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 22:38 #17

Hmm... Jeg fatter ikke rigtigt noget... synes jeg har gjort som du skriver, men det virker bare slet ikke??

Gider du kigge på min css, og min kode?

http://www.ichtys.dk/test/v2/index.php
http://www.ichtys.dk/css/test.css

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 22:47 #18

Kan jeg ikke lige få dig til at indrykke din kode - den er sgu svær at overskue...

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 22:48 #19

jeg kunne også bare lave en skrabet version, bare så det er nemt at se hvordan divs'ne er sat sammen... prøver lige at fikse noget :)

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 22:49 #20

evt. lige lave

.left-bar
{
width:110px;
float:left;
background-color: red;
}

så jeg kan se, hvor den slutter henne...

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 22:53 #21

ok :-)

ellers kan jeg lige lave en hurtig skabelon også ....

PS: det er altid god "karma" at lave sådanne layout-mæssige justeringer _inden_ man begynder at hælde en masse data ind :-))

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 22:57 #22

Ja, ved det godt... men jeg skulle jo BARE LIGE justere noget :)

Tror faktisk at jeg har fundet ud af hvad jeg havde lavet forkert... manglede en </div> et sted... tag en kigger på http://www.ichtys.dk/test/v2 nu

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 23:00 #23

he he -- så virker noget af det --- tror bare at din content (main) er for bred til at din højrestillede box kan være der...

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 23:05 #24

Forresten - -hvis du vil have den højre boks op ved siden af starten af dit main-content, så skal den defineres _FØR_ main indholdet

dvs.
<div id="left"> ... </div>
<div id="right"> ... </div>
<div id="main"> ... </div>

ellers vil den først blive betragtet i flowet _efter_ main er blevet skrevet....

--- kom jeg lige i tanker om :-)

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 23:10 #25

Hmm... det har du ret i, men nu bliver main jo skubbet ned? Se selv :)

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 23:11 #26

har lige set det...

giv mige lige to sek...

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 23:19 #27

Hmmm ... underligt...

tror det har noget med dine widths at gøre...

prøv at kopiere indholdet her ind i en fil, så kan du se, at det altså kan lade sig gøre :-)

<html>
<head>
<style type="text/css">
#content {
background-color: red;
}
#left_float {
background-color: blue;
float: left;
width: 150px;
}
#right_float {
background-color: green;
float: right;
width: 150px;
}
</style>
</head>
<body>
<div id="left_float">...</div>
<div id="right_float">xxx</div>
<div id="content">main</div>
</body>
</html>

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 23:25 #28

Jaaa :) - Nu virker det - tror det var fordi jeg havde sat en stor left-margin på den boks til højre, istedet for at sætte den til float:right :)

Tusind tak for hjælpen... nu har jeg da lært lidt mere om hvordan css virker... tror jeg :)

Kan du ikke lige svare, så jeg kan give dig nogle point?

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 23:26 #29

svar :-=)

Synes godt om

ichtysdk Nybegynder

22. januar 2004 - 23:29 #30

Så er der lukket...

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 23:33 #31

he he - men dit main er nu for bredt igen :-)

Synes godt om

bearhugx Nybegynder

22. januar 2004 - 23:34 #32

forresten : takker for points ;-)

loadhead -- interessant artikel på ALA ;-)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS