Breadcrumb-Zeile in drei Abschnitten mit verschiedenen Inhalten füllen

[chris pampuch]

Hallo, ich hab ein Problem, das wahrscheinlich banal ist, aber ich kriegs nicht gebacken:
Ich möchte die breadcrumb-Zeile in drei Teile unterteilen und mit drei verschiedenen Inhalten füllen.
Im Browser kommen die drei Teilstücke aber immer untereinander.
[ Für Gäste sind keine Dateianhänge sichtbar ]
Hier der code der index.html:

Code: PHP  [Auswählen]

<div id="breadcrumb" style="width:490px">{$navtrail}</div>
<div id="breadcrumb" style="width:245px">{$box_LANGUAGES}</div>
<div id="breadcrumb" style="width:245px">&nbsp;</div>

Und hier aus dem stylesheet:

Code: PHP  [Auswählen]

#breadcrumb {
/*clear:both;*/
float:left
color:#c64934;
padding:1px 0 10px 15px;
list-style-type:none;
outline:none;
height:22px;
background:#fff url(img/bg_breadcrumb.gif) repeat-x;
font-size:11px;
}

So siehts im Browser aus: http://harpamundi.de/shop/
Wo liegt mein Fehler?
Danke für Eure Hilfe!
Chris

Linkback: https://www.modified-shop.org/forum/index.php?topic=25199.0

[Modulfux]

Aus

Code: CSS  [Auswählen]

#breadcrumb {
/*clear:both;*/
float:left
color:#c64934;
padding:1px 0 10px 15px;
list-style-type:none;
outline:none;
height:22px;
background:#fff url(img/bg_breadcrumb.gif) repeat-x;
font-size:11px;
}

wird

Code: CSS  [Auswählen]

#breadcrumb {
/*clear:both;*/
float:left
color:#c64934;
padding:1px 0 10px 15px;
list-style-type:none;
outline:none;
height:22px;
background:#fff url(img/bg_breadcrumb.gif) repeat-x;
font-size:11px;
display:inline;
}

Dem style="width:490px" und den anderen Angaben musst du aber 15px durch das padding-left aus der CSS mitgeben. Ansonsten ist deine Gesamtbreite mehr als 980px.

Gruß
Ronny

[chris pampuch]

Danke Ronny,

jetzt sind sie in einer Reihe.
Aber die folgenden div-Container grenzen an den Inhalt an (nicht an der Container-Grenze) und verschieben sich mit der Inhaltslänge :
[ Für Gäste sind keine Dateianhänge sichtbar ]
Irgendwas fehlt noch, aber was?
Bin noch css-Anfänger...

Gruss Christoph

[chris pampuch]

Habe nun in self-html gesucht und display:inline durch display:inline-block ersetzt.
Jetzt geht es, aber es hat in der Mitte einen Versatz, für den ich keinen Grund finde, weil die beiden gegeneinander versetzten Teile genau die gleichen Werte haben. Nur der Fahnen-Teil hat einen etwas grösseren padding-top Wert, dort passt es aber. Hier der Code:

Code: PHP  [Auswählen]

  <div id="breadcrumb" style="width:550px; padding-top:2px; padding-left:10px">{$navtrail}</div>
  <div id="breadcrumb" style="width:315px; padding-top:2px">Aktuelle Sprache:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aktuelle W&auml;hrung:</div>
  <div id="breadcrumb" style="width:100px; padding-top:5px">{$box_LANGUAGES}</div>
 

und hier wie es im Browser aussieht:
[ Für Gäste sind keine Dateianhänge sichtbar ]
Ich weiss im Moment keinen Rat und freue mich über Hilfe!

Christoph

[bretterelse]

du solltest statt id="breadcrumb" => class="breadcrumb" verwenden.

#id sollte nur einmalig in einem Dokument vorkommen
.class dagegen darf mehrmalig verwendet werden