Sliter med høyde i Opera

Yankes · 31. august 2006

CSS fila:

#top {
width: 600px;
height: 200px;
background: url(top.jpg);
}

#main {
width: 600px;
height: 800px; **
}

#bottom {
width: 600px;
height: 50px;
}

HTML fila:

<div id="top"></div>
<div id="main">
Masse tekst
</div>
<div id="bottom">
Noe tekst her
</div>

Dette er bare et enkelt eksempel jeg har laget her nå.

Problemet ligger der jeg har satt ** i CSS fila. Hvis jeg fjerner height under #main så blir #bottom boksen liggende helt oppunder #top boksen. Men hvis jeg setter en fast height under #main så går det helt fint helt til jeg kommer på en side der det er så mye tekst at teksten tar mere plass enn f.eks. 800px i høyde, så står den fast der og da kommer teksten i #main boksen over #bottom boksen.

Det jeg vil er da at #bottom boksen skal flytte seg etter og komme under #main boksen, for når jeg sette height: 800px; så blir den der, hverken mer eller mindre!

Funker fint i IE, men ikke i Firefox!

Noen som har noe forslag til hvordan jeg kan løse dette?

EDIT: litt dårlig forklart kanskje, bare spør om det var noe du ikke skjønte..

Endret 8. september 2006 av YaNkEs

Yankes · 31. august 2006

Noen som har noen forslag til hvordan jeg skal løse dette ?

Loomy · 1. september 2006

Noen som har noen forslag til hvordan jeg skal løse dette ?

Step 1: Slutte å bumpe

Step 2: Lese retningslinjene ang. bumping

----------------------------------------------------

Litt vanskelig å forstå hva du er ute etter, men du vil altså at #main skal være minst 800px, men samtidig utvide seg vertikalt hvis innholdet krever det?

I så fall:

#main {
min-height:800px;
height:auto !important;
height:800px;

width..
etc..
etc...
}

Endret 1. september 2006 av Loomy

Yankes · 1. september 2006

Beklager bumpingen, men det tok lang tid, ingen svare og tråden begynte å komme langt ned på lista, så jeg bumpa i stedet for å evt. lage en ny tråd etterhvert ..

Jeg prøvde som du sa, men #main boksen nekter å bli større i Firefox, dette irriterer meg grådig!

meron · 1. september 2006

Firefox, som følger CSS-standaren bruker min-height

I IE må du bruke height

Du har då flere alternativer for å få dette til:

1. skriv "min-height" i css-dokumentet og legg height inn i <[if ie] tag

2. bruk CSS2 / CSS triks.

Nr 2:

#top {
width: 600px;
height: 200px;
background: url(top.jpg);
}

[id="main"] {
 min-height: 800px;
 height:auto !important;
}

#main {
height:800px;
width:600px;
}

#bottom {
width: 600px;
height: 50px;
}

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="show.css" type="text/css" media="screen" />
</head>
<body>
<div id="top"></div>
<div id="main">
Masse tekst
</div>
<div id="bottom">
Noe tekst her
</div>
</body>
</html>

Endret 1. september 2006 av meron

Yankes · 1. september 2006

Nå fokuserer jeg kun på Firefox, har fått til siden 100% i IE!

Setter jeg height 800px så står den bom fast på 800px

Setter jeg min-height 800px så står den bom fast på 800px

Setter jeg height: atuo !important så blir hele main-feltet borte og #bottom kommer rett under #top

Setter jeg alle så står den bom fast på 800px

Setter jeg ingen av delene så blir hele main-feltet borte og #bottom kommer rett under #top

Jeg har prøvd ALLE mulige varianter av de kodene dere har gitt meg, men ingen ting funker!

Endret 1. september 2006 av YaNkEs

Loomy · 1. september 2006

Da gjør du noe feil, for her funker både min og meron sin kode fett som fanden

Yankes · 1. september 2006

Fader å! Sorry det er jeg som er helt på trynet her ..

Jeg prøvde meg fram på andre måter nå og fikk det til, men det jeg ikke har sagt (som jeg burde ha sagt med en gang) er at jeg har 2 <div>-elementer inni ett <div>-element!

Alt så jeg har #main og #meny inni #mainmeny

