Menu verspringt
http://www.bobbob.nl/webfout.rar
Groetjes,
Bob
Edit:
Hier de code:
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
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
/* Header */
#header {
width: 980px;
height: 90px;
margin: 0 auto;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0;
list-style: none;
line-height: normal;
}
#menu li {
padding-left: 20px;
}
#menu a {
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
}
#menu a:hover {
text-decoration: underline;
}
ul.dropdown ul {
position: absolute;
padding: 3px 6px;
border: none;
background-color: #FFFFFF;
visibility: hidden;
}
ul.dropdown a, ul.dropdown span {
display: block;
padding: 4px 6px;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
}
ul.dropdown {
position: relative;
float: left;
}
ul.dropdown li {
float: left;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
#header {
width: 980px;
height: 90px;
margin: 0 auto;
}
/* Menu */
#menu {
float: right;
}
#menu ul {
margin: 0;
list-style: none;
line-height: normal;
}
#menu li {
padding-left: 20px;
}
#menu a {
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
}
#menu a:hover {
text-decoration: underline;
}
ul.dropdown ul {
position: absolute;
padding: 3px 6px;
border: none;
background-color: #FFFFFF;
visibility: hidden;
}
ul.dropdown a, ul.dropdown span {
display: block;
padding: 4px 6px;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
}
ul.dropdown {
position: relative;
float: left;
}
ul.dropdown li {
float: left;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
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
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
<div id="header">
<div id="logo">
<h1><a href="#">Bobbob.nl</a></h1>
<h2>Carp fishing, my way of life</h2>
</div>
<div id="menu">
<ul id="nav" class="dropdown">
<li><a>Algemeen</a>
<ul>
<li><a href="./">Home</a></li>
<li><a href="./">Foto album</a></li>
<li><a href="./">Links</a></li>
<li><a href="./">Foto van de maand</a></li>
</ul>
</li>
<li><a>Artikelen</a>
<ul>
<li><a href="./">Rigs & knopen</a></li>
<li><a href="./">Aas & voer</a></li>
<li><a href="./">Vis strategien/technieken</a></li>
<li><a href="./">Vissen in Nederland</a></li>
<li><a href="./">Vissen in Frankrijk</a></li>
<li><a href="./">Vissen in het buitenland</a></li>
<li><a href="./">Overige verhalen</a></li>
</ul>
</li>
<li><a href="./">Forum</a></li>
<li><a>Gebruiker</a>
<ul>
<li><a href="./">Bekijk profiel</a></li>
<li><a href="./">Gegevens wijzigen</a></li>
<li><a href="./">Afbeelding wijzigen</a></li>
<li><a href="./">Wachtwoord wijzigen</a></li>
</ul>
</li>
<li><a href="./">Nieuws</a></li>
<li><a href="./">Contact</a>
<ul>
<li><a href="./">Vragen</a></li>
<li><a href="./">Foto opsturen</a></li>
<li><a href="./">Artikel opsturen</a></li>
<li><a href="./">Adverteren</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="logo">
<h1><a href="#">Bobbob.nl</a></h1>
<h2>Carp fishing, my way of life</h2>
</div>
<div id="menu">
<ul id="nav" class="dropdown">
<li><a>Algemeen</a>
<ul>
<li><a href="./">Home</a></li>
<li><a href="./">Foto album</a></li>
<li><a href="./">Links</a></li>
<li><a href="./">Foto van de maand</a></li>
</ul>
</li>
<li><a>Artikelen</a>
<ul>
<li><a href="./">Rigs & knopen</a></li>
<li><a href="./">Aas & voer</a></li>
<li><a href="./">Vis strategien/technieken</a></li>
<li><a href="./">Vissen in Nederland</a></li>
<li><a href="./">Vissen in Frankrijk</a></li>
<li><a href="./">Vissen in het buitenland</a></li>
<li><a href="./">Overige verhalen</a></li>
</ul>
</li>
<li><a href="./">Forum</a></li>
<li><a>Gebruiker</a>
<ul>
<li><a href="./">Bekijk profiel</a></li>
<li><a href="./">Gegevens wijzigen</a></li>
<li><a href="./">Afbeelding wijzigen</a></li>
<li><a href="./">Wachtwoord wijzigen</a></li>
</ul>
</li>
<li><a href="./">Nieuws</a></li>
<li><a href="./">Contact</a>
<ul>
<li><a href="./">Vragen</a></li>
<li><a href="./">Foto opsturen</a></li>
<li><a href="./">Artikel opsturen</a></li>
<li><a href="./">Adverteren</a></li>
</ul>
</li>
</ul>
</div>
</div>
EDIT: Probleem opgelost
Gewijzigd op 01/01/1970 01:00:00 door Bob Duisters
Maarja, ik ga liever niets downloaden. Kan je het niet gewoon online plaatsen?
Geen visibility gebruiken, maar display: none; en display: block;. Maak je ul/li dropdown ook eens in een vaste breedte inplaats van ieder blokje zijn eigen grootte te laten hebben op basis van content.
Na dit aan te hebben gepast, zeg dan maar of het probleem er nog is. :)
Een voorbeeld is te zien op http://www.bobbob.nl/bobbob/
Groetjes,
Gewijzigd op 01/01/1970 01:00:00 door Bob Duisters
Sorry had een type foutje gemaakt in de link, zie hier de goede link:
http://www.bobbob.nl/bobbob/
Groetjes
Opzich is dit probleem normaal, zodra een tekst niet past gaat het naar de volgende regel. :)
Code (php)
1
2
3
2
3
#menu li ul li {
padding-left: 0;
}
padding-left: 0;
}
Dat haalt die irritant linker padding weg. ;)
Code (php)
1
2
3
2
3
#menu li ul li {
padding: 0;
}
padding: 0;
}
te gebruiken. Zo kun je ook snel aan de top wat geven.
Code (php)
1
2
2
#menu li ul li {
padding: 10px 5px 20px 15px;
padding: 10px 5px 20px 15px;
Is hetzelfde als:
Code (php)
1
2
3
4
5
2
3
4
5
#menu li ul li {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 15px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 15px;
Code (php)
1
2
3
4
5
2
3
4
5
// 1 waarde telt voor top right bottom left
padding: 5px;
// 2 waardes tellen voor top en bottom en right en left
padding: 5px 10px;
padding: 5px;
// 2 waardes tellen voor top en bottom en right en left
padding: 5px 10px;
Snap-ge-vous?
Gewijzigd op 01/01/1970 01:00:00 door Dennis Mertens