Tijden veranderen
CSS 100% height 2 kolommen.
Ik ben bezig met een opzet van een lay-out, voor een product welke ik op de markt wil brengen. Echter loop ik een beetje tegen een CSS probleempje aan. En hij is vast niet moeilijk, maar ik krijg hem niet voor elkaar en hoop een beetje op jullie hulp. Het volgende heb ik:
afbeelding
Zoals je al ziet staan er pijltjes. Dit is het geheel die ik 100% hoogte wil geven met background wit en border 1px zwart. Het probleem waar ik tegen aan loop is dat hij niet 100% vult. Terwijl dat wel lukt met het grijze vlak.
Het tweede probleem welke ik heb is dat de footer nu helemaal onderaan staat (is ook de bedoeling), maar als ik nu meer tekst heb blijft de footer op de voorgrond van de browser en alles wat erboven zit scrollt mee (footer is dus altijd zichtbaar en dat is wat ik juist niet wil).
Ik hoop een beetje dat jullie snappen wat ik bedoel en mogelijk kunnen jullie me opweg helpen.
De volgende code heb ik:
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="container">
<div id="header">header</div>
<div id="element">
<div id="content">
<div id="horizontaal_menu">Horizontale navigatie</div>
<div id="left_side">Navigatie links</div>
<div id="right_side">Content rechts</div>
<div id="trans_foot"></div>
</div>
</div>
<div id="footer">
<div id="footer_tekst">footer</div>
</div>
</div>
<div id="header">header</div>
<div id="element">
<div id="content">
<div id="horizontaal_menu">Horizontale navigatie</div>
<div id="left_side">Navigatie links</div>
<div id="right_side">Content rechts</div>
<div id="trans_foot"></div>
</div>
</div>
<div id="footer">
<div id="footer_tekst">footer</div>
</div>
</div>
CSS (relevante code):
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
#container {
width: 100%;
font-family: verdana, sans-serif;
color: #000;
height: 100%;
margin-top: -8px;
margin-left: -8px;
}
#header {
background-color: #37434f;
width: 100%;
padding-right: 16px;
color: #000;
height: 80px;
border-bottom: 2px solid #d1dfec;
}
#element
{
width: 1000px;
height: 100%;
left: 50%;
margin-left: -500px; /* - (width/2) */
position: relative;
background-color: #FFF;
}
#content {
width: 1000px;
height: 100%;
}
#horizontaal_menu {
height: 40px;
width: 100%;
background-image: url(../images/menu_bar.png);
}
#left_side{
background: #CCC;
border-left: 1px solid #333;
border-right: 2px solid #333;
color: #000;
height: 100%;
position: fixed;
width: 197px;
float: left;
}
#right_side{
background: #FFF;
color: #000;
height: auto;
width: 799px;
border-right: 1px solid #333;
float: right;
}
#right_in {
height: 100%;
width: 800px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #000;
text-align: left;
margin: 5px;
}
#footer {
background-color: #37434f;
height: 80px;
width: 100%;
padding-right: 16px;
border-top: 2px solid #d1dfec;
position: fixed;
bottom: 0px;
}
#footer_tekst {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
float: right;
margin: 28px;
color:#FFF;
}
width: 100%;
font-family: verdana, sans-serif;
color: #000;
height: 100%;
margin-top: -8px;
margin-left: -8px;
}
#header {
background-color: #37434f;
width: 100%;
padding-right: 16px;
color: #000;
height: 80px;
border-bottom: 2px solid #d1dfec;
}
#element
{
width: 1000px;
height: 100%;
left: 50%;
margin-left: -500px; /* - (width/2) */
position: relative;
background-color: #FFF;
}
#content {
width: 1000px;
height: 100%;
}
#horizontaal_menu {
height: 40px;
width: 100%;
background-image: url(../images/menu_bar.png);
}
#left_side{
background: #CCC;
border-left: 1px solid #333;
border-right: 2px solid #333;
color: #000;
height: 100%;
position: fixed;
width: 197px;
float: left;
}
#right_side{
background: #FFF;
color: #000;
height: auto;
width: 799px;
border-right: 1px solid #333;
float: right;
}
#right_in {
height: 100%;
width: 800px;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
color: #000;
text-align: left;
margin: 5px;
}
#footer {
background-color: #37434f;
height: 80px;
width: 100%;
padding-right: 16px;
border-top: 2px solid #d1dfec;
position: fixed;
bottom: 0px;
}
#footer_tekst {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
float: right;
margin: 28px;
color:#FFF;
}
alvast bedankt
Gewijzigd op 31/01/2011 16:32:14 door Bas IJzelendoorn
2) De position: fixed; zorgt hiervoor. Als je hem onderaan wilt hebben moet je eens zoeken op sticky footer en anders moet je gewoon clearen (voorbeeld)
Nog wat andere tips:
- Probeer de url zoals bij url() tussen quotes te zetten. Dit is beter, doe dit ook voor het eerste lettertype.
- margin kan je veel beter in 1 regel zetten:
Code (php)
1
margin: margin-top margin-right margin-bottom margin-left;
Maar dat maakt helaas nog niet de gewenste situatie. Ik gebruik nu de code als welke jij in het 1e voorbeeld aangaf:
CSS:
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
62
63
64
65
66
67
68
69
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
62
63
64
65
66
67
68
69
body {
margin: 0;
padding: 0;
background-color: #435667;
}
#header {
background-color: #37434f;
width: 100%;
padding-right: 16px;
color: #000;
height: 80px;
border-bottom: 2px solid #d1dfec;
}
#wrapper {
margin: 0 auto;
width: 1000px;
background: #999;
}
#sidebarleft {
float: left;
width: 197px;
border-right: 1px solid #333;
}
#content {
color: #000;
background-color: #FFF;
width: 800px;
float: left;
}
#footer {
clear: both;
background-color: #37434f;
height: 80px;
border-top: 2px solid #d1dfec;
}body {
margin: 0;
padding: 0;
background-color: #435667;
}
#header {
background-color: #37434f;
width: 100%;
padding-right: 16px;
color: #000;
height: 80px;
border-bottom: 2px solid #d1dfec;
}
#wrapper {
margin: 0 auto;
width: 1000px;
background: #999;
}
#sidebarleft {
float: left;
width: 197px;
border-right: 1px solid #333;
}
#content {
color: #000;
background-color: #FFF;
width: 800px;
float: left;
}
#footer {
clear: both;
background-color: #37434f;
height: 80px;
border-top: 2px solid #d1dfec;
}
margin: 0;
padding: 0;
background-color: #435667;
}
#header {
background-color: #37434f;
width: 100%;
padding-right: 16px;
color: #000;
height: 80px;
border-bottom: 2px solid #d1dfec;
}
#wrapper {
margin: 0 auto;
width: 1000px;
background: #999;
}
#sidebarleft {
float: left;
width: 197px;
border-right: 1px solid #333;
}
#content {
color: #000;
background-color: #FFF;
width: 800px;
float: left;
}
#footer {
clear: both;
background-color: #37434f;
height: 80px;
border-top: 2px solid #d1dfec;
}body {
margin: 0;
padding: 0;
background-color: #435667;
}
#header {
background-color: #37434f;
width: 100%;
padding-right: 16px;
color: #000;
height: 80px;
border-bottom: 2px solid #d1dfec;
}
#wrapper {
margin: 0 auto;
width: 1000px;
background: #999;
}
#sidebarleft {
float: left;
width: 197px;
border-right: 1px solid #333;
}
#content {
color: #000;
background-color: #FFF;
width: 800px;
float: left;
}
#footer {
clear: both;
background-color: #37434f;
height: 80px;
border-top: 2px solid #d1dfec;
}
Html:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<div id="header"></div>
<div id="wrapper">
<div id="sidebarleft">Sidebar links<br />
<br />
<br />
<br />
<br />
d</div>
<div id="content">Content<br />
</div>
<div id="footer">footer</div>
</div>
<div id="wrapper">
<div id="sidebarleft">Sidebar links<br />
<br />
<br />
<br />
<br />
d</div>
<div id="content">Content<br />
</div>
<div id="footer">footer</div>
</div>
Het enige wat ik veranderd heb is:
- De header erbij gedaan
- De kleuren aangepast
- De <br /> 's weggehaald en geplaatst in de navigatie (en dan kom je terug op hetzelfde probleem als in mijn 1e bericht)
- En dan heb ik nog niet de footer aangepast o.i.d.
Dan is te zien in afbeelding2 dat de ruimte er nog steeds is
afbeelding 2
Gewijzigd op 31/01/2011 17:36:39 door Bas IJzelendoorn
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
content
{
width: 1000px;
min-height: 500px;
overflow: hidden;
background: url('../img/faux.png') left repeat-y #FFFFFF;
}
{
width: 1000px;
min-height: 500px;
overflow: hidden;
background: url('../img/faux.png') left repeat-y #FFFFFF;
}
Hierbij maak je dus een afbeelding aan net zo breed als je linker kolom en die noem je faux.png (of je veranderd de naam even).
Voor je 2e probleem google even op sticky footer...