div-Boxen nebeneinander

[Rupur]

Hallo an alle,

also ich habe ein Problem, undzwar habe ich eine horizontale Navigationsleiste, jetzt will ich aber für jeden Link in der Navigationsleiste eine andere Button Grafik einsetzen, deshalb habe ich über jeden Link noch eine div-Box gezogen. Mein Problem ist aber das diese jetzt nichtmehr nebeneinander sind. Wie bekomme ich das hin?

Ich habe display: inline; code hinzugefügt damit sind sie jetzt zwar nebeneinander aber die ganzen Befehle aus #navibereich li werden nicht mehr für die Navigationselemente übernommen.

Bzw. gibt es für sowas allgemein eine elegantere Lösung als div-Boxen?

Ich möchte einfach eine Navigationsleiste in der ich die Breite der Schaltflächen und die Gesamtbreite selbst bestimmen kann, dann möchte ich für jede Schaltfläche eine eigene Button Grafik einfügen und ich will auch die Größen der Schaltflächen selbst hinschreiben können.

<div class="navcontainer">
<ul id="navibereich">
  <div class="button01"><li id="navi01"><a href="index.html">Willkommen</a></li></div>
  <div class="button02"><li id="navi02"><a href="unseredienste.html">Unsere Dienste</a></li></div>
  <div class="button03"><li id="navi03"><a href="beispielsektion.html">Beispiel Sektion</a></li></div>
  <div class="button04"><li id="navi04"><a href="ueberid.html">Über ID</a></li></div>
  <div class="button05"><li id="navi05"><a href="kontakt.html">Kontakt</a></li></div>
</ul>
</div>

.button01 {
 text-decoration: none;
 display: inline;
 height: 30px;
 width: 4cm;
}
.button02 {
 text-decoration: none;
 display: inline;
 height: 30px;
 width: 4cm;
}
.button03 {
 text-decoration: none;
 display: inline;
 height: 30px;
 width: 4cm;
}
.button04 {
 text-decoration: none;
 display: inline;
 height: 30px;
 width: 4cm;
}
.button05 {
 text-decoration: none;
 display: inline;
 height: 30px;
 width: 4cm;
}
.navcontainer {
 height: 30px;
 width: 20cm;
}

#navibereich li {
 display: inline;
    list-style-type: none; 
}

#navibereich {
 height: 30px;
 width: 20cm; 
}

navibereich a {
 color: black;
 text-decoration: none;
 margin: 0;
}

#navibereich a:hover,
#willkommen #navi01 a,
#unseredienste #navi02 a,
#beispielsektion #navi03 a,
#ueberid #navi04 a,
#kontakt #navi05 a {
 
}

Ich hoffe ihr könnt mir helfen :)

 

[threadi]

Zwischen <ul> und <li> darf nichts stehen. Auch kein <div>. Also schmeiß diese dort bitte raus und vergiss diese zusätzlichen button-Klassen. Wenn Du die Links stylen willst, dann sprich diese genau an und nicht die umliegenden Elemente. Also z.B.:

#navi01 a:link, #navi01 a:visited, #navi01 a:hover, #navi01 a:active, #navi01 a:focus {
 display: inline;
 height: 30px;
 width: 4cm;
}

Hinweis: cm-Angaben haben in CSS-Angaben für Bildschirme nichts zu suchen. Verwende px, % oder em dafür. Und pt für die Ausgabe am Drucker.

 

[neuroleptika]

Eine Anmerkung:
height und width haben keine Auswirkung auf Elemente mit Inline-Level ( display: inline; ).
Es sei denn es geht um den IE<5.5.