Div height 100% .. echt onmogelijk?

donderdag 5 augustus 2010 11:59

Acties:

0 Henk 'm!

Topicstarter

Website : http://109.70.4.184/~jthelen/

De website is verdeelt in een linker container waar de navigatie zit en een rechter container waar de content zit.
De bedoeling is dat de rechterkant altijd de maximale hoogte gebruikt, en dus de achtergrond afbeelding zich herhaalt... Ik heb wel veel geprobeerd met faux columns maar dat is toch ook een gepuzzel en niet ideaal.
Is er iemand die me hier uit kan helpen?

Dit is zoals die moet.. alleen dit is in tables:
www.yogaopleidinghara.nl

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/reset.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.css" type="text/css" />
</head>
<body>

<div id="container">
        <div id="container-left">
            <div id="logo">
                <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" alt="Logo Yoga Opleiding Hara" />
            </div>
            <div id="menu">
                <jdoc:include type="modules" name="navigation" />
            </div>
        </div>
        <div id="container-right">
            <div id="background">
                <jdoc:include type="component" />
            </div>
        </div>
</div>
</body>
</html>

Cascading Stylesheet:

#container{
    width:960px;
    height:100%;
    margin: 0 auto;

}
    #container-left{
        width: 160px;
        float: left;
        display: inline;
        height:100%;
        
    }
        #logo{
            margin-top: 25px;
            text-align: center;
        }
        
        #menu{
            margin-top: 25px;
        }
        
    #container-right{
        width: 790px;
        float: right;
        display: inline;
        color:#064E39;
        font-family:Corbel,Verdana,Times New Roman;
        font-size:16px;
        line-height: 20px;
        height:100%;
    }
        #background
        {
            background-image: url(../images/background.jpg);
            background-repeat: repeat-y;
            border: 5px solid #F5E7B8;
        }

donderdag 5 augustus 2010 12:03

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Je zal dan toch ook even tegen die containers moeten vertellen dat ze ook 100% hoogte hebben.

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 5 augustus 2010 12:10

Acties:

0 Henk 'm!

Wouter

Mag ik een domme vraag stellen misschien?

Als je de site nu hebt zoals je hem hebben wilt met tables;
waarom wil je het dan anders doen?

Heeft dit uiteindelijk een voordeel voor de eindgebruiker?

donderdag 5 augustus 2010 12:13

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

Ik zie overigens niet waarom je voor dat design uberhaupt height: 100% nodig hebt

donderdag 5 augustus 2010 12:17

Acties:

0 Henk 'm!

Nevels

Topicstarter

MueR schreef op donderdag 05 augustus 2010 @ 12:03:
Je zal dan toch ook even tegen die containers moeten vertellen dat ze ook 100% hoogte hebben.

Geprobeerd, nu aangepast maar helpt niet.

Wouter schreef op donderdag 05 augustus 2010 @ 12:10:
Mag ik een domme vraag stellen misschien?

Als je de site nu hebt zoals je hem hebben wilt met tables;
waarom wil je het dan anders doen?

Heeft dit uiteindelijk een voordeel voor de eindgebruiker?

Het CMS Joomla zit er nu achter, daarvoor moest er een nieuwe template worden gemaakt en het leek me logisch om die nu aan te pakken met divs.

Bosmonster schreef op donderdag 05 augustus 2010 @ 12:13:
Ik zie overigens niet waarom je voor dat design uberhaupt height: 100% nodig hebt

Omdat de eindgebruiker graag wil dat de achtergrond volle hoogte gebruikt.

donderdag 5 augustus 2010 12:18

Acties:

0 Henk 'm!

bredend

ik doe er altijd

Cascading Stylesheet:

1
2
3

html, body{
height: 100%;
}

bij.

donderdag 5 augustus 2010 12:20

Acties:

0 Henk 'm!

Morphine

position: relative

op de 100% height divs.

achtergrond die herhaald op de body!

donderdag 5 augustus 2010 12:24

Acties:

0 Henk 'm!

Svennetjee

bredend schreef op donderdag 05 augustus 2010 @ 12:18:
ik doe er altijd
Cascading Stylesheet:
1
2
3
html, body{
height: 100%;
}
bij.

Zoals bredend zegt. Waarom? Height: 100%; wil niet zeggen 100% hoogte van het scherm, maar 'evenhoog als zijn container'. Al geef je alles bij wijze van spreken 100% hoogte behalve de html en de body, dan zal je div nooit 100% van het scherm zijn..

donderdag 5 augustus 2010 12:34

Acties:

0 Henk 'm!

Nevels

Topicstarter

Morphine schreef op donderdag 05 augustus 2010 @ 12:20:
position: relative

op de 100% height divs.

