Hallo.
Ich lese mich aktuell etwas in HTML und CSS ein,
um von den Tabellen als Layout-Grundgerüst weg zu kommen.
Das war Ziel für meine neue, kleine Seite.
Leider scheitere ich dabei, DIV`s richtig zu nutzen und bin etwas ratlos.
Ziel
Eine horizontale Navigationsleiste, dessen 5 Menüpunkte immer zentriert ausgerichtet sind,
und wo sich die äusseren Bereiche entsprechend der Browserbreite anpassen.
Der Teil mit dem Inhalt, soll später nur so breit werden, wie die Menüpunkte zusammen.
Hier habe ich das mit einer Tabelle gelöst, aber es ist nicht zufriedenstellend:
http://www.scheibel-fotografie.com
Eigentlich sollen die Menüpunkte in der Tabelle nach unten rechts ausgerichtet werden,
aber das spinnt alles rum.
Auch sollen beim Menüpunkt "Storys" später mehrer Auswahlmöglichkeiten aufklappen,
wenn man mit der Maus rüber fährt.
Vermutlich ist das bei einer Tabelle auch nicht realisierbar?
Problem
Ich habe nun 2 DIV`s genommen, um den linken und rechten Bereich darzustellen.
Diese habe ich mit float entsprechend ausgerichtet.
Allerdings bekomme ich es nicht hin, nun 5 weitere DIV`s für die Navigation, mit einer definierten Breite zentrisch dazwischen
zu bekommen, während sich das linke und rechts DIV dann entsprechend automatisch nur in der Breite anpassen.
Hier mal der Aufbau mit den DIV`s:
http://www.scheibel-fotografie.com/test.htm
Was muss ich nun beachten, möchte ich die Leiste wie oben mit der Tabelle,
nur in DIV`s realisieren?
Mein css:
body {
margin-top: 70px;
margin-left:0;
margin-right:0;
padding:0;
}
#left {
float:left;
width:250px;
height: 50px;
background-color:#000000;
}
#right {
float:right;
width: 250px;
height: 50px;
margin-left: 14em;
background-color:#000000;
}
Mein body:
<body>
<div id="left">
</div>
<div id="right">
</div>
</body>
Würde ich riesig freuen, etwas Input bekommen zu können!
Gruss, Rene