fixed en float right
ik ben bezig met een balk die ik aan de rechter kant wil hebben, maar wel position fixed wil gebruiken, enkel doet hij het niet precies.. hij blijft aan de linker kant staan
dit is de code:
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
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
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="primary">
<div id="menu">
<div id="menuHead">
<div id="logo">
<a href="#"><img src="images/logo.png" height="20%" width="20%" /></a>
</div>
<ul>
<li id="menuTitle"><b>Menu</b></li>
<a href="#"><li id="mail"><img src="images/mail.png" height="50%" width="50%" /></li></a>
<li id="rate"><img src="images/rate.jpeg" height="50%" width="50%" /></li>
<li id="social"><img src="images/social.png" height="50%" width="50%" /></li>
</ul>
</div>
</div>
<div id="adv">
<img src="images/adv1.jpg" height="100%" width="100%"/>
</div>
</div>
</body>
</html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="primary">
<div id="menu">
<div id="menuHead">
<div id="logo">
<a href="#"><img src="images/logo.png" height="20%" width="20%" /></a>
</div>
<ul>
<li id="menuTitle"><b>Menu</b></li>
<a href="#"><li id="mail"><img src="images/mail.png" height="50%" width="50%" /></li></a>
<li id="rate"><img src="images/rate.jpeg" height="50%" width="50%" /></li>
<li id="social"><img src="images/social.png" height="50%" width="50%" /></li>
</ul>
</div>
</div>
<div id="adv">
<img src="images/adv1.jpg" height="100%" width="100%"/>
</div>
</div>
</body>
</html>
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
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
body{
height: 2000px;
}
#primary{
font-family: arial;
font-size: 80%;
height: 100%;
width: 100%;
position: fixed;
}
#menu{
width: 5%;
height: 30%;
margin-top: 10%;
background-color: #ccc;
}
#menuHead{
height: 25%;
background-color: #4c4c4c;
}
#menuTitle{
padding-top: 20%;
}
#mail{
padding-bottom: 15%;
margin-top: 5%;
border-bottom: 1px solid #fff;
}
#rate{
padding-bottom: 20%;
margin-top: 10%;
border-bottom: 1px solid #fff;
}
#mail, #rate, #social{
padding-top: 14px;
}
#menu ul{
text-align: center;
padding: 0;
}
#menu ul li{
list-style-type: none;
}
#adv{
margin-top: 2px;
width: 20%;
height: 25%;
background-color: #ccc;
}
height: 2000px;
}
#primary{
font-family: arial;
font-size: 80%;
height: 100%;
width: 100%;
position: fixed;
}
#menu{
width: 5%;
height: 30%;
margin-top: 10%;
background-color: #ccc;
}
#menuHead{
height: 25%;
background-color: #4c4c4c;
}
#menuTitle{
padding-top: 20%;
}
#mail{
padding-bottom: 15%;
margin-top: 5%;
border-bottom: 1px solid #fff;
}
#rate{
padding-bottom: 20%;
margin-top: 10%;
border-bottom: 1px solid #fff;
}
#mail, #rate, #social{
padding-top: 14px;
}
#menu ul{
text-align: center;
padding: 0;
}
#menu ul li{
list-style-type: none;
}
#adv{
margin-top: 2px;
width: 20%;
height: 25%;
background-color: #ccc;
}
iemand ideeen?
Gewijzigd op 30/05/2013 11:27:10 door Jerry php
