Layout Problem Breadcrumb

[viggo25]

Hallo Wissende,

 

sitze nun schon seit zwei Stunden an dem Thema, dass die Breadcrumb ein paar Pixeln höher rutscht.

 

Das Icon für Home habe ich höher gesetzt bekommen.

Doch alle anderen Änderungen die ich in der global.css im Bereich /* breadcrumb /* vornehme erbringen nicht den gewünschten Effekt.

 

 

Die Schrift rückt einfach nicht neben das Haus.

 

Abschnitt in der global.css sieht so aus:

 

 

/* ************************************************************************************************
  BREADCRUMB
************************************************************************************************ */
.breadcrumb { height:26px; font-size:12px; background-color:#666; margin-bottom: 15px; color:#FFF; text-shadow:0 1px 0 #000;}
.breadcrumb .navigation-pipe {}
.breadcrumb img {}

 

Oder mache ich einen Denkfehler und ich muss das ganz woanders einstellen?

 

Danke

[BluTiGeS]

Sind noch andere CSS IDs oder Klassen in der Umgebung?

Hast du mal mit Firebug das ganze gedebuggt?

 

ist die height: 26px vll zu hoch, sprch zu hoher umrandungsereich?

Edited January 27, 2014 by BluTiGeS (see edit history)

[viggo25]

Also height ist es nicht, wenn den Wert ändere, ändert sich nur die Höhe des grauen Hintergrunds.

Der Text des Navigation bleibt an der gleichen Stelle.

 

Was ist Firebug? Wie tue ich es wo?

 

Natürlich sind noch viele andere css.files auf der Seite eingebunden.

 

 

 

 

 

 

 

 

 

 

und im Quellcode sieht es so aus:

 

<!-- Breadcrumb -->

<

 

div class="breadcrumb">

 

<a href="http://shop.bike-centrum.com/" title="zurück zu Startseite"><img src="http://shop.bike-centrum.com/themes/default/img/icon/home.gif" height="26" width="26" alt="Startseite" /></a>

 

<span class="navigation-pipe" > / </span>

 

<span class="navigation_page">Lieferung / Versand</span>

 

</div>

<!-- /Breadcrumb -->

 

 

 

Ich schon so viel rumprobiert, ich kriegs nicht hin

[viggo25]

Woher weiß ich in welchem css.file der Eintrag für die Class Navigation_page ist?

 

<span class="navigation_page">Lieferung / Versand</span>

 

In der global.css im Bereich breadrumb ist es jedenfalls nicht.

Ich glaube hier muss ich suchen, oder?

 

EDIT:

Habe die class .navigation_page in die global.css eingefügt und vertikal-align auf super gesetzt.

 

.breadcrumb { height:26px; font-size:14px; background-color:#666; margin-bottom: 15px; color:#FFF; text-shadow:0 1px 0 #000;}
.breadcrumb .navigation-pipe { vertical-align: super;  }
.breadcrumb img {}
.breadcrumb .navigation_page { vertical-align: super; }

 

funktioniert leider nur auf der "ersten Ebene", wenn ich z.B. in Unterkatergorien gehen verschiebt es sich wieder nach unten.

 

http://shop.bike-centrum.com/de/10-luftfilter

 

Mhhh, irgendwelche Tipps?

Edited January 27, 2014 by viggo25 (see edit history)

[BluTiGeS]

habs mir mal angeschaut:

in der global css das suchen:

.breadcrumb img { }

ist bei dir leer, das auf folgenden ändern

.breadcrumb img {
    position: relative;
    top: 5px;
}

deine vertical-align: super kannst zwar machen aber nicht am standard.

 

 

 

Firebug ist ein Firefox plugin

 

 

[viggo25]

Hat leider nichts gebracht, siehe hier:

http://shop.bike-centrum.com/de/10-Luftfilter

 

bin jetzt auch müde, sitze seit 4h an dieser kleinen Sache - es nervt.

muss erst mal Pause machen

 

danke trotzdem

[BluTiGeS]

mach dein vertical-align : sub weg und ersetz es durch die line-height, sonst schau dir mal ein standard theme an da siehste alle css sachen wie es standardmäßig funktioniert

[viggo25]

habe alles wieder zurückgesetzt, leider ist es nicht das, was ich will

ja standardmäßig funktioniert alles, aber eben für meine Geschmack zu tief

 

line-height bringt Garnichts, da kann ich eintragen was ich will, keine Änderung

 

http://shop.bike-centrum.com/de/content/1-lieferung-versand

Edited January 27, 2014 by viggo25 (see edit history)

[BluTiGeS]

Du musst das gesamte sehen also nicht nur ein style sondern das Zusammenspiel.

 

Es müssen vll mehr stellen angepasst werden, oder du schreibst dir das theme selbst um und machst deine eigene Struktur mit div und Co.

 

Alles möglich....

[Lockesoft]

Deswegen heisst das Cascading Style Sheet.... :-)

Einfach weil manchmal alles irgendwie voneinander abhängt........

Der Gedanke dahinter geht eigentlich sogar davon aus, dass immer alles voneinander abhängt. Einmal Startwerte / Größen definiert und man kann grenzenlos skalieren. :-)

Ist nicht immer ganz einfach nachzuvollziehen, wo und warum man an welcher Stelle etwas ändern muss, weils es selten auch nur an einer Stelle nachzulesen ist, wo was genau festgelegt wird, aber in letzter Konsequenz fast immer logisch.

 

LG Klaus / Lockesoft

[Whiley]

Hallo viggo25,

 

in der global.css ab Zeile 562 findest du:

 

        BREADCRUMB
************************************************************************************************ */
.breadcrumb { height:26px; font-size:14px; background-color:#666; margin-bottom: 15px; color:#FFF; text-shadow:0 1px 0 #000;}
.breadcrumb .navigation-pipe { margin:0 3px 0 5px; }
.breadcrumb img { position: relative; top: 0px; }
.breadcrumb .navigation_page { line-height: 10px; }

ersetzte diesen Teil durch:

 

        BREADCRUMB
************************************************************************************************ */
.breadcrumb { height:26px; font-size:14px; background-color:#666; margin-bottom: 15px; color:#FFF; text-shadow:0 1px 0 #000;}
.breadcrumb .navigation-pipe { margin:0 3px 0 5px; }
.breadcrumb img { position: relative; top: 0px; vertical-align:middle; }
.breadcrumb .navigation_page { line-height: 26px; }

 

Grüsse

Whiley

[viggo25]

Danke Whiley, das wars. Diese Einstellungen passen.

Ich kannte height-line nicht und wusste nicht so richtig welchen Wert ich einsetzen muss.

 

Aber so passt es, danke.