nicht angemeldet
Positionierung
Hallo und allen ein frohes, neues Jahr.
Ich habe folgendes Problem: Ich möchte ein Menü bauen, dass sich nur durch den Austausch der CSS-Datei sowohl horizontal als auch vertikal ausrichten lässt.
Der Ansatz ist zunächst mal folgender:
<div class="menu">
<div class="menuitem" id="item1">Home</div>
<div class="menuitem" id="item2">Blafasel</div>
<div class="menuitem" id="item3">Blubber</div>
<div class="menuitem" id="item4">Kontakt</div>
</div>
Wenn ich nun keine Positionsangaben mache und die IDs nur als Dummy definiere, dann habe ich im Prinzip die vertikale Ausrichtung schon.
Bei der horizontalen Ausrichtung, also wenn die Menüpunkte nebeneinander liegen sollen, dann kann ich dis einzeln ausrichten, indem ich in den Stylesheets für die IDs entsprechende Positionsangaben mache.
Meine Frage ist nun, ob es auch einfacher geht, weil die einzelne Positionierung eine ziemliche Frickelei ist. Die Frage ist nun: Geht es auch einfacher (so dass ich die 'id="item?"' weg lassen kann)?
Eine Möglichkeit wäre display:inline. Dann kann ich aber keine einheitliche Breite angeben und ein margin-top:5px; bei der menuitem-Klasse oder padding-top:5px bei der menu-Klasse werden ignoriert.
Auch über display:table kriege ich es nicht hin.
Hat noch jemand eine Idee?
Stefan
-
Hallo,
Bei der horizontalen Ausrichtung, also wenn die Menüpunkte nebeneinander liegen sollen, dann kann ich dis einzeln ausrichten, indem ich in den Stylesheets für die IDs entsprechende Positionsangaben mache.
Meine Frage ist nun, ob es auch einfacher geht, weil die einzelne Positionierung eine ziemliche Frickelei ist. Die Frage ist nun: Geht es auch einfacher (so dass ich die 'id="item?"' weg lassen kann)?
Du kannst mit float und clear arbeiten http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float
Eine Möglichkeit wäre display:inline. Dann kann ich aber keine einheitliche Breite angeben und ein margin-top:5px; bei der menuitem-Klasse oder padding-top:5px bei der menu-Klasse werden ignoriert.
Auch über display:table kriege ich es nicht hin.
div.menu { display:table-row; }
dv.menuitem { display:table-cell; border:dashed 2px red; }Opera kann das, Mozilla kann das richtig, aber der IE kann das nicht richtig.
Grüße
Thomas