[CSS] Site 100% hoog
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
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
Gewijzigd op 01/01/1970 01:00:00 door Cedric
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*
html,body{
height: 100%;
margin: 0;
padding: 0;
}
gr. leroy
#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
@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.
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 Koehoorn schreef op 20.08.2007 19:05:
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...
@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
Gewijzigd op 01/01/1970 01:00:00 door PHP erik
GaMer13 schreef op 20.08.2007 19:12:
Bij mij doet IE7 het prima bij mij...
Jan Koehoorn schreef op 20.08.2007 19:05:
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.
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