Float probleem
Hoi,
Ik heb een probleem met mijn layout.
Zoals je ziet is de #content niet helemaal 100% als width.

Hoe doe ik dit?
Dit is trouwens mijn CSS
Ik heb een probleem met mijn layout.
Zoals je ziet is de #content niet helemaal 100% als width.

Hoe doe ik dit?
Dit is trouwens mijn CSS
Ik kan hier niks uit opmaken.
Dat plaatje is te vaag.
Dat plaatje is te vaag.
Hier is een beter plaatje,
de #content moet 100% zijn zonder dat de banner naar een nieuwe alinea gaat.

de #content moet 100% zijn zonder dat de banner naar een nieuwe alinea gaat.

Je begint helemaal verkeerd naar mijn idee...
zet eerst standaard settings in de body.
Daarna maak je een container div.
En daarna ga je pas verder met de rest, banner, right en left colum.. Etc
Dan krijg je bijvoorbeeld dit:
zet eerst standaard settings in de body.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
html, body {
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
font-family: verdana;
text-align: center;
background: #eeeeee;
}
margin: 0px;
padding: 0px;
}
body {
font-size: 12px;
font-family: verdana;
text-align: center;
background: #eeeeee;
}
Daarna maak je een container div.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
#container {
margin: 0px auto;
width: 936px;
text-align: left;
background: #cccccc;
}
margin: 0px auto;
width: 936px;
text-align: left;
background: #cccccc;
}
En daarna ga je pas verder met de rest, banner, right en left colum.. Etc
Dan krijg je bijvoorbeeld dit:
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
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
#left-colum {
float: left;
width: 218px;
min-height: 200px;
}
#left-up {
height:192px;
width: 218px;
background-image: url(./img/Lay-out_06.gif);
}
#left-down {
width: 218px;
height: 548px;
background-image: url(./img/Lay-out_11.gif);
border-left: 1px solid black;
}
.left-menu-ul {
position: absolute;
list-style-type: none;
}
.left-menu-li {
position: absolute;
background-image: url(./img/bar.png);
border-left: 1px solid black;
border-bottom: 1px solid black;
width: 218px;
height: 28px;
margin-left: -41px;
text-align: center;
font-weight: bold;
margin-top: -10px;
}
.left-menu-li a {
text-decoration: none;
}
.left-menu-li a:hover {
text-decoration: underline;
}
#right-up {
height: 192px;
width: 218px;
background-color: #dae882;
border-left: 1px solid black;
border-right: 1px solid black;
}
#right-down {
width: 218px;
height: 548px;
background-image: url(./img/Lay-out_11.gif);
border-right: 1px solid black;
}
float: left;
width: 218px;
min-height: 200px;
}
#left-up {
height:192px;
width: 218px;
background-image: url(./img/Lay-out_06.gif);
}
#left-down {
width: 218px;
height: 548px;
background-image: url(./img/Lay-out_11.gif);
border-left: 1px solid black;
}
.left-menu-ul {
position: absolute;
list-style-type: none;
}
.left-menu-li {
position: absolute;
background-image: url(./img/bar.png);
border-left: 1px solid black;
border-bottom: 1px solid black;
width: 218px;
height: 28px;
margin-left: -41px;
text-align: center;
font-weight: bold;
margin-top: -10px;
}
.left-menu-li a {
text-decoration: none;
}
.left-menu-li a:hover {
text-decoration: underline;
}
#right-up {
height: 192px;
width: 218px;
background-color: #dae882;
border-left: 1px solid black;
border-right: 1px solid black;
}
#right-down {
width: 218px;
height: 548px;
background-image: url(./img/Lay-out_11.gif);
border-right: 1px solid black;
}
Gewijzigd op 16/08/2010 20:24:19 door Niels K
Wat een code! Heb dit allemaal niet nodig.
Toch bedankt om te posten maar dit is mijn CSS:
Toch bedankt om te posten maar dit is 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
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
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 12pt;
}
a {
color: #0B4CB0;
font-weight: bold;
font-style: underline;
}
#header {
background-color: #F7B731;
width: 100%;
height: 75px;
}
#msg {
border: 2px #ffffff dashed;
background-color: #FF0000 ;
font-weight: bold;
color: #ffffff;
}
#footer{
font-size: 8pt;
}
#content {
float: left;
}
#banner {
float: right;
}
margin: 0;
padding: 0;
font-family: Arial;
font-size: 12pt;
}
a {
color: #0B4CB0;
font-weight: bold;
font-style: underline;
}
#header {
background-color: #F7B731;
width: 100%;
height: 75px;
}
#msg {
border: 2px #ffffff dashed;
background-color: #FF0000 ;
font-weight: bold;
color: #ffffff;
}
#footer{
font-size: 8pt;
}
#content {
float: left;
}
#banner {
float: right;
}
Nee dat weet ik.. Maar het gaat om het idee hoe je een website op zet. Je mist dus een container div. Kijk anders eens naar dit. Daar had ik het css vandaan.. Kijk even naar de standaard dingen. Er zijn ook een aantal foutje divs onder andere de login form, search form etc..
Gewijzigd op 16/08/2010 20:48:24 door Niels K




