Gå til innhold

Automatisk høyde elementer (dra dem)

glennsjo

Av glennsjo
i Programmering og webutvikling

Anbefalte innlegg

glennsjo

glennsjo

Skrevet
Skrevet (endret)

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 av Glenn'ern

Videoannonse

Videoannonse
Annonse
JonH

JonH

Skrevet
Skrevet

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.

JonH

JonH

Skrevet
Skrevet

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

Haraldson

Skrevet
Skrevet

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

glennsjo

Skrevet
  • Forfatter
Skrevet

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

JonH

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

JonH

Skrevet
Skrevet (endret)

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 av JonH
glennsjo

glennsjo

Skrevet
  • Forfatter
Skrevet

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 :p

JonH

JonH

Skrevet
Skrevet
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 :p

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.

Steinmann

Steinmann

Skrevet
Skrevet

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

JonH

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

haugsand

Skrevet
Skrevet (endret)
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 av satyrium
haugsand

haugsand

Skrevet
Skrevet
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"?

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...