Jeg har satt min-height: 800px; på alle 3 og da burde vel #mainmeny bli større ettersom #main blir større og #main ligger inni #mainmeny, også har jeg float: left på #main og #meny så de ligger siden av hverandre inni #mainmeny ... om dere skjønner ?

jeg har nå satt border: #ff0000 1px solid; på alle for å se hvor de stopper og da så jeg at #mainmeny stoppa på 800px; og #main fortsatt og kryssa borderlinja til #mainmeny!

Såå problemet nå er å få #mainmeny til å bli større så lenge #main som ligger inni blir større..

min-height: 800px funker nå på #main så den vokser som den skal!

EDIT: Nok en gang, bekalger så meget : /

Endret 1. september 2006 av YaNkEs

meron · 1. september 2006

Forsto ikkje kva du meinar?

Faux columns?

Yankes · 1. september 2006

ok, skal prøve å forklare med kode ..

CSS

#mainmeny {
widht: 700px;
min-height: 800px;
}

#main {
width: 500px;
min-height: 800px;
float: left;
}

#meny {
width: 200px;
min-height: 800px;
float: left;
}

HTML

<div id="mainmeny">

<div id="main">
MAIN HER
</div>

<div id="meny">
MENY HER
</div>

</div>

#main forstørres når det blir tekst som tar mere plass enn 800px i høyden, men når #main forsørres vil jeg at #mainmeny også skal forstørres, men det som skjer er at #mainmeny blir der den er og #main forsetter over slutten på #mainmeny

Nok en gang dårlig forklart, men .. : /

Endret 1. september 2006 av YaNkEs

meron · 1. september 2006

Tror du mener Faux Columns - søk google.

Haraldson · 1. september 2006

http://www.alistapart.com/articles/fauxcolumns/ <- denne kan jeg i hodet etter å ha skrevet den utallige ganger på forumet.

En kompis hadde problemer med siden tidligere i dag, men den funket fint for meg, så kan ikke garantere at den funker.

Endret 1. september 2006 av Mr.Berg

Yankes · 2. september 2006

Har ikke tid til å lese det så nøye nå, men prøvde det sånn jeg forsto det på sparket..

Er ikke sikkert jeg forsto det rett, men det jeg gjorde var å sette inn

background: #ccc url(bg.jpg) repeat-y 50% 0;

i #mainblogg men ingen ting skjedde..

Endret 2. september 2006 av YaNkEs

toss · 2. september 2006

høres ut som samme problemet jeg hadde.. (se her..)

fikk denne linken: http://www.positioniseverything.net/easyclearing.html

prøv det..

det funket i hvert fall for meg..

Drømmemannen · 2. september 2006

Har ikke tid til å lese det så nøye nå, men prøvde det sånn jeg forsto det på sparket..
Er ikke sikkert jeg forsto det rett, men det jeg gjorde var å sette inn
background: #ccc url(bg.jpg) repeat-y 50% 0;
i #mainblogg men ingen ting skjedde..

6788329[/snapback]

Altså, faux columns vil ikke endre på div-ene på noe vis, men man skaper en illusjon om at begge kolonnene er like lange ved hjelp av et bakgrunnsbilde som til enhver tid er minst like høyt som den lengste kolonnen. Bakgrunnsbildet må inneholde grafikken som utgjør de opptegnede kolonnene.

Edit: leif.

Endret 2. september 2006 av balletryne

Yankes · 3. september 2006

Tusen takk Toss, nå funka det akkurat som det skal :dribble:

Yankes · 8. september 2006

Jeg hadde problemet i Firefox, men fikk denne linken og gjorde som det sto der og alt er nå 100% perfekt i IE og Firefox, meg jeg lastet nylig ned Opera og la da merke til å siden er fucka i Opera.. Jeg får det samma problemet der som jeg har hatt i Firefox tidligere :hrm:

Dette er måten jeg gjør det på for at det skal funke i firefox

http://www.positioniseverything.net/easyclearing.html

Endret 8. september 2006 av YaNkEs

Logg inn

Sliter med høyde i Opera

Anbefalte innlegg

Yankes

Videoannonse

Yankes

Loomy

Yankes

meron

Yankes

Loomy

Yankes

meron

Yankes

meron

Haraldson

Yankes

toss

Drømmemannen

Yankes

Yankes

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer