[CSS] Beginnersvraag met layoutproblemen

[ThaStealth]

Hallo,

Ik ben voor een website bezig om deze met CSS netjes uit te lijnen, helaas loop ik nog tegen enkele problemen aan, de website heeft een dubbele headerbalk (1x logo, 1x menu), een navigatiebalk aan de linkerkant, en de rechterkant is helemaal bedoeld voor content.
De headerbalken hebben een fixed height, de navigatiebalk links een fixed width, de content pagina mag de overige ruimte opvullen.

Als ik de volgende CSS gebruik lijkt alles in eerste opzicht goed uit te zien:

Cascading Stylesheet:

#header {
    background-image: url('header_bg.png');
    width:100%; 
    height: 3em;
    text-align: left;
}

#subheader {
    background-image: url('toolbarBgH.gif');
    width:100%;
    height: 3em;
    font-size:11px;  
}

#content 
{       
   padding-left: 5px; 
   width:100%;
   height:100%;
   position:absolute;    
   margin-left:254px;
   font-size:11px;
}

#navigation {
width: 252px;       
    font-size:11px;
    padding-left :5px;        
    position:fixed;
    height:100%;    
    
    background-image: url('itemsBg.gif');
}

Als ik echter ga resizen, dan resized de navigatiebalk in de hoogte niet goed mee (hij resized wel, maar te weinig), hetzelfde heb ik de breedte als met de contentgedeeltes. De navigatiebalken doen het wel goed.

Het lijkt erop dat hij bij de contentbalk ervanuit gaat dat de ruimte van de navigatiebalk ook nog bij hem hoort om te resizen. De navigatiebalk denkt dit van de headerbalken.

Ik weet dat het een vrij simpel probleem is, maar ik kan gewoon nergens een oplossing vinden

[Bosmonster]

Wat jij zoekt is "faux columns", m.a.w. het simuleren van het doorlopen van de kaders, ipv height:100% te gebruiken (wat niet gaat doen wat jij wilt dat het doet).

[C0rnelis]

Normaal gesproken geeft de height: 100% die je hebt ingesteld aan dat de maximale hoogte 100 procent is van het parent element, in dit geval neem ik aan dat de parent de body is, wat betekent dat de hoogte van #navigation net zo groot is als je browser venster en wat vervolgens naar beneden opgeschoven met de gezamenlijke hoogte van de header en subheader.

Wanneer ik de css kopieer en enkel de elementen in een kale html/body pagina stop dan is het eerste wat direct opvalt de schuifbalken in zowel horizontale en verticale richting.

De hoogte van de navigatie en de breedte van de content schalen dus bij het resizen naar de grootte van je gehele browserwindow en niet naar de grootte van het maximaal zichtbare deel (subtiel verschil, met soms grote gevolgen ).

Ik spreek nu uiteraard voor mijzelf, maar het komt bij mij niet duidelijk over wat je precies wilt bereiken. Ik ben zelf geen prof maar heb al wel wat CSS (hobby/college) werk achter de rug.

[ThaStealth]

C0rnelis schreef op zaterdag 10 juli 2010 @ 20:03:
Normaal gesproken geeft de height: 100% die je hebt ingesteld aan dat de maximale hoogte 100 procent is van het parent element, in dit geval neem ik aan dat de parent de body is, wat betekent dat de hoogte van #navigation net zo groot is als je browser venster en wat vervolgens naar beneden opgeschoven met de gezamenlijke hoogte van de header en subheader.

Wanneer ik de css kopieer en enkel de elementen in een kale html/body pagina stop dan is het eerste wat direct opvalt de schuifbalken in zowel horizontale en verticale richting.

De hoogte van de navigatie en de breedte van de content schalen dus bij het resizen naar de grootte van je gehele browserwindow en niet naar de grootte van het maximaal zichtbare deel (subtiel verschil, met soms grote gevolgen ).

Ik spreek nu uiteraard voor mijzelf, maar het komt bij mij niet duidelijk over wat je precies wilt bereiken. Ik ben zelf geen prof maar heb al wel wat CSS (hobby/college) werk achter de rug.

Hoe pas ik em aan dat ie naar het maximaal zichtbare deel resized??

Bosmonster schreef op zaterdag 10 juli 2010 @ 19:36:
Wat jij zoekt is "faux columns", m.a.w. het simuleren van het doorlopen van de kaders, ipv height:100% te gebruiken (wat niet gaat doen wat jij wilt dat het doet).

Het lijkt erop in de beschrijving dat die oplossing alleen werkt als in de breedte, in de hoogte heb ik hetzelfde probleem, kan ik dezelfde manier ook gebruiken?

[Rokuta]

ik heb geprobeerd om te maken wat je bedoeld, maar het is me nog niet helemaal duidelijk.
Je probeert om #content zo breed te maken als het browserscherm, minus de navigatiebalk aan de linkerkant. In de CSS code die je post maak je gebruik van position: fixed, is hier een speciale reden voor? Wellicht dat de paar aanpassingen die ik heb gemaakt je op weg helpen:

Cascading Stylesheet:

