[CSS] display:block?
dit is zegmaar de opbouw
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="menu_balk">
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
</div>
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
<div id="menu_item"><a class="menu">Menu</a></div>
</div>
bij de eerste gaat het goed, bij de tweede en daarna niet...
om één of andere rede zet hij alles onder elkaar ipv naast elkaar
dit terwijl ik vaste waardes heb opgegeven voor breedte en hoogte en een display:block;
en er zouden nog makkelijk tien van die menu_items in de menu_balk passen
ik heb al overal margin en padding op 0 gezet, dus daar ligt het ook niet aan
als ik dat display:block; verwijder uit de CSS, dan laat hij wel alles naast elkaar zien, maar dan pakt hij natuurlijk niet die vaste waardes...
can somebody help me?
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
Gewijzigd op 01/01/1970 01:00:00 door DDragonz
Als je het trouwens wil doen gelijk nu dan zal je "display: inline;" moeten gebruiken. Eigenlijk doe je het beter met een <span></span>-element dan.
geprobeerd... helaas, werkt niet... iemand een idee hoe het dan wel moet?
Edit:
ik zal dat met die list even proberen
Gewijzigd op 01/01/1970 01:00:00 door JeffreyG
ik kan dan geen padding opgeven... in IE reageerd hij op geen van allen en in FF pakt hij de bovenste padding niet... iemand hiervoor een oplossing?
Altijd een float: left; in combinatie met width bijvoorbeeld. Zoek daar eens op.
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<li><a href="iks.dee">Menu item 1</a></li>
<li><a href="boris.niek">Menu item 2</a></li>
<li><a href="kebab.schaap">Menu item 3</a></li>
</ul>
<li><a href="iks.dee">Menu item 1</a></li>
<li><a href="boris.niek">Menu item 2</a></li>
<li><a href="kebab.schaap">Menu item 3</a></li>
</ul>
Kijk eens op http://www.gigadesign.be hier staan een aantal voorbeeld menu's dacht ik (even zoeken)
edit: @Ponzi hieronder - sorry jouw linkje niet aangeklikt ;-)
edit: zal even mijn stukje CSS plaatsen...
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
#menu {
width:970px;
height:30px;
margin:5px 0;
padding:0;
background-image:url(../images/bg_menu.jpg);
background-repeat:repeat-x;
background-position:bottom;
color:#FFFFFF;
font-weight:bold;
text-transform:uppercase;
display:block;
list-style:none;
}
#menu li a, #menu li a:visited {
list-style:none;
width:90px;
height:15px;
padding:8px 5px 7px;
margin:0;
position:relative;
background-image:url(../images/bg_menu.jpg);
background-repeat:repeat-x;
border-right-color:#21836F;
border-right-style:solid;
border-right-width:2px;
background-position:bottom;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}
#menu li a:hover, #menu li a:active {
list-style:none;
width:90px;
height:15px;
padding:10px 5px 5px;
margin:0;
position:relative;
background-image:url(../images/bg_menu.jpg);
background-repeat:repeat-x;
border-right-color:#21836F;
border-right-style:solid;
border-right-width:2px;
background-position:top;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}
width:970px;
height:30px;
margin:5px 0;
padding:0;
background-image:url(../images/bg_menu.jpg);
background-repeat:repeat-x;
background-position:bottom;
color:#FFFFFF;
font-weight:bold;
text-transform:uppercase;
display:block;
list-style:none;
}
#menu li a, #menu li a:visited {
list-style:none;
width:90px;
height:15px;
padding:8px 5px 7px;
margin:0;
position:relative;
background-image:url(../images/bg_menu.jpg);
background-repeat:repeat-x;
border-right-color:#21836F;
border-right-style:solid;
border-right-width:2px;
background-position:bottom;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}
#menu li a:hover, #menu li a:active {
list-style:none;
width:90px;
height:15px;
padding:10px 5px 5px;
margin:0;
position:relative;
background-image:url(../images/bg_menu.jpg);
background-repeat:repeat-x;
border-right-color:#21836F;
border-right-style:solid;
border-right-width:2px;
background-position:top;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}
en mijn HTML...
Code (php)
1
2
3
4
2
3
4
<ul id="menu">
<li><a href="#">news</a></li>
<li><a href="#">media</a></li>
</ul>
<li><a href="#">news</a></li>
<li><a href="#">media</a></li>
</ul>
Gewijzigd op 01/01/1970 01:00:00 door JeffreyG