2 divs 1 class in 1 Dokument = geht nicht?

[wolfsblut]

Hiho!

Ich habe folgendes Problem :
Meine Cheffin möchte auf einer Webseite ein Bild zwischen den Navigationspunkten haben. Nun wollte ich so schlau sein, beide "Navigationsteile" bei der Klasse gleich zu benennen.

Sah anfangs genau so aus, wie ich mir die Umsetzung vorstellte, doch dann kam meine Maus über den 2. Teil der Navi und dieser sprung um etwa 10 - 15 px nach unten.

Anmerkung :
Sie hatte die Seite schon komplett gehabt, ich sollte diese nur von Tabellenlayout auf div's umschreiben. Nun steh ich aber vor dieser Herausforderung und habe nichts auf Google, oder hier über die Suche gefunden, was annähernd das gleiche Problem behandelt, oder ein Anstoß für mich sein könnte.

hier der Code, mit dem ich es versucht hab :

<!-- Auzug aus der HTML -->
<div class="buttonnav">
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Neues</a></li>
     <li><a href="#">Altes</a></li>
 </ul>
</div>
<p><img src="../bilder/hand.jpg"></p>
<div class="buttonnav">
  <ul>
     <li><a href="#">Gebraucht</a></li>
     <li><a href="#">G&uuml;nstig</a></li>
     <li><a href="#">Vergleiche</a></li>
 </ul>
</div>

Die Css :

.buttonnav {
        width: 144px;
        border-right: 1px solid #08296b;
        padding: 0 0 0.3em 0;
        margin-bottom: 1em;
        font-family: Arial, Verdana, Arial, sans-serif;
        font-size : 8pt;
        background-color: #08296b;
        color: #333;
        }

       .buttonnav ul {
                list-style: none;
                margin: 0;
                padding: 0;
                /*border: none;*/
                }

        .buttonnav li {
                border-bottom: 1px solid #08296b;
                /*margin: 0;
                list-style: none;
                list-style-image: none;*/
                }

        .buttonnav li a {
                display: block;
                padding: 4px 5px 5px  0.5em;
                border-left: 1px solid #08296b;
                border-right: 1px solid #08296b;
                background-color: #08296b;
                color: #fff;
                text-decoration: none;
                /*width: 100%;*/
                }

        html>body .buttonnav li a {
                width: auto;
                }

        .buttonnav li a:hover {
                border-left: 1px solid #08296b;
                border-right: 1px solid #5ba3e0;
                background-color: #2586d7;
                color: #fff;
                }

        .buttonnav li #active {
                border-left: 2px solid #08296b;
                border-right: 1px solid #08296b;
                background-color: #2586d7;
                color: #fff;
                }

Ich muss gestehen, dass die CSS befehle schon von Ihr vorgegeben waren (ich soll die Seite nur umbauen)

[Boris]

In welchen Browser springt das denn? Hast du einen Link für uns? Auf den ersten Blick sieht das ganz ok aus ...

[wolfsblut]

Das Problem hat sich von selbst erledigt.
Wollte das Bild schon aufgeben und hab rumprobiert, bis ich zufällig die Lösung gefunden hatte (war schon fast am Aufgeben) :

Habe aus dem p-Tag ein div-Tag gemacht und schon war das Problem mit der Verschiebung weg!

Merke :
Wenn ich zwei Div's den selben Namen geben will und diese die CSS richtig interpretieren sollen, muss mindestens ein anderes Div dazwischen stehen, damit es funktioniert!

Danke trotzdem, fürs Kopfzerbrechen!

... Mich würde zwar noch immer interessieren, warum das so ist, aber vielleicht stolpere ich eines schönen Tages ja auch zufällig beim Duchstöbern oder auf der Suche nach andern Antworten, über des Rätsels Lösung ^.^

LG

EDIT :

In welchen Browser springt das denn? Hast du einen Link für uns? Auf den ersten Blick sieht das ganz ok aus ...

Hab mit IE7 gearbeitet... leider stehen mir momentan kein FF, Opera, oder andere Browser zur Verfügung!

[the0bone]

Mal doof frage: Hat das einen Grund, warum du Liste unterbrichst?
Kannst doch das Bild auch in einen li packen.

Oder eine li Verschachtelung.

[Boris]

Wenn ich zwei Div's den selben Namen geben will und diese die CSS richtig interpretieren sollen, muss mindestens ein anderes Div dazwischen stehen, damit es funktioniert!

Das ist mal ziemlicher Unsinn und solltest du dir nicht merken.

Du solltest beachten, dass HTML Elemente unterschiedliche Standardabstände haben - wie auch ein <p>.

Daher macht man generell erstmal einen sogenannten CSS Reset, der alle Abstände auf 0 setzt - darauf basierend kann man dann aufbauen.

[Rinaldo]

Und der Reset funktioniert so:

in die CSS-Datei folgendes einfügen:

* {margin:0; padding:0}

[Boris]

Und der Reset funktioniert so:

in die CSS-Datei folgendes einfügen:

* {margin:0; padding:0}

Das ist eine schnelle Variante, die aber nicht unbedingt die beste ist.

[Desko]

Eine etwas längere wie ich sie gern benutze wäre diese hier. Damit schafft man erstmal in jedem Browser die gleiche Basis:

@media screen{
	
* { padding: 0;margin: 0; }

h1, h2, h3, h4, h5, h6, p, blockquote,
address, pre, ul, ol, dl, table {margin-bottom: 1em; }

blockquote {margin: 1em 2em; }

ul ol, dl {margin-left: 1em; }

ul ul, ul ol, ul dl, ol ul, ol ol, ol dl,
dl ul, dl ol, dl dl {margin-top: 0; margin-bottom: 0; }

ul { list-style-type: square; }
ol { list-style-type: decimal; }

ul ul { list-style-type: disc; }
ol ol { list-style-type: lower-alpha; }

ol ol ol, ol ol ul, ol ul ul, ol ul ol, ul ul ul, ul ul ol,
ul ol ol, ul ol ul { list-style-type: circle }

option { padding-left: 0.2em; padding-right: 0.3em; }
fieldset, a img { border: 0; }
html { height: 101%; }

body {
	background-color: white;
	color: black;
	font-family: Arial, Verdana, "Lucida Sans Unicode", Helvetica,
	Arial, sans-serif;
	font-size: small;
}

h1, h2, h3, h4, h5 h6 {
	font-family: Verdana, sans-serif;
}

h1 { font-size: 200%; }
h2 { font-size: 184.62%; }
h3 { font-size: 153.85%; }
h4 { font-size: 138.46%; }
h5 { font-size: 123.08%; }
h6 { font-size: 107.69%; }

p { font-size: 99%; }

} /*Ende @media */

[Rinaldo]

@Boris: klar, aber ich wollt einfach auch noch was dazu schreiben ... Bevor wieder ewig gefragt wird, was denn ein CSS Reset ist.

[hero-master]

Eine etwas längere wie ich sie gern benutze wäre diese hier. Damit schafft man erstmal in jedem Browser die gleiche Basis:

Wobei du hier einiges doppelt definierst und das Meiste sowieso später wieder anders definieren musst
Mehr Sinn macht es da alles auf 0 zu stellen, also richtig reseten:
http://meyerweb.com/eric/thoughts/20...reset-reloaded

Wobei ich der Meinung bin, das sogar das zu viel ist und man die Hälfte (zumindest bei einer relativ übersichtlichen Website) gar nicht reseten muss bzw. man es sowieso früher oder später selbst definiert.
Dazu auch ein kleiner Artikel von Jens Meiert

Aber genug dazu, ist ja n bisl off-topic