[CSS] 100% hoogte minus de bovenkant - Softwareontwikkeling

vrijdag 23 februari 2007 13:12

Acties:

Topicstarter

Ik heb veel gezocht maar geen bevredigend antwoord gevonden. Daarom nu deze vraag.

Ik ben een site aan het bouwen waarbij de content een stukje van de bovenkant begint. Deze content (en de achtergrond van dit vlak) moet echter helemaal tot de bodem van het scherm lopen. En dat lukt dus niet. Want als ik een hoogte van 100% meegeef dan pakt hij (logischerwijs) 100% van de viewport. En aangezien het vlak halverwege de pagina begint neemt hij teveel ruimte in en komt er een scrollbar te staan.

Ik heb verschillende dingen gelezen, vooral de alom geprezen faux collumns komen veel voorbij. Deze techniek gebruik ik met succes in een aantal andere websites, maar ik zie niet in hoe het hier kan helpen.

Ik heb een voorbeeldje online gezet, klik hier om deze te bekijken. Het idee is dat de lijntjes helemaal tot de bodem lopen. Enne, geen zorgen: dit is niet het uiteindelijke design, het gaat puur om het idee.

De code is als volgt:

Cascading Stylesheet:

body,html
    {
        margin: 0px;
        padding: 0px;
        height: 100%;
        font-family: Trebuchet MS, Trebuchet, Verdana, Arial;
        background-color: #000000;
        font-size: 12px;
        color: #FFFFFF;
    }

#canvas
    {
        background: url(top_background.gif);
        background-position: top left;
        background-repeat: no-repeat;
        position: relative;
        margin: auto;
        width: 700px;
        height: 100%;
    }

#content
    {
        padding-left: 50px;
        position: relative;
        margin: auto;
        width: 690px;
        height: 100%;
    }

#logo
    {
        margin-top: 45px;
    }

#navigation
    {
        margin: 0px;
        padding: 0px;
        margin-top: 10px;
        list-style-type: none;
    }

#navigation li
    {
        float: left;
        margin-bottom: 0px;
    }

#maincontent
    {
        background: url(lijntjes.gif);
        background-repeat: repeat-y;
        margin-top: 180px;
        height: 100%;
    }

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>GoT - CSS probleem</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="canvas">

<div id="content">

    <img src="logo.gif" alt="Logo" id="logo" />

    <ul id="navigation">
        <li>pagina 1</li>
        <li>pagina 2</li>
        <li>pagina 3</li>
        <li>pagina 4</li>
        <li>pagina 5</li>
        <li>pagina 6</li>
    </ul>

    <div id="maincontent">
        Hier komt de maincontent
    </div>

</div>
</div>

</body>

</html>

Wie o wie vertelt mij hoe ik dit oplos?

omniscale.nl

vrijdag 23 februari 2007 13:45

Acties:

BtM909

Watch out Guys...

Heb even geen tijd om je verder te helpen, my bad... Maar even 1-2-3 wat tips:

1. Je gebruikt teveel classes en divjes om je spul te positioneren:

Cascading Stylesheet:

html, body{
    position: relative;
    margin: 0 auto;
    padding: 0;
    font-family: Trebuchet MS, Trebuchet, Verdana, Arial;
    font-size: 12px;
    color: #FFFFFF;
    background-color: #000000;
    width: 700px;
    height: 100%;
}

body{
    background: url(top_background.gif) top left no-repeat;
}

Hierdoor heb je die canvas div + class helemaal niet meer nodig

Cascading Stylesheet:

#navigation{
    margin: 0;
    padding: 0;
    margin-top: 10px;
    list-style-type: none;
}

Als je 0 gebruikt, dan hoeft daar geen px voor

Cascading Stylesheet:

#maincontent{
    background: url(lijntjes.gif) repeat-y;
    position: absolute;
    top: 275px;
    right: 0;
    left:0;
    bottom: 0;
}

Dit werkt wel in FF, maar weer niet in IE. Zal later kijken als er geen oplossing voor is

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 23 februari 2007 14:43

Acties:

posttoast

Topicstarter

Bedankt voor je tips! In IE6 en FF heb ik inderdaad die canvas-class niet nodig, maar in IE7 gaat het zonder dat ding mis, de hele bende komt tegen de linkerkant te staan (zie dit voorbeeld). Jouw oplossing voor het 100% height probleem werkt inderdaad in Firefox, maar ook in IE7. In IE6 gaat dát dan weer mis.

Iemand nog ideeën?

omniscale.nl

vrijdag 23 februari 2007 14:54

Acties:

moozzuzz

Misschien kan je het oplossen door je container canvas op 100% te zetten met een padding-top: __px;. Daarin plaats je dan een content met opnieuw 100%?

HTML:

<body> 

<div id="container"> 
    <div id="maincontent"> 
        Hier komt de maincontent 
    </div> 

    <div id="header">
        <img src="logo.gif" alt="Logo" id="logo" />
        
        <div id="menu"> 
        <ul id="navigation"> 
            <li>pagina 1</li> 
            <li>pagina 2</li> 
            <li>pagina 3</li> 
            <li>pagina 4</li> 
            <li>pagina 5</li> 
            <li>pagina 6</li> 
        </ul> 
        </div> 
    </div>
    
</div>

</body>

Cascading Stylesheet:

#container{ 
    position: relative;
    background-color: #aaaaaa; 
    height: 100%; 
    border: 1px white solid;
    padding-top: 300px;
    zoom: 1.0;
}

