Index / (X)HTML / CSS / probleem met positionering menu  
Topic bekijken : probleem met positionering menu
Pagina : 1
Gepost door: sebbonny - Maandag 05 maart om 12:37
profile
sebbonny
Posts : 3
Offline
Hallo,

Heb een menu gemaakt dmv css, in firefox geeft hij alles goed weer, maar in ie, zet hij het menu bovenaan...

dit is de code:
Code:
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<meta name="Author" content="Sébastien Bonny - TIN1C1"/>

<head>
<style type="text/css">
html{
margin: 0px;
padding: 0px;
}

a{
color:#000000;
text-decoration: none;
}

a:hover{
color: #000000;
text-decoration: underline;
}

a:visited{
color: #000000;
}

body{
background: #999999;
}

ul{
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
}

li{
display: inline;
background: #999999;
padding: 0px;
border-left: 1px solid #888888;
border-right: 1px solid #888888;
border-top: 1px solid #888888;
padding: 5px;
margin: 5px;
}

#banner{
position: absolute;
background: #a7a7a7;
width: 700px;
height: 100px;
margin-top: 20px;
margin-left: 300px;
margin-right: 300px;
}

#menu{
position: absolute;
background: #a7a7a7;
width: 700px;
height: 30px;
margin-top: 130px;
margin-left: 300px;
margin-right: 300px;
}

#inhoud{
position: absolute;
background: #a7a7a7;
width: 700px;
height: 400px;
margin-top: 170px;
margin-left: 300px;
margin-right: 300px;
}

div{
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-color: #888888;
}

</style>

<title>Externe links gebruiken</title>

</head>

<body>

    <div id="banner"></div>
    <div id="menu">
    <ul>
        <li><a href="link1.html">Home</a></li>
        <li><a href="link2.html">Info</a></li>
        <li><a href="link3.html">Nieuws</a></li>
        <li><a href="link4.html">Promoties</a></li>
        <li><a href="link5.html">Tarieven</a></li>
        <li><a href="link6.html">Contact</a></li>
        <li><a href="link7.html">Webmaster</a></li>
    </ul>
    </div>
    <div id="inhoud">test</div>

</body>

</html>


Bericht is het laatst aangepast op 05-03 @ 18:58 door Eelko
 
Gepost door: Admin [Beheerder] - Dinsdag 06 maart om 18:01
profile homepage
Admin
Admin
avatar
Posts : 324
Offline
Heb je ook een online voorbeeld? Dat werkt wat makkelijker.
En anders een print screen van wat er fout gaat.
Bericht is het laatst aangepast op 06-03 @ 18:03 door Admin
_________________________________
WebsiteKeuring.be 
Gepost door: sebbonny - Dinsdag 06 maart om 18:21
profile
sebbonny
Posts : 3
Offline
Ja:
http://users.skynet.be/fa099711/site/index.html

nieuwe code is wel:
Code:
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<!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>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta name="description" content="Fitness" />
   <meta name="keywords" content="fitness" />
<style type="text/css">
html{
margin: 0px;
padding: 0px;
}

a{
color:#000000;
text-decoration: none;
}

a:hover{
color: #000000;
text-decoration: underline;
}

a:visited{
color: #000000;
}

body{
background: #999999;
}

ul{
margin-top: 17px;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
}

li{
display: inline;
background: #999999;
border-left: 1px solid #888888;
border-right: 1px solid #888888;
border-top: 1px solid #888888;
padding: 5px;
margin: 5px;
}

#banner{
position: absolute;
background: #a7a7a7;
width: 700px;
height: 100px;
margin-top: 20px;
margin-left: 300px;
margin-right: 300px;
}

#menu{
position: absolute;
background: #a7a7a7;
width: 700px;
height: 35px;
margin-top: 130px;
margin-left: 300px;
margin-right: 300px;
}

#inhoud{
position: absolute;
background: #a7a7a7;
width: 700px;
height: 400px;
margin-top: 175px;
margin-left: 300px;
margin-right: 300px;
}

div{
border-top: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-color: #888888;
}

</style>

<title>Externe links gebruiken</title>

</head>

<body>

    <div id="banner"></div>
    <div id="menu">
    <ul>
        <li><a href="link1.html">Home</a></li>
        <li><a href="link2.html">Info</a></li>
        <li><a href="link3.html">Nieuws</a></li>

        <li><a href="link4.html">Promoties</a></li>
        <li><a href="link5.html">Tarieven</a></li>
        <li><a href="link6.html">Contact</a></li>
        <li><a href="link7.html">Webmaster</a></li>
    </ul>
    </div>
    <div id="inhoud">test</div>

</body>

</html>


Bericht is het laatst aangepast op 06-03 @ 23:31 door sebbonny
 
Gepost door: Admin [Beheerder] - Dinsdag 06 maart om 22:29
profile homepage
Admin
Admin
avatar
Posts : 324
Offline
Link werkt niet.
_________________________________
WebsiteKeuring.be 
Gepost door: sebbonny - Dinsdag 06 maart om 23:31
profile
sebbonny
Posts : 3
Offline
Nu wel normaal gezien
 
Gepost door: Admin [Beheerder] - Woensdag 07 maart om 01:05
profile homepage
Admin
Admin
avatar
Posts : 324
Offline
Je bedoelt dat er geen ruimte tussen het menu en de inhoud zit?

Verander
Code:
1
2
3
4
ul{
margin-top: 17px;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
}



in:
Code:
1
2
3
4
ul{
margin: 17px 0 0 0;
font-family: Verdana, Arial, Sans-serif;
font-size: 12px;
}



Je hoeft de margins en border niet per kant aan te geven.
Je kan gewoon margin: 1px 2px 3px 4px; doen, de volgorde hiervan is boven, rechts, onder, links, gewoon met de klok mee dus.
Bericht is het laatst aangepast op 07-03 @ 01:18 door Admin
_________________________________
WebsiteKeuring.be 
Pagina : 1
Index / (X)HTML / CSS / probleem met positionering menu Nieuw topic toevoegen

© Copyright by WebsiteKeuring.be