Problem med div layout

sven-o · 4. januar 2007

Godt nyttår folkens!

Jeg sitter og sliter litt med et layout problem her. For å forenkle opplegget;

Jeg har en container som skal inneholde en menyblokk(som varierer i størrelse basert på innhold) og en blokk som skal inneholde diverse lorem.

Hovedcontaineren skal være 100% bred, altså ta opp hele nettleserens bredde, og innholdsblokken skal ta opp resten av bredden etter menyen.

Dette er hva jeg har nå:

<style>

#ramme{
width: 100%;
border: 1px solid black;
margin: 5px;

}

#meny{
float: left;
border: 1px solid black;
margin: 5px;
padding: 10px;
}

#innhold{
float: left;
border: 1px solid black;
margin: 5px;
padding: 10px;
}
</style>

<div id="ramme">

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

<div id="innhold">
innold
</div>

<div style="clear:both;">
</div>

</div>

I tillegg spretter høyre blokk under venstre dersom nettleserens bredde blir lavere enn høyre blokks høyre side. Noen som har en løsning på dette?

eigan · 5. januar 2007

Noe slikt?

Klikk for å se/fjerne innholdet nedenfor

<style>

#ramme{
width: 100%;
border: 1px solid black;
margin: 5px;

}

#meny{
position: absolute;
border: 1px solid black;
padding: 5px;
}

#innhold{
margin-left: 100px; /* avstand fra den andre */
border: 1px solid black;
padding: 5px;
}
</style>

<div id="ramme">

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

<div id="innhold">
innold
</div>

<div style="clear:both;">
</div>

</div>

sven-o · 5. januar 2007

Ohh.. Nesten.

Problemet her var at dersom innholdet i venstre blokk overskrider høyreblokkens 100px left-margin, så vil dette overlappe.

For ikke å snakke om; ie skjønte ikke bæret av denne.

Edit:

Om det gjør ting enklere(har ikke gjort det for meg ennå), så vil dette oppsettet, altså #ramme, alltid ha konstant plassering ift top og left. Dette gjør jo at jeg kan beregne bredden på høyre blokk(basert på bredden av venstre) vha javascript, men dette er da ikke særlig elegant. :nei:

Edit 2:

Heh... Det ble litt mye smileys. *klasker lanken*

Endret 5. januar 2007 av sven-o

funkweb · 5. januar 2007

Man blir litt forvirra over hva du ønsker egentlig.

Fordi koden du oppga har ikke noe feil, der er det naturlig at blokken kommer under.

Men slik jeg har forstått så trur jeg du ønsker noe slik:

HTML (XHTML 1.0 Transitional)

<div id="wrapper">
<div id="container">
<div id="content">Innhold</div>
</div>

<div id="sidebar">Meny
</div>
<div class="clearing"> </div>
</div>

CSS:

#wrapper {
border: 1px solid black;
}
#container {
width: 100%;
float: right;
margin-right: -200px;
}
#content {
margin-right: 200px;
border: 1px solid black;
}
#sidebar {
width: 200px;
float: left;
}
.clearing {
height: 0;
clear: both;
}

sven-o · 5. januar 2007

Man blir litt forvirra over hva du ønsker egentlig.
Fordi koden du oppga har ikke noe feil, der er det naturlig at blokken kommer under.

Ikke veldig bra forklart av meg kanskje. Prøver igjen:

Jeg har en meny på høyre side. Denne varierer i bredde avhengig av hvor mange undermenyer som er åpne, ettersom undermenyer skal plasseres til høyre for hovedmenyen. Dette betyr at den kan variere mellom 150px og 500px. Dette er etter ønske fra kunde, så ikke spør hvorfor. :ermm:

Videre ønsker jeg at innholdet ikke skal være låst til én bredde, men utvide seg etter nettleseren.

Denne snutten viser problemet løst med javascript:

Klikk for å se/fjerne innholdet nedenfor

<script>
function resize(){

var ramme = document.getElementById('ramme');
var meny = document.getElementById('meny');
var innhold = document.getElementById('innhold');


innhold.style.width = ramme.clientWidth - meny.clientWidth - 30;
innhold.style.left =  meny.clientWidth + 20;

}

</script>
<body onload="resize()" onResize="resize()">
<style>
#ramme{
width: 100%;
margin: 5px;
padding: 0px;
}

#meny{
position: absolute;
border: 1px solid black;
padding: 5px;
}

#innhold{
position: absolute;
border: 1px solid black;
padding: 5px;
}
</style>

<div id="ramme">

<div id="meny">
Meny
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>