#menu {
    margin-top: 10px;
}

#header {
    position:absolute;
    top: 0;
    border: 1px red solid;
    width: 100%;
}


#navigation{
    background: #66ee33;
    margin: 0; 
    padding: 0; 
    top: 10px; 
    list-style-type: none; 
}

#maincontent{ 
    position: relative;
    background: #ee6633 url(lijntjes.gif) repeat-y;
    width: 100%;
    height: 100%; 
}

maincontent een position: relative geven zorgt ervoor dat IE6 correct werkt, doch FF wil dit keer niet mee :^)

Moet de maincontent langer kunnen worden dan de viewport? Anders kan je natuurlijk ook gewoon overflow: hidden op de html,body.

[ Voor 4% gewijzigd door moozzuzz op 23-02-2007 14:56 ]

vrijdag 23 februari 2007 15:09

Acties:

posttoast

Topicstarter

Helaas, jouw voorbeeld werkt hier niet in IE7 en FF. Overigens moet de maincontent inderdaad langer kunnen worden dan de viewport.

Zie ook dit

[ Voor 21% gewijzigd door posttoast op 23-02-2007 15:12 ]

omniscale.nl

zaterdag 24 februari 2007 22:05

Acties:

posttoast

Topicstarter

Trapje!

Niemand met een oplossing?

omniscale.nl

maandag 26 februari 2007 16:34

Acties:

posttoast

Topicstarter

laatste wanhoopstrap!

omniscale.nl

maandag 26 februari 2007 16:44

Acties:

NitroX infinity

Allereerst; begrijp ik je goed?:

Je content begint op x pixels van de hoogte en moet gelijk zijn aan de hoogte van het zichtbare vlak?

Als dat klopt;

http://www.w3schools.com/htmldom/dom_obj_screen.asp
http://www.w3schools.com/htmldom/prop_screen_availheight.asp

Kun je daar niet iets mee inelkaar flansen?

Graphene; a material that can do everything, except leave the lab. - Asianometry

maandag 26 februari 2007 16:48

Acties:

posttoast

Topicstarter

NitroX infinity schreef op maandag 26 februari 2007 @ 16:44:
Allereerst; begrijp ik je goed?:

Je content begint op x pixels van de hoogte en moet gelijk zijn aan de hoogte van het zichtbare vlak?

Als dat klopt;

http://www.w3schools.com/htmldom/dom_obj_screen.asp
http://www.w3schools.com/htmldom/prop_screen_availheight.asp

Kun je daar niet iets mee inelkaar flansen?

Je omschrijft mijn probleem correct

De achtergrond moet zo hoog zijn als de viewport, tenzij de content groter is (dan moet hij dus groter zijn dan de viewport).

Dit zijn mooie oplossingen, maar kan zoiets niet zonder javascript?

omniscale.nl

maandag 26 februari 2007 16:59

Acties:

NitroX infinity

Moet je dan niet met min-height gaan werken?

Cascading Stylesheet:

1
2
3

#maincontent {
margin-top: [getal]px;
min-height: 100%; }

Graphene; a material that can do everything, except leave the lab. - Asianometry

woensdag 28 februari 2007 11:38

Acties:

Verwijderd

posttoast schreef op maandag 26 februari 2007 @ 16:48:
De achtergrond moet zo hoog zijn als de viewport, tenzij de content groter is (dan moet hij dus groter zijn dan de viewport).

Bij mij werkt dit onder Firefox en Opera, maar weer niet onder Safari. Onder Opera krijg ik wel altijd een verticale scrollbar (ik heb geen tijd om dat te fixen; misschien ergens op 99% ipv 100% zetten). Ik heb geen Windows, dus wat IE doet weet ik niet.

Ik heb de div#top 100px hoog gemaakt. Je maakt div#canvas 100%-100px groot d.m.v. top:0;bottom:100px.

In Firefox valt div#main aan de onderkant uit div#canvas. Dat maakt niet uit omdat je die toch niet ziet.

Ik denk dat IE hier weer heel anders mee omgaat, maar misschien heb je iets aan deze "denkrichting".

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>GoT - CSS probleem</title>

<style type="text/css">
html, body {
    margin:0px;
    padding:0px;
    height:99%;
    width:99%;
}
#canvas {
    position:absolute;
    top:0;left:0;right:0;bottom:100px;
}
#hor {
    width:700px;
    margin:0px auto;
    height:100%;
}
#top {
    top:0px;
    height:100px;
}
#main {
    height:inherit;
    min-height:inherit;
    bottom:0px;
    background:url(lijntjes.gif) repeat-y;
}
</style>
</head>
<body>

<div id="canvas">
   <div id="hor">
    <div id="top">navigation</div>
    <div id="main">content</div>
   </div>
</div>
</body>
</html>

woensdag 28 februari 2007 15:28

Acties:

Fuzzillogic

Cool

De manier van BtM909 in "[CSS] 100% hoogte minus de bovenkant" lijkt me toch wel de meest logische eigenlijk. Probleem hiervan is dat IE6 het niet snapt, want het is CSS2. Hoe erg dat is moet je zelf bepalen, maar met Dean Edwards' IE7-script kun je IE6 op dit punt ook wel CSS2-compatible maken.

Om het met javascript te gaan oplossen is onnodig en zeker niet fraai.

[ Voor 11% gewijzigd door Fuzzillogic op 28-02-2007 15:30 ]