Gå til innhold

Sliter med høyde i Opera

Yankes

Av Yankes
i Programmering og webutvikling

Anbefalte innlegg

Yankes

Yankes

Skrevet
Skrevet (endret)

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 av YaNkEs
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Loomy

Loomy

Skrevet
Skrevet (endret)
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 av Loomy
Lenke til kommentar
Yankes

Yankes

Skrevet
  • Forfatter
Skrevet

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!

Lenke til kommentar
meron

meron

Skrevet
Skrevet (endret)

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 av meron
Lenke til kommentar
Yankes

Yankes

Skrevet
  • Forfatter
Skrevet (endret)

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 av YaNkEs
Lenke til kommentar
Yankes

Yankes

Skrevet
  • Forfatter
Skrevet (endret)

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 av YaNkEs
Lenke til kommentar
Yankes

Yankes

Skrevet
  • Forfatter
Skrevet (endret)

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 av YaNkEs
Lenke til kommentar
Yankes

Yankes

Skrevet
  • Forfatter
Skrevet (endret)

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 av YaNkEs
Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)
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 av balletryne
Lenke til kommentar
Yankes

Yankes

Skrevet
  • Forfatter
Skrevet (endret)

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 av YaNkEs
Lenke til kommentar

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