css footer + menu uitlijnen..
Ik ben vanaf gister al heel de dag bezig met het maken van een site, maar mijn css is niet bepaald goed.
Ik probeer namelijk iets wat me totaal niet lukt, en op internet echt al verschillende dingen erover gelezen, maar kom er totaal niet uit. Kunnen jullie mij misschien verder helpen?
Ik zal zo even de code plaatsen, met fletse kleuren. :)
Mijn probleem: Zodra de content langer word, moet de footer meegaan, en de 4 andere div elementen ook.
Ik zal de code even plaatsen en zal het uitleggen met de kleurtjes :)
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
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
* {
margin: 0;
padding: 0;
}
body, td {
font-family: arial;
font-size: 10pt;
background-color:#002d5c;
color: #00a4e4;
}
#container{
position: absolute;
left: 50%;
width: 1024px;
margin-left: -412px;
background-color:#9fa4a8;
}
#header {
width: 856px;
height: 179px;
background-color: #00FF00;
position: absolute;
}
#left_background {
width: 86px;
height: 768px;
background-color: #FF0000;
position:absolute;
left: -86px;
}
#left_sidebar{
width: 166px;
min-height: 517px;
background-color:#FFFFFF;
top: 179px;
position:absolute;
border-right:1px dotted grey;
}
#content{
width: 462px;
min-height: 517px;
background-color: #0000CC;
top: 179px;
position: absolute;
margin-left: 167px;
}
#right_sidebar{
width: 226px;
min-height: 517px;
background-color: #FFFFFF;
top: 179px;
position:absolute;
margin-left: 629px;
border-left:1px dotted grey;
}
#right_background{
width: 82px;
height: 768px;
left: 856px;
background-color: #FF0000;
position:absolute;
}
#footer{
width: 856px;
height: 72px;
background-color: #FFFF00;
position: absolute;
top: 696px;
}
margin: 0;
padding: 0;
}
body, td {
font-family: arial;
font-size: 10pt;
background-color:#002d5c;
color: #00a4e4;
}
#container{
position: absolute;
left: 50%;
width: 1024px;
margin-left: -412px;
background-color:#9fa4a8;
}
#header {
width: 856px;
height: 179px;
background-color: #00FF00;
position: absolute;
}
#left_background {
width: 86px;
height: 768px;
background-color: #FF0000;
position:absolute;
left: -86px;
}
#left_sidebar{
width: 166px;
min-height: 517px;
background-color:#FFFFFF;
top: 179px;
position:absolute;
border-right:1px dotted grey;
}
#content{
width: 462px;
min-height: 517px;
background-color: #0000CC;
top: 179px;
position: absolute;
margin-left: 167px;
}
#right_sidebar{
width: 226px;
min-height: 517px;
background-color: #FFFFFF;
top: 179px;
position:absolute;
margin-left: 629px;
border-left:1px dotted grey;
}
#right_background{
width: 82px;
height: 768px;
left: 856px;
background-color: #FF0000;
position:absolute;
}
#footer{
width: 856px;
height: 72px;
background-color: #FFFF00;
position: absolute;
top: 696px;
}
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//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>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left_background"></div>
<div id="left_sidebar"></div>
<div id="content">
<div id="contenttxt">
</div>
</div>
<div id="right_sidebar"></div>
<div id="right_background"></div>
<div id="footer"></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>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="left_background"></div>
<div id="left_sidebar"></div>
<div id="content">
<div id="contenttxt">
</div>
</div>
<div id="right_sidebar"></div>
<div id="right_background"></div>
<div id="footer"></div>
</div>
</body>
</html>
Zoals je ziet, zijn het behoorlijk felle kleurtjes.. ;)
Wat ik wil, is dat de footer sowieso onderaan komt te staan. Dus de rest moet ook mee. En zodra het blauwe vak groter word, moeten de rode en witte mee. De footer (Geel) natuurlijk ook.
Wie kan mij hiermee helpen? Want ik kom er echt helemaal niet meer uit :(
Alvast bedankt ;)
Gewijzigd op 01/01/1970 01:00:00 door Giel
Wat ik altijd doe, is de footer buiten mn container zetten, en deze css erbij:
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
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
*
{
margin: 0px;
padding: 0px;
}
#container
{
width: 980px;
margin: 0 auto;
min-height: 100%;
}
#sidebar-left
{
width: 200px;
float: left;
}
#sidebar-right
{
width: 780px;
float: left;
}
#footer
{
width: 980px;
margin: 0 auto;
clear: both;
}
{
margin: 0px;
padding: 0px;
}
#container
{
width: 980px;
margin: 0 auto;
min-height: 100%;
}
#sidebar-left
{
width: 200px;
float: left;
}
#sidebar-right
{
width: 780px;
float: left;
}
#footer
{
width: 980px;
margin: 0 auto;
clear: both;
}
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="container">
<div id="sidebar-left">
Links
</div>
<div id="sidebar-right">
Rechts
</div>
</div>
<div id="footer">
De footer
</div>
<div id="sidebar-left">
Links
</div>
<div id="sidebar-right">
Rechts
</div>
</div>
<div id="footer">
De footer
</div>
Voor de 2 kolommen in de container is een simpele float:left; en een breedte al genoeg. De breedtes van deze 2 kolommen mogen niet breder zijn dan die van de container!
Ik heb dit niet getest, maar hij zou t gewoon moeten doen.
edit: ik zie dat je heel vaak position:absolute gebruikt. Deze heb je (bijna) niet nodig.
Gewijzigd op 01/01/1970 01:00:00 door Tamara
Want mijn rechter sidebar is namelijk anders opgebouwd, maar ik zal even kijken naar wat je hebt gestuurd! Alvast bedankt!
voorbeeldje
En ik gebruik inderdaad vaak position:absolute, maar zoals ik al aangaf mijn css is niet bepaald goed. En zo werkte de site tenminste.. Maar niet met wat ik wil :(
Even de css aangepast voor je:
#sidebar-right
{
width: 780px;
float: left;
background: #FFF url(rightsidebar.png) no-repeat;
}
Even kijken of het pad naar het plaatje goed staat. En mocht de afbeelding niet goed uitlijnen, probeer dan bij de tag background het volgende erbij te zetten: left top
Nu kan je dat van die achtergrond afbeelding wel doen. Dit hoeft trouwens niet perse als beide kolommen verder wit zijn. dan geef je allebei de kolommen gewoon een background: #FFF; mee.
Dus als je nu #sidebar-left helemaal vult met tekst, en dan gaat de footer mee naar beneden, dat moet ook, maar dan moet #sidebar-right ook even lang worden..
Btw al bedankt voor je hulp! :)
Misschien iets om op te nemen in CSS 3?
Heb het nu opgelost om de footer gewoon als img onderin te zetten, het is wel niet zo netjes. Maar het werkt, zou het anders ook echt niet weten..
Tamara in ieder geval bedankt voor je hulp!
laat is je css en html zien? of even hier plaatsen
het is idd geen mooie oplossing voor de footer nu.