Tijden veranderen
Positie van vertical css menu
Ik ben nog maar net begonnen met css dus ik weet niet echt of alles wel goed is wat ik tot nu toe al heb gemaakt.
Dit is mijn style:
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
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
body{
background: #E7E7E7 url("boven.gif") repeat-x;
margin: 0;
}
/* container */
#container{
width: 900px;
margin: 0px auto;
}
/* header */
#header{
margin: 0px;
height: 170px;
width: 900px;
}
/* logo */
#logo{
background-image: url("logo.jpg");
height: 77px;
width: 250px;
float: left;
}
/* topmenu */
#topmenu{
height: 77px;
float: right;
}
/* topbanner */
#topbanner{
height: 93px;
margin-top: 18px;
float: right;
}
/* content */
#content{
width: 900px;
}
/* contentboven */
#contentboven{
background-image: url("contentboven.gif");
height: 65px;
width: 900px;
}
/* contentmiden */
#contentmidden{
background: #e7e7e7 url("contentmidden.gif") repeat-y;
}
/* tekst contentmidden */
.tekst{
width: 600px;
padding-left: 240px;
}
/* menu links */
.buttonscontainer {
width: 200px;
float: left;
border-bottom: 3px solid #fff;
}
.buttons a {
color: #FFFFFF;
background-color: #414040;
padding-left: 10px;
display: block;
font: 14px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
border-right: 3px solid #fff;
border-left: 3px solid #fff;
border-top: 3px solid #fff;
height: 25px;
}
.buttons a:hover {background-color: #379101;
color: #FFFFFF;
text-decoration: none;}
/* contentonder */
#contentonder{
background-image: url("contentonder.gif");
height: 47px;
width: 900px;
}
background: #E7E7E7 url("boven.gif") repeat-x;
margin: 0;
}
/* container */
#container{
width: 900px;
margin: 0px auto;
}
/* header */
#header{
margin: 0px;
height: 170px;
width: 900px;
}
/* logo */
#logo{
background-image: url("logo.jpg");
height: 77px;
width: 250px;
float: left;
}
/* topmenu */
#topmenu{
height: 77px;
float: right;
}
/* topbanner */
#topbanner{
height: 93px;
margin-top: 18px;
float: right;
}
/* content */
#content{
width: 900px;
}
/* contentboven */
#contentboven{
background-image: url("contentboven.gif");
height: 65px;
width: 900px;
}
/* contentmiden */
#contentmidden{
background: #e7e7e7 url("contentmidden.gif") repeat-y;
}
/* tekst contentmidden */
.tekst{
width: 600px;
padding-left: 240px;
}
/* menu links */
.buttonscontainer {
width: 200px;
float: left;
border-bottom: 3px solid #fff;
}
.buttons a {
color: #FFFFFF;
background-color: #414040;
padding-left: 10px;
display: block;
font: 14px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
border-right: 3px solid #fff;
border-left: 3px solid #fff;
border-top: 3px solid #fff;
height: 25px;
}
.buttons a:hover {background-color: #379101;
color: #FFFFFF;
text-decoration: none;}
/* contentonder */
#contentonder{
background-image: url("contentonder.gif");
height: 47px;
width: 900px;
}
dit is de pagina:
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Cheap-Scripts.nl</title>
<link rel="stylesheet" type="text/css" href="images/opmaak.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="topmenu">
<img src="images/scripts.png"></img>
<img src="images/contact.png"></img>
</div>
<div id="topbanner">
<img src="http://www.neobytesolutions.com/titanbackup/images/tb-banner-468-60-b.gif"></img>
</div>
</div>
<div id="content">
<div id="contentboven"></div>
<div id="contentmidden">
<div class="tekst">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="buttonscontainer">
<div class="buttons">
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
</div>
</div>
<div id="contentonder"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<title>Cheap-Scripts.nl</title>
<link rel="stylesheet" type="text/css" href="images/opmaak.css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="topmenu">
<img src="images/scripts.png"></img>
<img src="images/contact.png"></img>
</div>
<div id="topbanner">
<img src="http://www.neobytesolutions.com/titanbackup/images/tb-banner-468-60-b.gif"></img>
</div>
</div>
<div id="content">
<div id="contentboven"></div>
<div id="contentmidden">
<div class="tekst">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="buttonscontainer">
<div class="buttons">
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
</div>
</div>
<div id="contentonder"></div>
</div>
</div>
</body>
</html>
Hier zie je het online:
http://www.cheap-scripts.nl/
Volges mij zit er een afbeelding in de weg maar ik weet niet hoe ik dit oplos.
Het menu moet net naast het content vak moeten komen.
Alvast bedankt :)
Gewijzigd op 01/01/1970 01:00:00 door Kenneth
Code (php)
1
2
3
4
2
3
4
.tekst{
width: 600px;
float:right;
}
width: 600px;
float:right;
}
Ook moet je je float's wel weer "clear"en om het maar even te noemen: http://www.w3schools.com/Css/pr_class_clear.asp
Code (php)
1
2
3
4
2
3
4
.tekst{
width: 600px;
float: right;
}
width: 600px;
float: right;
}
Het ziet er nog altijd niet zo goed uit en weet eigenlijk niet waarom
Je zei ook dat ik mijn float's weer moet clearen, dat begrijp ik niet zo goed en die engelse uitleg snap ik helemaal niet :D
Toch bedankt
CSS:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.clear {
clear:both;
height:0px;
line-height:0pt;
visibility:hidden;
}
clear:both;
height:0px;
line-height:0pt;
visibility:hidden;
}
HTML:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<div id="contentmidden">
<div class="tekst">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="buttonscontainer">
<div class="buttons">
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
</div>
<div class="clear"></div>
</div>
...
<div id="contentmidden">
<div class="tekst">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
<div class="buttonscontainer">
<div class="buttons">
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>
</div>
</div>
<div class="clear"></div>
</div>
...