<div id="innhold">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas facilisis pellentesque ante. Sed varius iaculis turpis. Praesent venenatis ultricies purus. Donec vitae purus ut nibh rutrum semper. Aenean at leo posuere ante nonummy porttitor. Duis dictum elit a elit. Donec sed lacus eu erat tempor vestibulum. Donec urna magna, iaculis sit amet, bibendum ut, malesuada ac, enim. Nunc pharetra, dui nec aliquam scelerisque, nisi nibh eleifend elit, at tincidunt nisl elit a erat. Mauris pretium justo id est.
Pellentesque urna metus, ornare a, auctor id, fringilla sit amet, nisi. Sed gravida posuere nunc. Nulla a lacus. Etiam lacinia pede eget felis nonummy ultrices. Praesent sit amet purus. Donec dapibus gravida nisi. Proin lobortis faucibus felis. Vestibulum ante. Curabitur vitae arcu. Nam dui. Fusce tincidunt. Suspendisse mollis. Proin ultricies imperdiet turpis.
Nullam pellentesque urna quis nunc. Pellentesque in velit rutrum augue adipiscing lobortis. Duis mi arcu, dapibus vitae, suscipit scelerisque, adipiscing ut, dui. Fusce volutpat sapien vitae sapien. Curabitur volutpat eros vel risus. Aliquam facilisis malesuada erat. Sed nec metus. Aenean fermentum elementum sapien. Integer in ante eget quam rhoncus rutrum. Proin hendrerit luctus orci. Duis sit amet dui eget nisl molestie venenatis. Nulla viverra magna at purus placerat placerat. Duis ac augue.
Aliquam sem. Etiam eu arcu. Sed imperdiet. Proin consectetuer tellus a nisi. Vestibulum gravida. Donec lobortis erat vel lacus volutpat pretium. Donec a nisi vitae nisl pretium lobortis. Nunc massa. Pellentesque condimentum ipsum vitae velit. Sed eget leo eget velit nonummy congue. Suspendisse potenti.
Pellentesque sit amet eros nec neque luctus rhoncus. Fusce quam. Donec porta nisl a lorem. Proin nec metus. Donec leo tortor, tristique fringilla, tempus dapibus, elementum tristique, risus. Sed rhoncus scelerisque felis. Nunc euismod tristique massa. Donec tellus. Phasellus ipsum metus, porta vel, lacinia sit amet, cursus nec, neque. Mauris convallis tincidunt diam. Nam diam. Sed nulla eros, bibendum eu, congue at, dignissim vel, nibh. Nunc commodo elementum enim. Nunc ut quam. Aenean ultrices magna in tortor. </div>

<div style="clear:both;"></div>

</div>

</body>

Dette er bare raskt lappet sammen script så det funker kun i FF.

funkweb · 5. januar 2007

Kopierte dette, men ser ikke hel riktig ut i FF likevel.

Hvilke doctype funka det i? Dvs. at innholdet overlappa Menyen.

sven-o · 5. januar 2007

Kopierte dette, men ser ikke hel riktig ut i FF likevel.
Hvilke doctype funka det i? Dvs. at innholdet overlappa Menyen.

7650722[/snapback]

Regner med at det er default doctype i FF, ettersom jeg bare la det i en tom fil uten å deklarere noen i det hele tatt.

Vedleggene viser slik jeg ønsker at det skal skal være:

Endret 5. januar 2007 av sven-o

funkweb · 5. januar 2007

Hva med denne da:

koford

sven-o · 6. januar 2007

Hva med denne da:
koford

7652806[/snapback]

Oisann! Hold nesten på å falle av stolen her jeg satt. Var sikker på at den var riktig. Derimot, etter nærmere innblikk, har den noen problemer:

- Tekst i høyre kolonne wrapper rundt og under menykolonnen.

- Jeg klarte ikke skape mellomrom mellom kolonnene vha padding.

Btw... Takk for hjelpen!

funkweb · 6. januar 2007

Ups, var ikke klar over det.. blei sent i går.

Er ikke så lett å finne svaret fordi de fleste bruker fixed width på #meny og dermed gjør alt enklere.

I ditt tilfelle er det UTEN bredde slik at det tilpasses, har googlet rundt og nesten kommer mål, men fortsatt uten hell. Lykke til videre, om du finner løsningen vil jeg gjerne høre.

sven-o · 6. januar 2007

Ups, var ikke klar over det.. blei sent i går.
Er ikke så lett å finne svaret fordi de fleste bruker fixed width på #meny og dermed gjør alt enklere.

I ditt tilfelle er det UTEN bredde slik at det tilpasses, har googlet rundt og nesten kommer mål, men fortsatt uten hell. Lykke til videre, om du finner løsningen vil jeg gjerne høre.

7656211[/snapback]

Hehe, sant det. Tusen takk for hjelpen uansett!

Jeg regner med at jeg kommer til å bruke en fixed width på hver meny/undermeny, og benytte php til å kalkulere den totale bredden til venstre kolonne basert på antall åpne undermenyer. Litt mindre fleksibelt, langt mindre elegant, men ser ut til at det er det eneste som fungerer.

Logg inn

Problem med div layout

Anbefalte innlegg

sven-o

Lenke til kommentar

Videoannonse

eigan

Lenke til kommentar

sven-o

Lenke til kommentar

funkweb

Lenke til kommentar

sven-o

Lenke til kommentar

funkweb

Lenke til kommentar

sven-o

Lenke til kommentar

funkweb

Lenke til kommentar

sven-o

Lenke til kommentar

funkweb

Lenke til kommentar

sven-o

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer