Wil niet Centreren
ik doe het zo:
op de pagina's:
Code (php)
1
2
3
4
5
2
3
4
5
en dan in menu.php (css zit meestal lost, maar voor nu even niet, om klachten te voorkomen):
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
<style type="text/css">
#navbar {
margin: 0;
padding: 0;
height: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#navbar li {
list-style: none;
float: left;
border:1px solid black;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li a:hover {
background-color:#E0E0E0;
}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
background-color:#E0E0E0;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px solid black;
color: black;
}
#navbar b {
padding: 3px 8px;
}
</style>
<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li><a href="/?p=home">Home</a></li>
<li><a href="/?p=nederland">Radar</a>
<ul>
<li><b>Alphen</b></li>
<li><a href="/?p=afgelopenuur">Alphen afgelopen uur</a></li>
<li><a href="/?p=komende2uur">Alphen komende 2 uur</a></li>
<li><b>Nederland</b></li>
<li><a href="/?p=nederland">NL afgelopen uur</a></li>
<li><a href="/?p=nl2&r=1">NL komende 3 uur</a></li>
<li><a href="/?p=nl2&r=2">NL komende 24 uur</a></li>
<li><a href="/?p=motregen">NL motregen</a></li>
<li><b>Europa</b></li>
<li><a href="/?p=nl2&r=3">EU komende 3 uur</a></li>
<li><a href="/?p=nl2&r=4">EU komende 3 uur (G-MAP)</a></li>
</ul>
</li>
<li>
<!-- en nog wat menu's -->
</ul>
#navbar {
margin: 0;
padding: 0;
height: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}
#navbar li {
list-style: none;
float: left;
border:1px solid black;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li a:hover {
background-color:#E0E0E0;
}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
background-color:#E0E0E0;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px solid black;
color: black;
}
#navbar b {
padding: 3px 8px;
}
</style>
<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li><a href="/?p=home">Home</a></li>
<li><a href="/?p=nederland">Radar</a>
<ul>
<li><b>Alphen</b></li>
<li><a href="/?p=afgelopenuur">Alphen afgelopen uur</a></li>
<li><a href="/?p=komende2uur">Alphen komende 2 uur</a></li>
<li><b>Nederland</b></li>
<li><a href="/?p=nederland">NL afgelopen uur</a></li>
<li><a href="/?p=nl2&r=1">NL komende 3 uur</a></li>
<li><a href="/?p=nl2&r=2">NL komende 24 uur</a></li>
<li><a href="/?p=motregen">NL motregen</a></li>
<li><b>Europa</b></li>
<li><a href="/?p=nl2&r=3">EU komende 3 uur</a></li>
<li><a href="/?p=nl2&r=4">EU komende 3 uur (G-MAP)</a></li>
</ul>
</li>
<li>
<!-- en nog wat menu's -->
</ul>
Maar wat ik ook doe, hij centreert niet...? help?
Gewijzigd op 06/09/2010 21:21:44 door Dalando De Zuil
En heb je misschien een online voorbeeld. Laat ik firebug er even oplos. Werkt makkelijker.
Gewijzigd op 06/09/2010 21:24:00 door Synaps Framework
2. Online nog niet, maar wel plaatje:
de rode plek is de plek waar ie hoort te zitten...
Toevoeging op 06/09/2010 21:39:29:
Ik heb zojuist online gezet, link
Beoordeel niet op de website aub, let alleen even op het menu :|
Gewijzigd op 06/09/2010 21:40:01 door Dalando De Zuil
maak de ul of div die om je list items zit de juiste breedte geven lost het misschien op, anders zou een margin:auto het moeten oplossen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
#container {
text-align: center;
}
#center {
margin: 0px auto;
width: 830px;
}
</style>
<div id="container">
<div id="center"></div>
</div>
#container {
text-align: center;
}
#center {
margin: 0px auto;
width: 830px;
}
</style>
<div id="container">
<div id="center"></div>
</div>
Je moet misschien een div een width mee geven.
Quote:
in een van mijn vorige topics was ik bezig met een nieuw menu. Nou heb ik die eenmaal af, maar wil hij niet centreren...? Help?
Dus kon je eigenlijk verder gaan in dat topic, want het gaat nog steeds om hetzelfde menu? Laat daar op voor een volgende keer ;-)
Chris Horeweg op 07/09/2010 11:18:59:
Dus kon je eigenlijk verder gaan in dat topic, want het gaat nog steeds om hetzelfde menu? Laat daar op voor een volgende keer ;-)
Quote:
in een van mijn vorige topics was ik bezig met een nieuw menu. Nou heb ik die eenmaal af, maar wil hij niet centreren...? Help?
Dus kon je eigenlijk verder gaan in dat topic, want het gaat nog steeds om hetzelfde menu? Laat daar op voor een volgende keer ;-)
Zal ik doen ;)
Johan Dam op 07/09/2010 08:50:47:
Volgens mij ligt het aan je float left, de list items zullen altijd naar links gaan, dus je moet hetgeen eromheen centreren,
maak de ul of div die om je list items zit de juiste breedte geven lost het misschien op, anders zou een margin:auto het moeten oplossen.
maak de ul of div die om je list items zit de juiste breedte geven lost het misschien op, anders zou een margin:auto het moeten oplossen.
nou dit gedaan:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#navbar {
margin: 0;
padding: 0;
height: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
margin:auto;
}
margin: 0;
padding: 0;
height: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
margin:auto;
}
nog niks...?
SilverWolf NL op 07/09/2010 15:41:50:
Het ul-element is nu 100% in breedte, daarom centreert hij niet. Geef je element een vaste breedte en laat de lege plek opvullen door de knoppen breder te maken, of geef precies de goede lengte mee (nu is dat width:645px;). Dit betekend wel dat als je de tekst aanpast, dat dan niet alle elementen meer in je menu passen...
Bedankt, dat deet het m! :-)