Footer met CSS van Jan
Dit is een testje voor een site (let niet op de kleuren)
Ik heb al heeel veel tutorials gelezen over een sticky footer enz. Wat ik wil is een menu links, een content rechts (en als het content langer word dat hij niet onder het menu verdwijnt) en een footer die altijd onderaan de site staat (met een content die dan een stukje boven de footer ophoud, ongeacht hoeveel content erin staat)
Je kan er natuurlijk voor zorgen dat je nooit meer content hebt dan je pagina lang is, maar ik ben er al achter dat dit niet gaat lukken met deze site.
De vraag had eerst te maken met de header maar dat heb ik zelf al goed gekregen, nu heb ik alleen een footer die neit doet wat ik wil.
Onderaan mijn reply zie je dat ik de csstut4 van Jan Koehoorn gebruikt heb.
Gewijzigd op 01/01/1970 01:00:00 door J V
Zie hieronder mijn probleem.
Gewijzigd op 01/01/1970 01:00:00 door J V
Hij ziet er gewoon goed uit in FF en IE6, of zien jullie dingen die ik niet zie?
-edit-
Ik weet al wat jullie fout zagen, ik was op me stage aan de gang en ging ervanuit dat het lettertype Perpetua Titling MT was, maar het bleek dat ze die helemaal niet hadden daar dus ik zag een lettertype wat er niet uit zag. Ik had alles ingesteld op dat lettertype en nu kijk ik thuis en schrik me kapot.
Het ziet er niet uit. Dit heb ik nu gelukkig hersteld. (kijk de screenshots van hieronder maar, daar zag het er nog redelijk uit que tekst)
-edit-
Met veel content (dus langer dan de venstergrootte) ziet het er goed uit, maar zodra de content kleiner is dan het venster, gaat het fout bij IE (zoals gewoonlijk)
Hier een link van hoe het er in firefox uitziet:
Firefox
En hier van IE:
Internet Explorer
(ik heb de csstut4 van Jan gebruikt -klik- maar
hij wil het maar niet goed doen bij mij in IE)
Zie ik iets over het hoofd?
Gewijzigd op 01/01/1970 01:00:00 door J V
Dit kan ook komen door de oude word die er hier opstaat, maar ik kan er niet vanuit gaan dat iedereen die de website bekijkt de nieuwe word heeft (2003 of hoger).
Kan je dit omzeilen of is dat onmogelijk en moet ik gewoon Times New Roman als 2e lettertype kiezen? (omdat die iedereen heeft)
Het probleem van hierboven is nog steeds niet opgelost.
arial
verdana
tahoma
trebuchet ms
Quote:
Dat is dus ook waarom je een font-family gebruikt waarbij je meerdere fonts opgeeft. Als 1 font niet geladen kan worden bij een gebruiker, wordt het tweede in de rij geprobeerd...Kan je dit omzeilen of is dat onmogelijk en moet ik gewoon Times New Roman als 2e lettertype kiezen? (omdat die iedereen heeft)
Blanche schreef op 07.12.2007 14:37:
Quote:
Dat is dus ook waarom je een font-family gebruikt waarbij je meerdere fonts opgeeft. Als 1 font niet geladen kan worden bij een gebruiker, wordt het tweede in de rij geprobeerd...Kan je dit omzeilen of is dat onmogelijk en moet ik gewoon Times New Roman als 2e lettertype kiezen? (omdat die iedereen heeft)
Dat had ik nu ook, maar ik had de site ingesteld op het lettertype dat ik bij me stage op het scherm zag. Thuis kwam ik erachter de site er niet uitzag, omdat ik daar de 1e in mijn rijtje van Font-familie zag en op me stage de 5e pas (die niet mooi was trouwens).
Nu heb ik alles ingesteld op de 1e font (Perpetua Titling MT) en Times New Roman word de 2e font. Die heeft iedereen standaard bij windows zitten.
Maar nu zit ik dus nog te klooien met die footer, want op de manier zo als jan het heeft gedaan lukt neit bij mij, ik zal vast wat over het hoofd zien, maar ik kan er niet achterkomen wat het nou is :S.
Zou het liggen aan mijn volgorde van dingen in de CSS. Want in welke volgorde (van boven naar beneden) je alles zet maakt ook nog uit.
Is er een ideale volgorde waar je je altijd aan kunt houden?
Hier mijn html:
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Woonwerkwinkel 'de Dussel'</title>
<link href="css2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="header">
<h1>Woonwerkwinkel <br/>'de Dussel'</h1>
</div>
<!-- <div id="wrapper"> -->
<div class="menu">
<div id="home">Home</div>
<div id="nieuws">Nieuws</div>
<div id="artikelen">Artikelen</div>
<div id="gastenboek">Gastenboek</div>
<div id="contact">Contact</div>
</div>
<!-- <div id="wrapper"> -->
<div id="content">
<p>Welkom in mijn woonwinkel 'de Dussel' landleven in en om 't huis.</p><br />
<p>'de Dussel' Is een woonwinkel waar een combinatie van leuke, oude en stoere landelijke woonaccessoires te koop zijn. </p>
<p>Alle spullen van de Dussel zijn uniek, niet te duur maar wel bijzonder en er is voor iedereen wel iets te vinden.</p><br />
<p>Met veel zorg wordt er door mij gezocht naar de mooiste, leukste en vooral aparte decoraties voor in en om 't huis. </p>
<p>Je kunt zeggen dat mijn hobby uitgegroeid is naar werk en wat is er nou mooier dan van je hobby je werk te maken.</p><br />
<p>Ik probeer een stoere mix te maken van oude en nieuwe, betaalbare woon- en tuindecoraties. De oude spullen verzamel ik door de boer op te gaan of via inkoop op diverse antiekveilingen.</p>
</div>
<br class="clear" />
</div>
<div id="footer"><hr/>
<p>© 2007 Jezelf</p>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Woonwerkwinkel 'de Dussel'</title>
<link href="css2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="header">
<h1>Woonwerkwinkel <br/>'de Dussel'</h1>
</div>
<!-- <div id="wrapper"> -->
<div class="menu">
<div id="home">Home</div>
<div id="nieuws">Nieuws</div>
<div id="artikelen">Artikelen</div>
<div id="gastenboek">Gastenboek</div>
<div id="contact">Contact</div>
</div>
<!-- <div id="wrapper"> -->
<div id="content">
<p>Welkom in mijn woonwinkel 'de Dussel' landleven in en om 't huis.</p><br />
<p>'de Dussel' Is een woonwinkel waar een combinatie van leuke, oude en stoere landelijke woonaccessoires te koop zijn. </p>
<p>Alle spullen van de Dussel zijn uniek, niet te duur maar wel bijzonder en er is voor iedereen wel iets te vinden.</p><br />
<p>Met veel zorg wordt er door mij gezocht naar de mooiste, leukste en vooral aparte decoraties voor in en om 't huis. </p>
<p>Je kunt zeggen dat mijn hobby uitgegroeid is naar werk en wat is er nou mooier dan van je hobby je werk te maken.</p><br />
<p>Ik probeer een stoere mix te maken van oude en nieuwe, betaalbare woon- en tuindecoraties. De oude spullen verzamel ik door de boer op te gaan of via inkoop op diverse antiekveilingen.</p>
</div>
<br class="clear" />
</div>
<div id="footer"><hr/>
<p>© 2007 Jezelf</p>
</div>
</div>
</body>
</html>
En hier mijn 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/* CSS Document */
* {
margin: 0;
padding: 0;
}
h1 {
font-size: 40px;
}
html,body {
height: 100%; /* HEEL BELANGRIJK! */
font-family: "Perpetua Titling MT", "Times New Roman", "Comic Sans MS";
font-size: 16px;
font-style: normal;
background-image: /* url(images/background_totaal.gif) */;
background-color: #ffffdb;
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
}
.clear {
clear: both; /* deze class gaan we gebruiken om de twee floats #left en #right te clearen. */
}
#container {
position: relative; /* De footer wordt absoluut gepositioneerd, relatief aan #container. Dus position: relative moet dan hier toegevoegd worden */
width: 800px;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
margin: 0px auto; /*deze div centreren*/
background: #625c4f;
}
html>body #container {
height: auto;
}
#wrapper {
bottom: 10px;
}
#header {
position: relative;
height: 100px;
width:;
top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 200px;
background: #fcccd0;
text-align: center;
}
.menu {
width: 200px;
float: left;
height: auto;
background-color:;
margin-bottom: 2em; /* dezelfde hoogte als de hoogte van #footer, anders zal de tekst in deze div onderaan achter de footer vallen omdat #footer absoluut gepositioneerd is */
}
#home {
/* width: 160px;
height: 40px;
background: #fcccd0;
margin: 20px 0px 20px 0px; */
}
#nieuws {
background-image:;
}
#artikelen {
background-image:;
}
#gastenboek {
background-image:;
}
#contact {
background-image:;
}
#home, #nieuws, #artikelen, #gastenboek, #contact {
font-size: 20px;
width: 150px;
height: 40px;
background: #fcccd0;
margin: 20px 20px 20px 20px;
padding: 5px;
}
#content {
width: 570px;
float: left;
background: #ffffdb;
height: auto;
padding: 5px;
margin-top: 20px;
margin-bottom: 2em; /* dezelfde hoogte als de hoogte van #footer, anders zal de tekst in deze div onderaan achter de footer vallen omdat #footer absoluut gepositioneerd is */
}
#footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
font-size: 12px;
/* height: 1.45em; */
/* vertical-align: bottom; */
text-align: center;
color: #000000;
background-color: #625c4f;
}
* {
margin: 0;
padding: 0;
}
h1 {
font-size: 40px;
}
html,body {
height: 100%; /* HEEL BELANGRIJK! */
font-family: "Perpetua Titling MT", "Times New Roman", "Comic Sans MS";
font-size: 16px;
font-style: normal;
background-image: /* url(images/background_totaal.gif) */;
background-color: #ffffdb;
background-repeat: repeat-y;
background-position: center;
background-attachment: fixed;
}
.clear {
clear: both; /* deze class gaan we gebruiken om de twee floats #left en #right te clearen. */
}
#container {
position: relative; /* De footer wordt absoluut gepositioneerd, relatief aan #container. Dus position: relative moet dan hier toegevoegd worden */
width: 800px;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
margin: 0px auto; /*deze div centreren*/
background: #625c4f;
}
html>body #container {
height: auto;
}
#wrapper {
bottom: 10px;
}
#header {
position: relative;
height: 100px;
width:;
top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 200px;
background: #fcccd0;
text-align: center;
}
.menu {
width: 200px;
float: left;
height: auto;
background-color:;
margin-bottom: 2em; /* dezelfde hoogte als de hoogte van #footer, anders zal de tekst in deze div onderaan achter de footer vallen omdat #footer absoluut gepositioneerd is */
}
#home {
/* width: 160px;
height: 40px;
background: #fcccd0;
margin: 20px 0px 20px 0px; */
}
#nieuws {
background-image:;
}
#artikelen {
background-image:;
}
#gastenboek {
background-image:;
}
#contact {
background-image:;
}
#home, #nieuws, #artikelen, #gastenboek, #contact {
font-size: 20px;
width: 150px;
height: 40px;
background: #fcccd0;
margin: 20px 20px 20px 20px;
padding: 5px;
}
#content {
width: 570px;
float: left;
background: #ffffdb;
height: auto;
padding: 5px;
margin-top: 20px;
margin-bottom: 2em; /* dezelfde hoogte als de hoogte van #footer, anders zal de tekst in deze div onderaan achter de footer vallen omdat #footer absoluut gepositioneerd is */
}
#footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
font-size: 12px;
/* height: 1.45em; */
/* vertical-align: bottom; */
text-align: center;
color: #000000;
background-color: #625c4f;
}
Dit werkt dus goed in FF, maar niet in IE. :S
Gewijzigd op 01/01/1970 01:00:00 door J V
Wil je dat de footer altijd onder aan je pagina hangt?
Of aan je body kleeft?
Het ziet ernaar uit alsof je sceneone hebt gebruikt voor je css..
Deze heb ik ook gebruikt.
Je zou even mijn css kunnen bekijken:
Gebruik ook een footer.. http://www.trigalti.nl
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
body {
font : 12px Arial, Helvetica, sans-serif;
color: #EDEDED;
background-color: #505050;
margin: 0px;
padding: 0px;
text-align: center;
}
html, body {
height: 100%; /* hl belangrijk */
}
a:link, a:visited{
color: #FFFFFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:hover, a:active{
color: #FFFFFF;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
/* Alle fonts */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #EDEDED;
text-align: left;
margin: 3px 0px 3px 3px;
padding: 5px;
}
.geen_border {
border: 0px ;
padding: 0px;
margin: 0px;
}
legend {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
color: #EDEDED;
border: #0070B9 solid 1px;
padding: 2px 6px;
margin: 3px;
}
fieldset {
border: 1px solid #0070B9;
margin: 2px 0px 0px 2px;
padding: 0px;
}
/* ALLE DIVS */
div#inhoud {
background-color: #373737;
text-align: center;
position: relative;
margin: -15px auto 0 auto;
padding: 0px;
width: 700px;
min-height: 100%;
height: 100%;
}
div#header {
position: absolute;
float: left;
top: 0px;
left: 16px;
height: 124px;
width: 667px;
background-image: url(plaatjes/header.jpg);
background-repeat: no-repeat;
padding: 30px 0 0 0;
}
img {
float: left;
border-style: none;
padding: 0px;
margin: 0px;
}
div.img {
margin: 3px 0px 5px 3px;
padding: 5px auto;
}
div.img img {
display:
margin: 3px;
float: clear;
padding: 5px 5px 5px 5px;
}
/* Het menu + aanpassingen */
div#menubalk {
background-image: url(plaatjes/menu.jpg);
position: absolute;
left: 0px;
top: 124px;
height: 24px;
width: 667px;
float: left;
}
span{
display: none;
}
ul{
list-style: none;
margin: 0px;
padding: 0px 0 0 5px;
}
a.menu{
float: left;
width: 90px;
height: 24px;
}
li{
margin: 0 0 0 16px;
float: left;
}
/* Einde menu en aanpassingen*/
/* Tekstvak */
div#tekst {
background-color: #3C3C3C;
position: absolute;
left: 16px;
top: 148px;
width: 667px;
text-align: left;
}
div#footer{
position: relative;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0 auto 0 auto;
padding: 0px 0 0 0;
background: #909090;
height: 15px;
width: 700px;
color: #FFFFFF;
}
/* Einde alle DIV's*/
font : 12px Arial, Helvetica, sans-serif;
color: #EDEDED;
background-color: #505050;
margin: 0px;
padding: 0px;
text-align: center;
}
html, body {
height: 100%; /* hl belangrijk */
}
a:link, a:visited{
color: #FFFFFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
a:hover, a:active{
color: #FFFFFF;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
/* Alle fonts */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #EDEDED;
text-align: left;
margin: 3px 0px 3px 3px;
padding: 5px;
}
.geen_border {
border: 0px ;
padding: 0px;
margin: 0px;
}
legend {
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 13px;
color: #EDEDED;
border: #0070B9 solid 1px;
padding: 2px 6px;
margin: 3px;
}
fieldset {
border: 1px solid #0070B9;
margin: 2px 0px 0px 2px;
padding: 0px;
}
/* ALLE DIVS */
div#inhoud {
background-color: #373737;
text-align: center;
position: relative;
margin: -15px auto 0 auto;
padding: 0px;
width: 700px;
min-height: 100%;
height: 100%;
}
div#header {
position: absolute;
float: left;
top: 0px;
left: 16px;
height: 124px;
width: 667px;
background-image: url(plaatjes/header.jpg);
background-repeat: no-repeat;
padding: 30px 0 0 0;
}
img {
float: left;
border-style: none;
padding: 0px;
margin: 0px;
}
div.img {
margin: 3px 0px 5px 3px;
padding: 5px auto;
}
div.img img {
display:
margin: 3px;
float: clear;
padding: 5px 5px 5px 5px;
}
/* Het menu + aanpassingen */
div#menubalk {
background-image: url(plaatjes/menu.jpg);
position: absolute;
left: 0px;
top: 124px;
height: 24px;
width: 667px;
float: left;
}
span{
display: none;
}
ul{
list-style: none;
margin: 0px;
padding: 0px 0 0 5px;
}
a.menu{
float: left;
width: 90px;
height: 24px;
}
li{
margin: 0 0 0 16px;
float: left;
}
/* Einde menu en aanpassingen*/
/* Tekstvak */
div#tekst {
background-color: #3C3C3C;
position: absolute;
left: 16px;
top: 148px;
width: 667px;
text-align: left;
}
div#footer{
position: relative;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 0 auto 0 auto;
padding: 0px 0 0 0;
background: #909090;
height: 15px;
width: 700px;
color: #FFFFFF;
}
/* Einde alle DIV's*/
Gewijzigd op 01/01/1970 01:00:00 door Simon
Simon schreef op 10.12.2007 10:33:
Wat wil je nu precies bereiken??
Wil je dat de footer altijd onder aan je pagina hangt?
Of aan je body kleeft?
Het ziet ernaar uit alsof je sceneone hebt gebruikt voor je css..
Deze heb ik ook gebruikt.
Je zou even mijn css kunnen bekijken:
Gebruik ook een footer.. http://www.trigalti.nl
Wil je dat de footer altijd onder aan je pagina hangt?
Of aan je body kleeft?
Het ziet ernaar uit alsof je sceneone hebt gebruikt voor je css..
Deze heb ik ook gebruikt.
Je zou even mijn css kunnen bekijken:
Gebruik ook een footer.. http://www.trigalti.nl
Code (php)
1
knip
Wat ik wil is een footer die onderaan mijn scherm staat. Bij een klein browservenster moet hij nog steeds onderaan staan. (als je bij jou site je scherm verkleint krijg je een scrollbalk, dat wil ik dus niet)
Als mijn content langer word dan mijn scherm, moet me footer meerekken.
Als er weinig content is moet hij onderaan me scherm staan en bij meer content moet hij gewoon onder mijn content staan.
Deze methode word ook wel de sticky footer methode genoemd.
Er is geen betere...
http://www.jankoehoorn.nl/phphulp/csstut4/voorbeeld1.php
winkie schreef op 10.12.2007 11:08:
CSStut 4 van Jan Koehoorn moet dan toch wel de oplossing zijn hoor!
Er is geen betere...
http://www.jankoehoorn.nl/phphulp/csstut4/voorbeeld1.php
Er is geen betere...
http://www.jankoehoorn.nl/phphulp/csstut4/voorbeeld1.php
Daar ben ik dus me aan het klooien en ik zie nu pas dat het niet is wat ik zoek.
Zodra ik een header toevoeg, gaat het al fout, dan doet IE namelijk de footer onder de tekst plaatsen en niet onderaan het scherm.
Plus dat hij als achtergrond kleur dezelfde kleur gebruikt als ze content. Dat wil ik niet, ik wil de kleur waar mijn tekst in staat anders dan de kleur op de pagina. Mijn kleur van me tekst moet dus ongeacht hoeveel content altijd tot onderaan me footer lopen. Met weinig content tot onderaan mijn footer en met veel content doet hij dit automatisch al.
En bij Jan zijn csstut4 is dit niet het geval. Zijn content stop onder zijn tekst waardoor je daaronder de achtergrondkleur van zijn pagina ziet (groen).
Geef zijn content maar eens de achtergrondkleur rood, dan zie je wat ik bedoel.
En wat die achtergrondkleur betreft; ja dat is logisch he? Maar je kan dit nog ondervangen door een afbeelding in de container te zetten met dezelfde afmetingen qua breedte van je tekst, dan is t opgelost.
winkie schreef op 10.12.2007 11:31:
Dan moet je de header wel op de goede manier en op de goede plek zetten natuurlijk!
En wat die achtergrondkleur betreft; ja dat is logisch he? Maar je kan dit nog ondervangen door een afbeelding in de container te zetten met dezelfde afmetingen qua breedte van je tekst, dan is t opgelost.
En wat die achtergrondkleur betreft; ja dat is logisch he? Maar je kan dit nog ondervangen door een afbeelding in de container te zetten met dezelfde afmetingen qua breedte van je tekst, dan is t opgelost.
Nee, want als de tekst een stuk boven de footer stopt gaat het fout, dan zal je alsnog krijgen dat de achtergrond stopt waar de tekst ophoud. Dan loopt de achtergrond niet door tot aan de footer.
Hier Zie je dat hij goed werkt in IE maar niet in FF. Hoe komt dat?
Hier Hier heeft hij minder tekst en werkt hij in IE en FF goed. Dus alleen met meer tekst in de content gaat het fout bij FF.
Ik wil dus dat hij in FF hetzelfde doet als in IE (klinkt raar maar ik wil het echt zo)
Gewijzigd op 01/01/1970 01:00:00 door J V
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#content {
background:transparent none repeat fixed 0%;
height:auto;
margin-top:20px;
margin-left:200px; /* Zelde als breedte van #menu */
padding:5px;
width:570px;
}
background:transparent none repeat fixed 0%;
height:auto;
margin-top:20px;
margin-left:200px; /* Zelde als breedte van #menu */
padding:5px;
width:570px;
}
Blanche schreef op 10.12.2007 12:25:
Maak van de css voor #content eens het volgende:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#content {
background:transparent none repeat fixed 0%;
height:auto;
margin-top:20px;
margin-left:200px; /* Zelde als breedte van #menu */
padding:5px;
width:570px;
}
background:transparent none repeat fixed 0%;
height:auto;
margin-top:20px;
margin-left:200px; /* Zelde als breedte van #menu */
padding:5px;
width:570px;
}
Potverdriedubbeltjes, ik was al bijna op zoek gegaan naar iets anders, namelijk dit: http://www.cssplay.co.uk/layouts/basics2.html
Maar jij komt gewoon even met het goede antwoord. Echt onwijs bedankt!
Nu wil ik nog wel eventjes vragen hoe je dat precies gedaan hebt.
Je hebt nu de div transparant gemaakt, maar dat is hij toch altijd al? (als je geen color geeft?)
Het had dus met de float te maken?
En die dingen erna kan ik niet helemaal volgen. Ik zou het graag willen snappen.
En nogmaals onwijs bedankt hiervoor!!!
Gewijzigd op 01/01/1970 01:00:00 door J V
De float zorgt er namelijk voor dat de div zweeft boven andere divs. Daardoor zal de omvattende div niet meerekken als de content groter wordt. Maar als de float niet meer aanwezig is, zal de tekst niet meer in 1 rechte lijn blijven staan, het zal namelijk rondom het menu gaan kleven en ook onder het menu zal dus tekst staan. Vandaar dat ik een margin-left toegevoegd heb die gelijk is aan de breedte van het menu...
Edit:
typo
Gewijzigd op 01/01/1970 01:00:00 door Joren de Wit
Dan ga ik nog 1 keer lastig doen, en dat is vragen wat die: none, repeat, fixed en 0% doen?
-edit-
Als ik ze verwijder veranderd er helemaal niets qua lay-out. Deze kan ik dus gewoon weglaten?
Ik zal nog wel even een margin-bottom toevoegen aan de content, want nu loopt de tekst achter de footer door.
En alsnog onwijs bedankt, ik kan je wel zoenen! (maar aangezien jij vast geen meisje bent zal ik die rare dingen voor me houden ;))
Gewijzigd op 01/01/1970 01:00:00 door J V