achtergrond die herhaald op de body!

Dit helpt niet.. staat nu in mijn css op die url.

bredend schreef op donderdag 05 augustus 2010 @ 12:18:
ik doe er altijd
Cascading Stylesheet:
1
2
3
html, body{
height: 100%;
}
bij.

Ik heb dat ook als je de css bekijkt op de gegeven url, heb hier alleen de relevante divs gegeven.

donderdag 5 augustus 2010 12:39

Acties:

0 Henk 'm!

bredend

de #background div heeft ook nog geen 100% height.

donderdag 5 augustus 2010 12:43

Acties:

0 Henk 'm!

Nevels

Topicstarter

bredend schreef op donderdag 05 augustus 2010 @ 12:39:
de #background div heeft ook nog geen 100% height.

Nu wel,... zie je hoe raar de tekst nu buiten de background valt!

donderdag 5 augustus 2010 12:48

Acties:

0 Henk 'm!

bredend

Ja, want de text is meer dan 100% van de body.

Probeer anders eens min-height:100% voor de body,html?

(divjes zijn net zo ellendig als opmaak in Word...)

donderdag 5 augustus 2010 12:53

Acties:

0 Henk 'm!

Nevels

Topicstarter

bredend schreef op donderdag 05 augustus 2010 @ 12:48:
Ja, want de text is meer dan 100% van de body. Probeer anders eens min-height:100% voor de body,html?

(divjes zijn net zo ellendig als opmaak in Word...)

Dat veranderd helaas niets..

donderdag 5 augustus 2010 13:01

Acties:

0 Henk 'm!

Oyster

Prince

Als je geen hoogte op de parent zet weet het child niet hoe hoog hij moet zijn met height:100%. Je parent #body is bijvoorbeeld niet gedefenieerd. Zet daar ook eens een 100% in.

donderdag 5 augustus 2010 13:13

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

Nevels schreef op donderdag 05 augustus 2010 @ 12:17:

Omdat de eindgebruiker graag wil dat de achtergrond volle hoogte gebruikt.

Zet je hem als achtergrond van de body.

donderdag 5 augustus 2010 13:16

Acties:

0 Henk 'm!

Nevels

Topicstarter

Oyster schreef op donderdag 05 augustus 2010 @ 13:01:
Als je geen hoogte op de parent zet weet het child niet hoe hoog hij moet zijn met height:100%. Je parent #body is bijvoorbeeld niet gedefenieerd. Zet daar ook eens een 100% in.

Dat heb ik wel, als je topic doorlas merkte je dat.
Staat in mijn css als je de url volgt.

Bosmonster schreef op donderdag 05 augustus 2010 @ 13:13:
[...]

Zet je hem als achtergrond van de body.

Daar dacht ik ook aan, alleen dan zat ik nog met die borders..

donderdag 5 augustus 2010 13:22

Acties:

0 Henk 'm!

Oyster

Prince

Nevels schreef op donderdag 05 augustus 2010 @ 13:16:
[...]

Dat heb ik wel, als je topic doorlas merkte je dat.
Staat in mijn css als je de url volgt.

Ah ja, ik zie het. Door je floats collapsed je #container parent. Heb je die gecleared?

Bijv. class="clearfix" aan je container toevoegen.
of <div style="clear:both"></div>onder de kolommen.

[ Voor 14% gewijzigd door Oyster op 05-08-2010 13:27 ]

donderdag 5 augustus 2010 13:25

Acties:

0 Henk 'm!

Nevels

Topicstarter

Oyster schreef op donderdag 05 augustus 2010 @ 13:22:
[...]

Ah ja, ik zie het. Door je floats collapsed je #container parent. Heb je die gecleared?

Bijv. class='clearfix' aan je container toevoegen.
of <div style='clear:both'></div>onder de kolommen.

Nee, maar dat gedaan hebbende merk ik geen verschil

donderdag 5 augustus 2010 13:34

Acties:

0 Henk 'm!

Oyster

Prince

Het lijkt me handig als je alles even structureert, voor in hoever je dat nog niet gedaan hebt. Haal al het extra eruit en zet enkel eerst je containers op met borders, zodat je goed kan zien wat je aan het doen bent.

donderdag 5 augustus 2010 13:40

Acties:

0 Henk 'm!

Verwijderd

Maak van je background image een img element met een position tag en een z-index van 1. Geef de divs die eroverheen moeten ook een position tag en een z-index > 1. Je image ziet er dan uit als een background, omdat 'ie dat niet is kan je CSS gebruiken voor de juiste positionering.

zondag 8 augustus 2010 12:38

Acties:

0 Henk 'm!

Verwijderd

Lees eens hier (en de laatste post voor een mogelijk antwoord).

Onderwerpen