Höjdanpassnignsbara div:ar?

7 svar · 267 visningar · startad av sabbacus 19 okt. 2002

sabbacusMedlem sedan juli 2002630 inlägg

Trådstart19 okt. 2002 18:26#1

Tjaba. Går det att få en DIV att anpassa sig på höjden på samma sätt som en <td> gör?

Jag har gjort en div såhär:

div.innerLeft{
padding: 3px;
margin: 0px;
position:absolute;
width:82px;
height: 392px;
left: 1px;
top: 1px;
background-color: #ffcc66;
layer-background-color: #ffcc66;
}

Det är bara det att när det kommer så mycket text att höjden blir med än 392 så sticker texten iväg utanför div:en, och det blir inte snyggt alls. Så, går det att få diven att anpassa sin storlek så att den blir lika stor som texten (vilken genereras från en databas).

Och när jag ändå är igång och ställer nybörjarfrågor, vad har z-index för funktion?

/Sabbacus

solbulleMedlem sedan mars 20015 287 inlägg

19 okt. 2002 18:36#2

z-index talar om på vilken nivå lagret ligger, om du har flera lager på delvis samma plats talar z-index om vilket som ligger överst osv.

MatteMedlem sedan aug. 20002 975 inlägg

19 okt. 2002 19:35#3

Låter man bli att sätta höjden på en div så kommer den att anpassa höjden efter innehållet.

För att få en minihöjd brukar jag lägga en flytande transparent bild till höger i diven. Jag sätter bredden till 1 och höjden till önskad minihöjd.

sabbacusMedlem sedan juli 2002630 inlägg

19 okt. 2002 20:21#4

Det funkar visst, men då får jag ett följdfel. Jag har nämligen lagt en annan, något större, DIV bakom denna DIV för att få en schysst ,i detta fallet, svart ram runt min lilla DIV. Om jag tar bort höjden på båda så "fösvinner" den bakomliggande DIV:en av någon elak anledning.

Finns det någon bra lösning till detta följdfel?

I CSS:en:
/*Den yttre av DIV:arna, den som skapar ramen*/
div.outerLeft{
position:absolute;
width: 90px;
/* height: 400px; höjden som numera är borttagen*/
left: 10px;
top: 10px;
background-color: #000000;
layer-background-color: #000000;
}
/*Den inre av DIV:arna*/
div.innerLeft{
padding: 3px;
margin: 0px;
position:absolute;
width:82px;
/*height: 392px; höjden som numera är borttagen*/
left: 1px;
top: 1px;
background-color: #ffcc66;
layer-background-color: #ffcc66;
}

I HTML-koden:
<div class="outerLeft">
<div class="innerLeft">
Tjafs som påverkar höjden...
</div>
</div>

MatteMedlem sedan aug. 20002 975 inlägg

19 okt. 2002 20:34#5

Har du någon anledning att ha den inre absolut-positionerad. Annars går det bra att göra så här:

/*Den yttre av DIV:arna, den som skapar ramen*/ 
div.outerLeft{ 
position:absolute; 
width: 90px; 
/* height: 400px; höjden som numera är borttagen*/ 
left: 10px; 
top: 10px; 
background-color: #000000; 
layer-background-color: #000000; 
} 
/*Den inre av DIV:arna*/ 
div.innerLeft{ 
padding: 3px; 
margin: 4px;
/* position:absolute;
width:82px;  */ 
/*height: 392px; höjden som numera är borttagen*/ 
left: 1px; 
top: 1px; 
background-color: #ffcc66; 
layer-background-color: #ffcc66; 
}

sabbacusMedlem sedan juli 2002630 inlägg

19 okt. 2002 21:10#6

Funkar inte för fem öre :-)
Den yttre DIV:en syns inte om man tar bort höjden på den :-///

MatteMedlem sedan aug. 20002 975 inlägg

19 okt. 2002 21:28#7

Då förstår jag inte hur det är tänkt att fungera. Så här blev det med CSS-koden jag gav dig: http://member.webforum.nu/818/sabbacusdiv.html

Som du ser så har jag inte här (i likhet med mitt tidigare svar) satt den inre diven absolutpositionerad. Har du någon speciell anledning till detta? (Att t.ex lägga det yttre ovanpå eller något).

Sen har väl jag troligtvis missförstått dig fullständigt, för annars hade det räckt med en div och en 4px bred border.

sabbacusMedlem sedan juli 2002630 inlägg

19 okt. 2002 21:41#8

Jag hade
margin 0px;
på min kod därför funkade det inte. Satte man den till t.ex. 4 så funkade det jättebäst. Ett lamt fel av mig.
Tackar för hjälpen!