javascript hoogte instellen.

Door Bas Visscher op 22-01-2009 11:11

255 views

Hallo,
Css is voor mij helemaal nieuw, daarom vraag ik jullie hulp.
Ik heb mijn pagina zo ingedeeld.
linkerpaneel middenblok en rechts. het uitlijnen doet hij goed.
Hij maakt alleen de pagina maar 3 pixels lang. hoe kan dit?
als ik het vul met inhoud gaat hij wel langer maar allen het blok dat ik vul. i dit geval het middenblok. ik heb een boek dat zegt dat je bij height 100% moet invullen dit heb ik gedaan. maar het werkt niet.


@charset "utf-8";
/* CSS Document */
body {
text-align:center;
height: 100% ;
margin:0px;
padding:0px;
}


#linkervlak{ 
float: left;
width: 19% ;
height: 100%;
background-color:#333333;
margin:0px auto;
padding:0px;


}
#middenblok{
float: left ;
width: 60%;
background-color:#000000;
height: 100%;
margin:0px auto;
padding:0px;
text-align:center; color:#990000;
}
#rechtervlak{
float: left;
width: 19%;
heigt: 100%;
background-color: #333333;
margin:0px auto;
padding:0px;
}

Dennis Mertens

22-01-2009 11:18

Ik heb even niet zo snel de oplossing.

Maar als je dit uit een boek hebt geleerd, vind ik het een slecht boek.

Bij een 0-waarde (geen in principe), gebruik je geen eenheid.

Bas Visscher

22-01-2009 11:22

dus die margin en padding voeren eigenlijk niets uit?

Dennis Mertens

22-01-2009 11:44

Je zet ze op 0. Deze hoeven niet bij alle tags standaard op 0 te staan.

Robert Deiman

22-01-2009 11:45

zet in je CSS ook eens:

html{
heght:100%;
}

Bas Visscher

22-01-2009 11:46

ok ik probeer dat even, dankje.

Het werkt!
ik moest de heights bij de rest wel laten staan. maar het werkt nu dankjewel!

EDIT:
Kan je css id's tussen elkaar proppen?
ik krijg nu rechtsboven een wit vak omdat ik de banner ertussen heb gezet:
Als iemand mij een goede tut link kan geven is dat ook goed! :P
hier de code dan maar weer


@charset "utf-8";
/* CSS Document */
html{
height: 100%;
}
body {
text-align:center;
height: 100% ;
margin:0px;
padding:0px;
}
a:link{
color:#990000;
text-decoration: none;
}
a:visited{
color:#990000;
text-decoration: none;
}
a:hover{
background-color:#993300;
text-decoration: none;
}


#linkervlak{ 
float: left;
width: 20% ;
height: 100%;
background-color:#333333;
}
#middenblok{
float: left ;
width: 60%;
background-color:#000000;
height: 100%;
text-align:left; color:#990000;
a:link; color:#990000;
}
#banner{
float: left;
width: 60%;
background-color:#000000;
text-align:center; color:#990000;
}
#rechtervlak{
float: left;
width: 20%;
height: 100%;
background-color: #333333;
}

Reageren

Inloggen om te reageren