[CSS] Site 100% hoog
Hey,
Ik ben momenteel mijn nieuwe portfolio layout aan het slicen. Hij is eigenlijk zo goed als klaar. Enkel zou ik nog willen dat hij heel de pagina vult in de hoogte. Dus het grijze vlak zou dus langer moeten worden naargelang de pagina. Ik heb al goed rondgezocht en al overal height:100% aangegeven maar het wil gewoon niet lukken. Weet iemand hoe het wél moet?
Dit is de url: http://www.freshcreations.be/klanten/nieuw/
Ik ga hier niet mijn hele code posten omdat ik niet weet welke stukken relevant zijn. Ik neem aan dat jullie zelf de CSS en Xhtml terugvinden?
Alvast bedankt,
Ik ben momenteel mijn nieuwe portfolio layout aan het slicen. Hij is eigenlijk zo goed als klaar. Enkel zou ik nog willen dat hij heel de pagina vult in de hoogte. Dus het grijze vlak zou dus langer moeten worden naargelang de pagina. Ik heb al goed rondgezocht en al overal height:100% aangegeven maar het wil gewoon niet lukken. Weet iemand hoe het wél moet?
Dit is de url: http://www.freshcreations.be/klanten/nieuw/
Ik ga hier niet mijn hele code posten omdat ik niet weet welke stukken relevant zijn. Ik neem aan dat jullie zelf de CSS en Xhtml terugvinden?
Alvast bedankt,
Gewijzigd op 01/01/1970 01:00:00 door Cedric
Mooie layout. Ik zal even voor je googlelen :) (help je mee?)
edit: http://ep2.nl/tutorials/html2/tut3.html
edit2:
html,body {
height: 100%;
}
edit: http://ep2.nl/tutorials/html2/tut3.html
edit2:
html,body {
height: 100%;
}
Gewijzigd op 01/01/1970 01:00:00 door Onbekend Onbekend
Idd een erg mooie layout
Met html,body 100% toe te voegen lukt het niet..
Gewijzigd op 01/01/1970 01:00:00 door Cedric
Klopt. Het valt niet mee, maar met een aantal hacks kan het wel. Zie de CSS van mijn site: www.jankoehoorn.nl
Als Jan Koehoorn al zegt dat het niet meevalt dan is gewoon onmogelijk :P Ik zal eens kijken op je site of ik er iets van kan maken. Maar ik betwijfel of het lukt ... :S
Edit:
Het lukt niet hoor Jan, dit is nu de 'relevante' CSS die ik nu heb:
Helaas ziet de site er dan zo uit.. http://www.freshcreations.be/klanten/nieuw/
Edit:
Het lukt niet hoor Jan, dit is nu de 'relevante' CSS die ik nu heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
body{
font-family:Arial;
font-size:11px;
margin:0;
}
html, body{
height: 100%;
}
#container{
width:800px;
margin:0px auto;
padding:0px;
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#bgcontainer{
width:800px;
float:left;
position: relative;
min-height: 100%;
height: 100%;
height: auto;
background:#e8e8e8;
}
html>body #bgcontainer {
height: auto;
}
#footer{
width:771px;
height:31px;
position: absolute;
bottom: 0;
font-size:14px;
padding:60px 29px 0 0;
text-align:right;
color:#FFFFFF;
float:left;
background:url(images/footer.jpg);
}
#bottombar{
width:800px;
height:30px;
position: absolute;
bottom: 0;
float:left;
background:url(images/bottombar.jpg);
}
font-family:Arial;
font-size:11px;
margin:0;
}
html, body{
height: 100%;
}
#container{
width:800px;
margin:0px auto;
padding:0px;
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#bgcontainer{
width:800px;
float:left;
position: relative;
min-height: 100%;
height: 100%;
height: auto;
background:#e8e8e8;
}
html>body #bgcontainer {
height: auto;
}
#footer{
width:771px;
height:31px;
position: absolute;
bottom: 0;
font-size:14px;
padding:60px 29px 0 0;
text-align:right;
color:#FFFFFF;
float:left;
background:url(images/footer.jpg);
}
#bottombar{
width:800px;
height:30px;
position: absolute;
bottom: 0;
float:left;
background:url(images/bottombar.jpg);
}
Helaas ziet de site er dan zo uit.. http://www.freshcreations.be/klanten/nieuw/
Gewijzigd op 01/01/1970 01:00:00 door Cedric
*Kickje*
100% hoogmaken is heel simpel, ik doe het altijd zo:
html,body{
height: 100%;
margin: 0;
padding: 0;
}
gr. leroy
html,body{
height: 100%;
margin: 0;
padding: 0;
}
gr. leroy
voeg aan je
#container{
background:e8e8e8;
}
toe en dan ben je er volgens mij.
bijna:trouwens

