[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
website vind je bij de horizontale lijsten wat je zoekt.
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.
Volgens mij kan je beter gebruik maken van een lijst. Op deze 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
http://www.quirksmode.org/css/display.html daar zie je op een overzichtelijke manier alle display waardes en in welke browsers ze kunnen worden gebruikt. Met none krijg je gewoon helemaal niks.
Nhe, jha maar eens naar heb dat van die list geprobeerd... werkt net zo goed als dat het eerst deed... kan gewoon de breedte niet opgeven zonder een display:block; mee te geven...
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 ;-)
@ Webmakerij: dat zij ik toch :-) ?
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...
Gewijzigd op 01/01/1970 01:00:00 door JeffreyG
probleem is opgelost, ik moest float:left; gebruiken, en dan kan ik wel display:block; neerzetten (dus zoals Kasper zei)