[DIV] Middelste div scherm op laten vullen - Softwareontwikkeling

maandag 10 juli 2006 19:36

Acties:

The Banana goes on always on

Topicstarter

Voor een website heb ik besloten dat het tijd werdt om over te stappen van table naar div. Dit is opzich aardig gelukt alleen krijg ik één ding niet voor elkaar.

De opbouw van het scherm is als volgt:
_________________
| HEADER (160px) |
_________________
| content (rest) |
_________________
| footer (30px) |
_________________

Ik krijg het niet voor elkaar om de middelste div (content) de hoogte van het scherm te geven minus de 190 van header en footer. Ik heb met overflow ingesteld dat hij een scroll balk moet weergeven maar als ik hem geen hoogte geeft wordt hij gewoon zo hoog als de tekst.

Wat doe ik fout?

Gamebak Specs

maandag 10 juli 2006 19:39

Acties:

iH8

bijbehorende css zou wel fijn zijn

Aunt bunny is coming to get me!

maandag 10 juli 2006 19:43

Acties:

nihitsia

The Banana goes on always on

Topicstarter

Ik heb de positie en indeling van de div's nog niet in een css apart gezet maar gewoon in hun style tag:

id="header" style="width:780px; height:150px; text-align:center; "
id="content" style="width:780px; height:auto; background-color:#FFFFFF; overflow:auto; overflow-x:hidden;"
id="footer" style="width:780px; height:30px; background-color:#1d2a43;"

Gamebak Specs

dinsdag 11 juli 2006 10:46

Acties:

BasieP

werkt dit niet? (zo uit me hoofd)

Cascading Stylesheet:

html, body {
  100%;
}

#content {
  position: relative;
  height: 100%;
  padding-top: 150px;
  padding-bottom: 30px;
}

#header {
  position: absolute;
  height: 150px;
  top: 0px;
  left: 0px;
  width: 100%;
}

#footer{
  position: absolute;
  height: 30px;
  bottom: 0px;
  left: 0px;
  width: 100%;
}

HTML:

...
<body>
  <div id="content">
    <div id="header">header</div>
    <div id="footer">footer</div>

    content
  </div>
</body>
...

height: auto gaat sowieso niet werken..
verder moet je je html, body ook 100% maken

edit:
ow btw krijg je wel een probleem met scrollbalken als je het op deze manier doet.. die vallen dan namelijk gedeeltelijk onder je header en footer

[ Voor 36% gewijzigd door BasieP op 11-07-2006 10:51 ]

This message was sent on 100% recyclable electrons.

dinsdag 11 juli 2006 11:24

Acties:

Crayne

Have face, will travel

Lees met Javascript de available window height uit en trek daar 190 pixels vanaf. Geef de je middelste div vervolgens de juiste height mee.

En vergeet niet om een window.onresize te definieren, anders werkt het alleen maar als mensen hun browserscherm met rust laten.

Heb ongeveer hetzelfde gehad met de positionering van DIVs die afhankelijk waren van schermresolutie...

Edit: zoiets...

JavaScript:

function determineHeight() { 

    var screenH = 0; 
    var newH = 0;

    if (document.layers || (document.getElementById && !document.all)) {  

        screenH = window.innerHeight; 

    } else if (document.all) { 
      
        if (parseInt(navigator.appVersion.indexOf("6") == -1)) {

            screenH = document.body.clientHeight; 

        } else {
    
            screenH = document.documentElement.clientHeight;
        
        }
        
    }

    newH = screenH - 190; 

    document.getElementById("divMiddle").style.height = newH + "px"; 
     
}

window.onresize = determineHeight;
window.onload = determineHeight;

Edit: Zie hier een werkende versie van wat ik bedoel. Werkend in IE6.0.2 hier althans.

[ Voor 86% gewijzigd door Crayne op 11-07-2006 14:26 ]

Mijn Library Thing catalogus

dinsdag 11 juli 2006 13:41

Acties:

DexterDee

I doubt, therefore I might be

Pas wel eventjes op met Opera. Deze weigert pertinent de CSS property height: 100% op <div> elementen. Ik heb uren, zoniet dagen naar workarounds gezocht, maar voor een website die ik aan het maken ben, ben ik helaas weer terugggegaan naar good ol' html tables. Deze blijven toch het best compatible met dit soort dingen.

Firefox heeft trouwens ook een leuk bij-effect met <div> elementen op height: 100%. Als je bijvoorbeeld in een <div> 3 geneste divs hebt, te weten een <div> met height: 50px, een <div> met height: 100% en een <div> met height: 50px (in deze volgorde), dan gebeurt er iets raars. De hoofd-div schaalt wel naar 100% van de paginahoogte, maar de geneste divs rekken 100 pixels verder uit dan die 100%, wat resulteert in een scrollbar. Dit komt omdat firefox moeite heeft met het bepalen van die 100% van de middelste geneste <div> en telt de 2x50 pixels van de andere divs er niet vanaf. Internet explorer doet dit wel goed.

