Trennlinien zwischen Navigationspunkten

Diskussionen rund um die Templates (incl. Smarty)
Antworten
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Trennlinien zwischen Navigationspunkten

Beitrag von Kopernikus »

Hallo allerseits

Ich hoffe, dass mir hier jemand den entscheidenden Tipp geben kann. Ich bin zwar kein css greenhorn, fühle mich aktuell aber gerade so. Der Grund: Ich möchte zwischen meinen Navigationspunkten kleine Trennlinien einfügen. Das Problem, ich weiss nicht wo ich die Klasse einbauen muss. Xantiva hat mir damals die Navi gebaut. Vielleicht hast Du mir ja den entscheidenen Tipp?

So siehts aktuell aus:
Bild

Und so solls anschliessend aussehen:
Bild

Und hier soll die Klasse eingebaut werden. Doch wo und wie?? :roll:

Code: Alles auswählen

{config_load file="$language/lang_$language.conf" section="box_categories_dropdown"}

{if count($CATEGORIES)}
   <ul id="box_categories_dropdown">
<span class="home_icon"></span>
</a>
        {foreach name=loop from=$CATEGORIES item=CAT}
            <li class="{if $CAT.current} active{/if}{if $smarty.foreach.loop.last} dropdown_right{/if}"> <h2> <a href="{$CAT.link}" title="{$CAT.title}">{$CAT.title}</a></h2>
                {if $CAT.children}
                    <div class="dropdown_{$CAT.children|@count}columns{if $smarty.foreach.loop.iteration > (($smarty.foreach.loop.total + 1) / 2)} align_right{/if}">
                        {foreach name=subloop from=$CAT.children item=SUBCAT} 
                             <div class="col_1">
                              <a class="dropdown_level2" href="{$SUBCAT.link}" title="{$SUBCAT.title}">{$SUBCAT.title}</a>
                                <ul>
                                    {foreach name=level3loop from=$SUBCAT.children item=LEVEL3CAT}
                                      <li><div class="navcontainer"><h3><a href="{$LEVEL3CAT.link}" title="{$LEVEL3CAT.title}" class="{$LEVEL3CAT.class}">{$LEVEL3CAT.title}</a></h3></div></li>
                                    {/foreach}
                                </ul>
                            </div>
                        {/foreach}
                    </div>
                {/if}</li>
            {/foreach}
    </ul>
{/if}
Bin jetzt seit 4 Stunden am testen und sehe den Wald vor lauter Bäumen nicht mehr.
Bodyshop
Beiträge: 15
Registriert: Fr 2. Nov 2012, 23:07
Shop Version: Xt Commerce 3.0.4.S.P.2.1:)

Re: Trennlinien zwischen Navigationspunkten

Beitrag von Bodyshop »

also der CSS Befehl der dir fehlt ist ein (bin mir nicht sicher ob der Klassenname stimmt, dafür müsste ich mir das mit Live und mit Firebug ansehen)

Entweder #home_icon {

oder

#dropdown_right {

border-right:1px solid #FFFFFF; }

Die Farbe ist nur als Beispiel gedacht.

Gruß Bodyshop

Edit: In deinem Shop den ich grad übers Forum gefunden habe wäre es die Klasse
#box_categories_dropdown li:hover

In der datei dropdown.css Zeile 91

also dort einfach mit einfügen
border-right:1px solid #cccccc;
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Trennlinien zwischen Navigationspunkten

Beitrag von Kopernikus »

Hallo bodyshop und herzlichen Dank für Deine Antwort.

Hmmm, das Problem ist, dass bei #home_icon die vertikale Linie nur 1x link und bei #dropdown_right nur 1x rechts erscheint.

Anbei noch der Link zu meinem Shop: http://www.engelis-naturshop.ch
Xantiva
Beiträge: 948
Registriert: Mo 10. Mai 2010, 16:26
Shop Version: 1.0.10 [dev]
Kontaktdaten:

Re: Trennlinien zwischen Navigationspunkten

Beitrag von Xantiva »

Hi,

wenn, dann musst Du das dem "li" - Element zuordnen:

Code: Alles auswählen

#box_categories_dropdown li {
    border-right: 1px solid
}
Allerdings musst Du dann etwas mit padding und margin experimentieren, damit die Striche zentriert angezeigt werden. Das wirkt sich dann aber auf das Flyout aus ...

Ciao,
Mike
Mein Shop: http://www.basteln-selbermachen.de
Kopernikus
Beiträge: 390
Registriert: Fr 19. Okt 2012, 12:15

Re: Trennlinien zwischen Navigationspunkten

Beitrag von Kopernikus »

Perfekt, danke :)
Antworten