Div links, in het midden en rechts
Ik zit met een probleem! Ik ben een beginnende webdesigner en zit met een probleem. Ik wil een site maken waarin de content links, in het midden en rechts staat met behulp van
<div id=right> Tekst dat rechts hoor te staan</div>
<div id=left> Tekst dat links hoor te staan</div>
<div id=center> Tekst dat in het midden hoor te staan</div>
Alleen ik weet niet hoe het moet in de css en html, en kan op google niets vinden. Het zou wel niet zo moeilijk zijn en daarom kom ik bij jullie vragen! de layout van m'n site heb ik al hieronder een link van hoe het moet worden (globaal geschets!).
http://img51.imageshack.us/img51/5056/voorbeeld.png
b.v.d
Timo Kleinhout
Maar goed er zijn geen mods meer dusja..
Zoals je wel al begrepen had moet dit met divs en css.
Google eens op float en clear, als je hier wat mee kan doen kan je jou hele opstelling vrij snel maken ;)
CSS:
div#content #left{
float: left;
width: 100px;
}
div#content #right{
float: right;
width: 100px;
}
HTML:
<div id="left">
TEKST
</div>
<div id="left">
TEKST
</div>
dit werkt niet gaat gewoon onder elkaar staan
Als je dan in je div's een nieuw div doet kan je daar bijvoorbeeld padding opzetten.
Anders werkt het niet.
Wat gerben zegt kan volgens mij ook zonder die container.
Mijn css:
#container {
width: 815px;
margin: 10px auto 10px auto;
}
body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
#total {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
display: block;
width: 815px;
height: 143px;
background: url(http://www.habspace.nl/test/logo.bmp) no-repeat;
}
#content {
display: block;
padding: 8px 8px 8px 8px;
width: 815px;
background: url(http://www.habspace.nl/test/content.bmp) repeat-y;
}
div#content #left{
float: left;
width: 100px;
}
div#content #right{
float: right;
width: 100px;
}
#balk {
display: block;
width: 815px;
height: 25px;
background: url(http://www.habspace.nl/test/balk.bmp) no-repeat;
}
------------------------------------------------
index.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Titel
</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="balk">
</div>
<div id="content">
HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!
</div>
<div id="balk">
</div>
<div id="content">
<div id="left">
test<br>
grgfre<br>
gfrds<br>
</div>
<div>
test
</div>
<div id="right">
test
</div>
</div>
</body>
</html>
voor mijn site: http://www.habspace.nl/test
EDIT:
Ik denk dat jij uit eindelijk dit wilt:
index.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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="menu">
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
</ul>
<div class="left">
Links
</div>
<div class="middle">
Midden
</div>
<div class="right">
Rechts
</div>
</div>
<div class="footer">
© JOUWSITE.NL
</div>
</body>
</html>
<html>
<head>
<title>Titel</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header">
</div>
<ul class="menu">
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
<li><a class="men" href="">Sample</a></li>
</ul>
<div class="left">
Links
</div>
<div class="middle">
Midden
</div>
<div class="right">
Rechts
</div>
</div>
<div class="footer">
© JOUWSITE.NL
</div>
</body>
</html>
style.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
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
body {
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
}
div.container {
width: 815px;
min-height: 400px;
overflow: hidden;
text-align: left;
margin: 0px auto;
background-image: url('http://www.habspace.nl/test/content.bmp');
}
div.header {
width: 815px;
height: 143px;
background-image: url('http://www.habspace.nl/test/logo.bmp');
}
ul.menu {
width: 815px;
height: 25px;
margin: 0px;
padding: 0px;
list-style: none;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-image: url('http://www.habspace.nl/test/balk.bmp');
}
ul.menu li {
margin: 0px;
padding: 0px;
float: left;
}
ul.menu a.men {
height: 25px;
float: left;
margin: 0px;
margin-left: 20px;
padding: 0px;
color: #FFFFFF;
line-height: 25px;
text-decoration: none;
}
div.left {
width: 168px;
float: left;
margin-right: 5px;
}
div.middle {
width: 469px;
float: left;
}
div.right {
width: 168px;
float: left;
margin-left: 5px;
}
div.footer {
width: 815px;
height: 25px;
line-height: 25px;
color: #FFFFFF;
margin: 0px auto;
background-image: url('http://www.habspace.nl/test/balk.bmp');
}
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: center;
}
div.container {
width: 815px;
min-height: 400px;
overflow: hidden;
text-align: left;
margin: 0px auto;
background-image: url('http://www.habspace.nl/test/content.bmp');
}
div.header {
width: 815px;
height: 143px;
background-image: url('http://www.habspace.nl/test/logo.bmp');
}
ul.menu {
width: 815px;
height: 25px;
margin: 0px;
padding: 0px;
list-style: none;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-image: url('http://www.habspace.nl/test/balk.bmp');
}
ul.menu li {
margin: 0px;
padding: 0px;
float: left;
}
ul.menu a.men {
height: 25px;
float: left;
margin: 0px;
margin-left: 20px;
padding: 0px;
color: #FFFFFF;
line-height: 25px;
text-decoration: none;
}
div.left {
width: 168px;
float: left;
margin-right: 5px;
}
div.middle {
width: 469px;
float: left;
}
div.right {
width: 168px;
float: left;
margin-left: 5px;
}
div.footer {
width: 815px;
height: 25px;
line-height: 25px;
color: #FFFFFF;
margin: 0px auto;
background-image: url('http://www.habspace.nl/test/balk.bmp');
}
PS: zou je jou scripts in code tags kunnen zetten anders ziet de lay out van phphulp er niet meer uit ;)
Gewijzigd op 01/01/1970 01:00:00 door Milo
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
#container {
width: 815px;
margin: 10px auto 10px auto;
}
body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
#total {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
display: block;
width: 815px;
height: 143px;
clear: both;
background: url(http://www.habspace.nl/test/logo.bmp) no-repeat;
}
#content {
display: block;
padding: 8px 8px 8px 8px;
width: 815px;
background: url(http://www.habspace.nl/test/content.bmp) repeat-y;
}
div#content #left{
float: left;
width: 100px;
}
div#content #middle{
float: center;
width: 500px;
}
div#content #right{
float: right;
width: 100px;
}
#balk {
display: block;
width: 815px;
height: 25px;
background: url(http://www.habspace.nl/test/balk.bmp) no-repeat;
}
width: 815px;
margin: 10px auto 10px auto;
}
body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
#total {
width: 800px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
#header {
display: block;
width: 815px;
height: 143px;
clear: both;
background: url(http://www.habspace.nl/test/logo.bmp) no-repeat;
}
#content {
display: block;
padding: 8px 8px 8px 8px;
width: 815px;
background: url(http://www.habspace.nl/test/content.bmp) repeat-y;
}
div#content #left{
float: left;
width: 100px;
}
div#content #middle{
float: center;
width: 500px;
}
div#content #right{
float: right;
width: 100px;
}
#balk {
display: block;
width: 815px;
height: 25px;
background: url(http://www.habspace.nl/test/balk.bmp) no-repeat;
}
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Titel
</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="balk">
</div>
<div id="content">
HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!
</div>
<div id="balk">
</div>
<div id="content">
<div id="left">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</div>
<div id="middle">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</div>
<div id="right">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</div>
</div>
</body>
</html>
<html>
<head>
<title>
Titel
</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="balk">
</div>
<div id="content">
HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!HEADLINES!!
</div>
<div id="balk">
</div>
<div id="content">
<div id="left">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</div>
<div id="middle">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</div>
<div id="right">
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
</div>
</div>
</body>
</html>
Bijna dus, weet iemand de laatste eindjes nog?? en de grijze achtergrond waar dus die 3 kolommen in staan moet doorlopen maar stopt weet iemand daar ook miss. iets voor???
Gewijzigd op 01/01/1970 01:00:00 door Timo Kleinhout