body {
   margin: 0px;
}
#content {         
   /* padding-left: 5px;  */ 
   width:100%; 
   height:100%; 
   position:absolute;     
   /*    margin-left:254px;  */
   font-size:11px; 
} 

#navigation { 
    width: 252px;         
    font-size:11px; 
    /* padding-left :5px; */        
    /*   position:fixed;  */
    float: left;
    height:100%;     
    background-image: url('itemsBg.gif'); 
}

De stukjes code die ik er uit heb gehaald heb ik even als comments laten staan.

Edit: Oeps, HTML vergeten:

HTML:

<div id="content">
    <div id="navigation"> </div>
    Je content komt dus hier.
</div>

Verschil is dus dat je #navigation binnen de content komt te vallen. Door de float "drukt" hij de inhoud van de content naar rechts.

[ Voor 13% gewijzigd door Rokuta op 14-07-2010 00:17 ]

[ThaStealth]

Ik heb het geprobeerd om de code te gebruiken die je me aanreikt, het lijkt echter niet helemaal het goede effect te hebben:

http://yfrog.com/j3picca1p

Dit is het effect wat ik graag zou willen hebben:
http://yfrog.com/6xpicca2p

Maar dit is het effect wat ik telkens krijg als ik het browser scherm resize:
http://yfrog.com/1qpicca3p

De fixed zorgde ervoor dat ik de linkerbalk over de hele pagina gevuld had

[DAMAGE]

Hij moet altijd zo breed worden als je browser scherm is? En de header blijft altijd op de zelfde hoogte staan?

Waarom doe je dan gewoon niet een background maken, zet je die op je body. Die grafische toestanden die je nu gebruikt voor de header en het submenu lenen zich daar prima voor toch? Background-repeat op dat hij alleen horizontaal repeat en klaar is kees.

Vervolgens maak je een DIV aan die container heet ofzo, deze maak je zo groot als je je site wilt hebben en geef je margin: 0, auto; mee om in het midden uit te lijnen (of wat anders als je dat wilt natuurlijk). Done?

Ik zou het met een background doen boven in en door laten lopen. Vervolgens kun je wel divjes op plaatsen maken waar je een menu wilt of een logotje... Ik maak het me zelf altijd makkelijk als het om CSS gaat. Als je het te moeilijk maakt kom je heel snel met vervelende bugs enzo in aanraking.

[ Voor 23% gewijzigd door DAMAGE op 15-07-2010 19:56 ]

[C0rnelis]

ThaStealth schreef op donderdag 15 juli 2010 @ 19:47:
Ik heb het geprobeerd om de code te gebruiken die je me aanreikt, het lijkt echter niet helemaal het goede effect te hebben:

http://yfrog.com/j3picca1p

Dit is het effect wat ik graag zou willen hebben:
http://yfrog.com/6xpicca2p

Maar dit is het effect wat ik telkens krijg als ik het browser scherm resize:
http://yfrog.com/1qpicca3p

De fixed zorgde ervoor dat ik de linkerbalk over de hele pagina gevuld had

Er wordt nu eindelijk een beetje duidelijk wat hoe het er precies uit hoort te zien, maar post eens de complete css + html. Het lijkt dat, op basis van de twee laatste screenshots, de kolommen een bepaalde (vaste) breedte hebben, kolom 1 is bijvoorbeeld geen pixel gekrompen in screenshot #2.
Verdwijnt de verticale scrollbalk uit screenshot #1 in #2?

[Tarabass]

Ik denk dat je zoiets zoekt. Als je de pagenizer in de footer tenminste ook zou willen, omdat je het hier niet over hebt gehad maar wel op ed screenshots te zien is..

code:

<!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="nl" lang="nl">
<head>
<title>100% height with bottom footer</title>
<style type="text/css" media="screen">
*{padding: 0;margin: 0;}
html,body {
    height:100%; /* needed for container min-height */
    margin: 0 50px;
    color:#000;
    font-family:arial,sans-serif;
    font-size:small;
    background: #808080;
}

div#wrapper{
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    margin: 0 auto;
    position:relative; /* needed for footer positioning*/
    background-color: #fff;
}
div#header {
    height: 80px;
    background:#ddd;
    border-bottom:6px double #808080;
}
div#nav{
    height:30px;
    border-bottom: 1px solid #808080;
}
div#left{
    width: 150px;
    position: absolute;
    top: 116px;
    left: 0;
    bottom: 0px;
    border-right: 1px dotted #808080;
}
div#content{
    padding: 10px;
    overflow: auto;
    position: absolute;
    top: 116px;
    left: 151px;
    right:0px;
    bottom: 56px;
}
div#footer {
    height: 40px;
    position: absolute;
    left: 151px;
    right: 0px;
    bottom: 0; /* stick to bottom */
    background:#ddd;
    border-top:6px double #808080;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="left"></div>
    <div id="content">
        <h1>Positioning</h1>

        The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.

        Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

        There are four different positioning methods.
        Static Positioning

        HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

        Static positioned elements are not affected by the top, bottom, left, and right properties.
        Fixed Positioning

        An element with fixed position is positioned relative to the browser window.

        It will not move even if the window is scrolled:
    </div>
    <div id="footer"></div>
</div>
</body>
</html>