#container{
background:e8e8e8;
}
toe en dan ben je er volgens mij.
bijna:trouwens

Gewijzigd op 01/01/1970 01:00:00 door bart van der veen
Offtopic:
@Jan: "U kunt deze pagina het best bekijken in alle browsers op elke schermgrootte :-)" LOL ^^
@Cedric: Check je site in IE, helemaal verziekt!!!!!
(voor de rest geen ideej dus.....)
@Jan: "U kunt deze pagina het best bekijken in alle browsers op elke schermgrootte :-)" LOL ^^
@Cedric: Check je site in IE, helemaal verziekt!!!!!
(voor de rest geen ideej dus.....)
hier toont ie in safari wel hoogte 100% hoor ;)
100% hoogte is niet simpel en gaat niet crossbrowser zonder hacks. Ik maak wel even een voorbeeld, want de vraag komt vaker voor.
Bij mij ziet de vorgeving van de site er erg verpest uit omdat IE hem niet goed weergeeft http://img407.imageshack.us/my.php?image=asdfajs1.jpg
Dit schiet al een heel stuk op. Alleen IE 7 doet moeilijk en da's wel een belangrijke browser. Affijn, je hebt een beginnetje ;-)
Edit:
IE 6 rendert hem overigens prima
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
'Jan:
Dit schiet al een heel stuk op. Alleen IE 7 doet moeilijk en da's wel een belangrijke browser. Affijn, je hebt een beginnetje ;-)
Edit:
IE 6 rendert hem overigens prima
Bij mij doet IE7 het prima bij mij...
Jan dat ziet er handig uit, op de / in je meta tag is die ook volledig validated (ik ben eerder wel andere niet valid oplossingen tegengekomen)
@Gamer13 bij mij heeft IE7 een heel dun wit randje, maar dat zal de meeste mensen niet opvallen.
@Gamer13 bij mij heeft IE7 een heel dun wit randje, maar dat zal de meeste mensen niet opvallen.
Gewijzigd op 01/01/1970 01:00:00 door TJVB tvb
Bij mij doet ie het ook perfect op IE7. Geen klein wit randje.
Gewijzigd op 01/01/1970 01:00:00 door PHP erik
'GaMer13:
Bij mij doet IE7 het prima bij mij...
'Jan:
Dit schiet al een heel stuk op. Alleen IE 7 doet moeilijk en da's wel een belangrijke browser. Affijn, je hebt een beginnetje ;-)
Edit:
IE 6 rendert hem overigens prima
Bij mij doet IE7 het prima bij mij...
Oh? Da's gek. Ik krijg extra margins rechts en onder.
Edit:
Ik snap het al. IE7 stond bij mij niet op de standaard lettergrootte. Als ik hem op normaal zet werkt het. Dat is trouwens niet wat je zou willen, maar goed, je hebt nu een werkbaar uitgangspunt.
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Quote:
Je wordt oud Jan ;-)IE7 stond bij mij niet op de standaard lettergrootte.
@ PHPerik: Laten we het hopen!
Klopt, het verkeerde doctype stond er boven (HTML4 strict). Nu valideert hij.
Quote:
Jan dat ziet er handig uit, op de / in je meta tag is die ook volledig validated (ik ben eerder wel andere niet valid oplossingen tegengekomen)
Klopt, het verkeerde doctype stond er boven (HTML4 strict). Nu valideert hij.
Edit:
Ik heb trouwens nog een andere manier gevonden, met twee hacks erin. Kijk maar welke je leuker vindt ;-)
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Ik was dus bezig hem goed te maken in IE6, zoals je in maikel zijn screenshot ziet was het nix waard :) Enkel heb ik nog problemen met die reactie van de klant. Dat verpest het nog een beetje. Ik zit dus weer met de css code waarmee ik begon... :S




