Automatisk høyde elementer (dra dem)

glennsjo · 30. november 2005

Nå er jeg dritt lei.

Hvordan får jeg et element som står rundt et annet til å automatisk "dras ned" slik at høyden automatisk justerer seg?

På det verste har den samme koden gitt forskjellig output i både Mozilla, IE og Opera.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">

<head>
<title></title>

<style type='text/css'><style>
* {
margin: 0;
padding: 0;
}

body {
background: #000000;
}

.container {
position: relative;
margin: 10px auto;
width: 800px;
border: 1px solid red;
background: #FFFFFF;
}

.venstremeny {
border: 2px dotted red;
width: 290px;
float: left;
}

.hovedboks {
border: 2px dotted orange;
width: 490px;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<div class="container">
<div class="venstremeny">
venstremeny<br />
venstremeny<br />
venstremeny<br />
</div>
<div class="hovedboks">
hovedboks
</div>
</div>

</body>

</html>

I dette tilfellet vises det riktig i IE, men ikke Firefox og Opera.

Endret 30. november 2005 av Glenn'ern

JonH · 30. november 2005

Slet litt med akkurat det samme en stund jeg også. Du kan se om du får noe ut av vedlegget, eller se link i bunnen av innlegget.

Haraldson · 30. november 2005

Legg til en <hr> helt nederst i container (rett før den avsluttes).

Style slik:

hr {

clear: both;

visibility: hidden;

width: 100%;

}

JonH · 30. november 2005

Prøv å legg til overflow: hidden; i .container, prøvde det hos meg og det ble bedre

.container {
position: relative;
margin: 10px auto;
width: 800px;
border: 1px solid red;
background: #FFFFFF;
overflow: hidden;
}

Haraldson · 30. november 2005

overflow: hidden; kan ganske lett skape problemer senere, f.eks at containeren bare utvider så og så langt nedover, og gir beng i resten av innholdet som egentlig også skulle være med... Det har jeg sliti med på en side i det siste...

glennsjo · 30. november 2005

Hr funka jo bra det - på venstremenyen.

Når hovedboksen blir lenger enn venstremenyen er problemet imidlertid fremdeles det samme.

Jeg har hatt en mistanke om at det har med alle "position: xxx" å gjøre, men forandrer jeg dem så forandrer ting seg til det enda verre igjen.

JonH · 30. november 2005

Legg til en <hr> helt nederst i container (rett før den avsluttes).

Style slik:

hr {

clear: both;

visibility: hidden;

width: 100%;

}

5233818[/snapback]

Hos meg resulterer det i at bildet og rammen på #wrap (=containeren) blir borte i Opera og Firefox...

JonH · 30. november 2005

Du vil ha det slik som på bildet? Det er iallefall slik jeg har løst problemet, selv om det som nevnt tidligere kanskje ikke er optimalt...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">

<head>
<title></title>

<style type='text/css'><style>
* {
margin: 0;
padding: 0;
}

body {
background: #000000;
}

.container {
position: relative;
margin: 10px auto;
width: 800px;
border: 1px solid red;
background: #FFFFFF;
overflow: hidden;
}
.venstremeny {
border: 2px dotted red;
width: 290px;
float: left;
}

.hovedboks {
border: 2px dotted orange;
width: 490px;
float: left;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<div class="container">
<div class="venstremeny">
venstremeny<br />
venstremeny<br />
venstremeny<br />
</div>
<div class="hovedboks">
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
hovedboks<br />
</div>
</div>

</body>

</html>

Endret 30. november 2005 av JonH

glennsjo · 30. november 2005

Holy tomoly. Takk.

Jepp, sånn det skal være (også må venstremenyen "dras" hvis den er for lang, men det gjør den med den koden der).

Nå må jeg sammenligne og se hvor jeg har driti meg ut hen

JonH · 30. november 2005

Holy tomoly. Takk.

Jepp, sånn det skal være (også må venstremenyen "dras" hvis den er for lang, men det gjør den med den koden der).

Nå må jeg sammenligne og se hvor jeg har driti meg ut hen

5234077[/snapback]

Hehe, har nok driti meg ut mange ganger jeg også, vi er garantert ikke de eneste!

Og en ting til - det kan kanskje være mest praktisk å samle css-koden i egen fil. Blir siden(e) store så kan det kanskje bli litt uoversiktlig... Det er iallefall min erfaring.

glennsjo · 30. november 2005

Jepp. Det gjør jeg. Men jeg gadd ikke det i den debugging-moden jeg var i

Steinmann · 30. november 2005

Er det ikke slik at dette problemet ikke finnes i html?

Kan ikke huske å truffet på det en stund.

Overflow: auto; funker også,

men IE(content is king) loker på den.

<div style="clear:both"></div> bør også funke seff

JonH · 30. november 2005

<div style="clear:both"></div> bør også funke seff

5234366[/snapback]

Hmm, ser slik ut ja... Da kommer jeg til å gjøre det selv også når overflow:hidden kan skape problemer.

haugsand · 30. november 2005

overflow: hidden; kan ganske lett skape problemer senere, f.eks at containeren bare utvider så og så langt nedover, og gir beng i resten av innholdet som egentlig også skulle være med... Det har jeg sliti med på en side i det siste...

5233866[/snapback]

Kan du laste opp et eksempel? Jeg har brukt overflow: auto; på en del sider i det siste, men om det kan oppstå problemer, får jeg revudere bruken

Endret 30. november 2005 av satyrium

Steinmann · 1. desember 2005

Problemet går på IE som ikke helt klarer å utvide div'n, og legger derfor på en scroll :\

Skjer bare noen ganger :\

haugsand · 1. desember 2005

Problemet går på IE som ikke helt klarer å utvide div'n, og legger derfor på en scroll :\
Skjer bare noen ganger :\

5234772[/snapback]

Skjer det også om overflow-egenskapen har verdien "auto" i stedet for "hidden"?

JonH · 1. desember 2005

The overflow declaration

Automatisk høyde elementer (dra dem)

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer