www.kokett-kosmetik.de

[Donco]

Ich nutze ebenfalls das Shop6 Template und bei mir tritt der gleiche Fehler im IE7 auf. Das Wort Katalog und die Flaggen sind im IE7 verschoben. Das scheint ein Fehler im Shop6 Template zu sein.
Weiss jemand wie ich beides an die richtige Stelle setze?

[hedon02]

Das liegt an den versteckten ">>" Elementen, die den breadcrumb-links angefügt werden. Die "Links" erhalten ein "float:left; display:block", aber nicht die angefügten Elemente.

Also entweder diese versteckten Zeichen gleich löschen, was schwierig sein dürfte. Oder aber Du baust das CSS der "navtrail-links" um, indem die "floats" entfernt werden. D.h.anstatt "display:block; float:left" muss mit "display:inline-block" gearbeitet werden. (ist ein Block Element ohne Umbruch, wodurch das "float" nicht mehr notwendig ist .

Code: CSS  [Auswählen]

a.headerNavigation {display:inline-block; float:none}

dann muss noch ein Container um die "navtrail-links" mit der CSS-Eigenschaft:

Code: CSS  [Auswählen]

.navtrail-container {float:left;}

ungetestet, sollte aber funktionieren. 

Grüsse

[Donco]

@hedon02 , vielen Dank für die Rückmeldung. Der erste Schritt hat geklappt. Mein Code sieht jetzt so aus:

Code: CSS  [Auswählen]

#breadcrumb a, #breadcrumb a:link, #breadcrumb a:visited, #breadcrumb a:active {
        line-height:33px;
        text-decoration:none;
        outline: none;
        font-weight:normal;
        cursor:pointer;
        color:#44B3FF;
        margin:0px;
        padding:0px;
        background:url(img/breadcrumb_bl.gif) no-repeat center right;
        display:inline-block;
        float:none;
        padding-right:16px;
        padding-left:6px;
}

Darunter hab ich folgendes probiert. Ich bin CSS Laie muss ich dazu sagen.

Code: CSS  [Auswählen]

#breadcrumb a:link {
        float:left;    
}

Im Moment sind nur noch die Flaggen im IE verschoben. Katalog ist auf der richtigen Höhe.
War das so richtig?

[hedon02]

Na das macht aber keinen Sinn.

Die "breadcrumb a" oder "breadcrumb a:link" sprechen in dem Template alle Links an, auch die der language flags. Das ist ein wenig ungünstig gelöst, kann man sicher besser machen. Aber...deshalb habe ich ja geschrieben, dass Du die Navtrail-Links direkt ansprechen sollst. Die haben schon die Klasse "headernavigation".

D.h. die Links erhalten CSS von der CSS-Anweisung "breadcrumb a",...und zusätzlich die neuen CCS-Regeln "float:none; display:inline-block". Die beiden "neuen Regeln" überschreiben dabei das "display:block; float:left" der "breadcrumb a".

Damit erreichst Du, das die ">>" dort stehen, wo sie ursprünglich auch mal hingehört haben.

Damit im IE nun aber auch die Flaggen nicht in einer neuen Zeile stehen,... Container um die Links und "float:left" und alles sollte in seinen Platz fallen.

kurz gesagt... Änderungen rückgängig machen und der Anleitung folgen, wie ich es beschrieben habe.

[Donco]

Vielen Dank für die Rückmeldung. Ich krieg's irgendwie nicht hin. Ich verstehe die CSS Zusammenhänge noch zu wenig, aber es ist learning by doing.

Ich finde "headernavigation" nicht. Hier mein Code:

Code: CSS  [Auswählen]

/* HEADER WITH LOGO, SEARCH BOX AND LANGUAGE SELECTION */
#header {
        height:187px;
        border:0px 0px 0px 0px solid #d3d3d3;
        background:#FFFFFF url("../../templates/shop6/Musik-gemafrei.png") no-repeat;
}
#header #logo {
        float:left;
        margin:30px 0 0 20px;
}
#header #search {
        width: 230px;
        height:75px;
        float:right;
        color:#fff;
        padding:30px 0px 0px 60px
}
#header #search a {
        color:#fff;
        font-size:11px;
        outline: none;
}
#header td {
        padding-top:1px;
        padding-right:4px;
}
/* BREADCRUMB PATH AS LIST */
#breadcrumb {
        clear:both;
        list-style-type:none;
        outline: none;
        height:33px;
        line-height:33px;
        padding-left:10px;
        background: #ffffff url(img/btn_bg.png) repeat-x bottom left;
        font-size:11px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;  
        border-radius:6px;
        margin:18px 0;
        border:1px solid #44b3ff;
        clear:both;
        color:#fff;
}
#breadcrumb a, #breadcrumb a:link, #breadcrumb a:visited, #breadcrumb a:active {
        line-height:33px;
        text-decoration:none;
        outline: none;
        font-weight:normal;
        cursor:pointer;
        color:#44B3FF;
        margin:0px;
        padding:0px;
        background:url(img/breadcrumb_bl.gif) no-repeat center right;
        display:block;
        float:left;
        padding-right:16px;
        padding-left:6px;
}
#breadcrumb a:hover{color:#44B3FF}
#breadcrumb .languages {float:right; margin-top:10px; margin-right:18px;}
#breadcrumb .languages a { background:none; padding:0 0 0 9px; }

Wie setze ich einen Container um die Links?

[hedon02]

Die gibt es nicht im CSS. Die Klasse steht aber im "html" der "links". Also einfach in die "stylesheet.css" unterhalb Zeile 62 den genannten Code einfügen.

Den Container um die "links" müsstest Du in der "index.html" um die {$navtrail} legen.

Code: XML  [Auswählen]

<div id="breadcrumb">
 <div class="navtrail-container">{$navtrail}</div>
 {$box_LANGUAGES}
</div>

[Donco]

Ich danke dir vielmals. Jetzt hat es funktioniert und es ist alles an der richtigen Stelle!