Klik hier om mij een DM te sturen • 3245 WP op ZW

dinsdag 11 juli 2006 15:40

Acties:

BasieP

DexterDee schreef op dinsdag 11 juli 2006 @ 13:41:
Firefox heeft trouwens ook een leuk bij-effect met <div> elementen op height: 100%. Als je bijvoorbeeld in een <div> 3 geneste divs hebt, te weten een <div> met height: 50px, een <div> met height: 100% en een <div> met height: 50px (in deze volgorde), dan gebeurt er iets raars. De hoofd-div schaalt wel naar 100% van de paginahoogte, maar de geneste divs rekken 100 pixels verder uit dan die 100%, wat resulteert in een scrollbar. Dit komt omdat firefox moeite heeft met het bepalen van die 100% van de middelste geneste <div> en telt de 2x50 pixels van de andere divs er niet vanaf. Internet explorer doet dit wel goed.

das precies volgens de specs

This message was sent on 100% recyclable electrons.

dinsdag 11 juli 2006 16:27

Acties:

Clay

cookie erbij?

Deze layout is vrij normaal, en prima te doen met CSS en zonder Javascript. Waar je alleen even vanaf moet is de cellen-denkwijze, waarbij je X en Y een hoogte of breedte geeft, en Z de rest opvult. CSS werkt gewoon net even anders.

Veruit de makkelijkste manier is een header met een fixed height, een content element dat daar in de flow automatisch onder komt, met een padding bottom om ruimte te houden voor de fixed height footer, die met position absolute onderin zit. Om al dat heen moet een container met position op relative, en height op 100%, waarbij BassieP terecht opmerkt dat html,body dat dan ook moet hebben, want 100% van auto is nog steeds auto.

Die container kan dan grafisch de illusie wekken dat de hele boel elkaar aanvult. Als de content langer kan worden dan schermhoogte moet je even naar min-height kijken voor echte browsers, die height niet automatisch als min-height opvatten.

[ Voor 16% gewijzigd door Clay op 11-07-2006 16:30 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

dinsdag 11 juli 2006 22:01

Acties:

DelTorro

Ik heb een site gemaakt die denk ik hetzelfde heeft als wat jij wilt, zonder gebruik van Javascript (voor de lay-out dus). Slechts een alternatieve stylesheet voor IE gebruikt. Sorry, heb geen zin om uit te zoeken hoe het ook alweer zit maar als je de code doorspit, zul je er wel uit moeten komen denk ik.
link

dinsdag 1 augustus 2006 15:51

Acties:

nihitsia

The Banana goes on always on

Topicstarter

Ik kom er nog steeds niet echt uit.

Dit is nu de html:

code:

<html>
<head>
<title>Toke Hoppenbrouwers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="header"><img src="images/header.jpg"></div>
<div id="navigation">NAV</div>
<div id="content" class="plaintext">CONTENT
</div>
<div id="footer"></div>
</body>
</html>

en dit de css:

code:

html, body {
height:100%;
} 
body{
scrollbar-face-color: #646277; 
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF; 
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #999999; 
scrollbar-track-color: #FFFFFF; 
scrollbar-arrow-color: #FFFFFF;
 background-image:url(../images/bg.gif);
 overflow:hidden;
    margin: 0px;
    padding: 0px;
}
#header{
position:absolute;
height:150px;
width:780px;
left:20%;
}
#navigation{
top:150px;
position:absolute;
height:10px;
width:760px;
left:20%;
background-color:#646277; 
padding:10px;
font-family:Verdana;
font-size: 9px;
color:#FFFFFF;
text-align:left;
line-height:10px;
}
#content{
max-height:100%;
overflow:auto;
overflow-x:hidden;
position:absolute;
top:180px;
bottom:30px;
padding:10px;
width:760px;
background-color:#FFFFFF;
left:20%;
}
#footer{
position:absolute;
height:30px;
background-color:#1d2a43;
width:780px;
bottom:0px;
left:20%
}

in firefox werkt het goed. IE gaat alleen helemaal vreemd:
http://www.dcvanegmond.nl/toke/temp.htm

Het witte stuk zou gewoon tot de bodem moeten gaan tot benee.

Als er meer content is dan scherm werkt het overflow atribuut ook niet goed in IE:
http://www.dcvanegmond.nl/toke/temp2.htm

Gamebak Specs

dinsdag 1 augustus 2006 16:45

Acties:

storeman

hier in IE7 werken beide wel goed, misschien leuk om te weten en wellicht ook een lichtpuntje

*Storeman volgt topic, zelf ook problemen ondervonden

"Chaos kan niet uit de hand lopen"