Topmenu leicht abändern

[Mike Randoo]

Hallo Community,
gibt es eine Möglichkeit, die Einträge im Topmenu nach links und rechts aufzuteilen.
Ich glaube, (bin kein Experte) im Moment wird das übers CSS mit float:left alles nach links gerückt.

Meine Wunschvorstellung: "Home" soll links bleiben. Alles andere gerne in die rechte Ecke.

Freu mich über jede Antwort.
THX in advance.
Mike



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

[jonnyB]

eigentlich hast dir das doch schon selbst beantwortet.

außer für "home" legste dir ne neue css-eigenschaft an mit float-right.

[Mike Randoo]

@jonnyB

Danke für die schnelle Antwort. Klingt logisch, allerdings habe ich mit dem Einbau Probleme... Nach rechts gerutscht sind die "Links" mittlerweile, aber sie stehen untereinander und Farbe und Schriftgröße stimmen nicht mehr.

Was hab ich gemacht: Hab die ID "topmenu" kopiert, in "topmenu2" umbenannt und darin float:left zu float:right geändert und anschließend versucht, den Quelltext anzupassen.

Hier mal mein Versuch (bitte verbessern):

Code: PHP  [Auswählen]

<div id="topmenuwrap">
        <ul id="topmenu">
            <li><a href="index.php">Home</a></li>
        </ul>
        <ul id="topmenu2">
            {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
           {/if}
            <li><a href="{$cart}">{#link_cart#}</a></li>
           <li><a href="{$checkout}">{#link_checkout#}</a></li>
           {if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
           {php} } {/php}{/if}
        </ul>
        <div id="languages">{$box_LANGUAGES}</div>
    </div>

GROSSER DANK FÜR JEDE HILFE!!

[jonnyB]

die css angaben sind wichtiger, diese mußt mal posten (aber nur die die benötigt werden )

[Mike Randoo]

Die CSS brauch ich nich mehr posten, denn nu is alles jut! Dein letzter Tip hat mir auf die Sprünge geholfen.

Also für alle, die das Topmenu in Einträge links und rechts aufteilen wollen. Tut folgendes:

alle Dateien in templates/deintemplate/... (ich habe das xtc5 verwendet, vielleicht gehts auch nur da)

index.html...
Nach dem letzten Link, den ihr links haben wollt, schließt ihr das erste "ul"-Tag und öffnet ein neues und vergebt diesem auch eine neue ID (in meinem Fall hab ich es "topmenu2" genannt - alles zu sehen im Code 2 Posts weiter oben)

stylesheet.css...
kopiere alle ID-Punkte, die "topmenu" heißen (sind eine Hand voll), setze sie direkt unter den letzten bisher vorhandenen "topmenu"-Eintrag und schreibe wirklich jede Stelle in den NEU hinzugekommenen "topmenu"-IDs in "topmenu2" um.
In den IDs, in denen ihr float:left; findet, ändert ihr das ganze in float:right; um.

Am Ende beide Dateien wieder aufn Server kopieren, eventuell mal den Browsercache leeren und schon ist der gewünschte Effekt erzielt.

Das wars.

Nochmals vielen Dank an jonnyB!

[jonnyB]

da nicht für

[Mike Randoo]

Moinsen zusammen.
Muss das Thema leider nochmal vorholen, da es in manchen Browsern Darstellungsprobleme gibt... Vor allem der IE (6 & 7) macht leider so seine eigenen Dinge.

Wenn ich den Code wie oben beschrieben nehme, dann ergibt das im IE und im FF2 jeweils zwei Navigationsleisten. Im IE ist die zweite Leiste leer, im FF2 setzt er die Navi-Punkte der rechten Seite sogar in die untere Zeile. (siehe Bildle anbei...)

Hat jemand eine Lösung für dieses Problem???

Großes Danke für jede Mühe schon mal vorausgeschickt!
Mike

  [ Für Gäste sind keine Dateianhänge sichtbar ]

[Mike Randoo]

Vielleicht helfen die CSS-Angaben demjenigen, der sich meinem kleinen Problem annehmen möchte...

Code: XML  [Auswählen]

#topmenuwrap {
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu {
        float:left;
        list-style-type:none;
        padding:0;
        margin:0;
        height:36px;
        font-size:13px;
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu li {
        height:36px;
        float:left;
        padding: 0px 25px 0px 25px;
        margin:0;
        background-position:right;

}
#topmenu a, #topmenu a:link, #topmenu a:visited, #topmenu a:hover, #topmenu a:active {
        line-height:36px;
        vertical-align:middle;
        text-decoration:none;
        font-weight:bold;
        cursor:pointer;
        color:#fff;
        margin:0;
        padding:0;
}
#topmenu a:hover {
        color:#DB9501;
}

#topmenu2 {
        float:right;
        list-style-type:none;
        padding:0;
        margin:0;
        height:36px;
        font-size:13px;
        background: url(img/bg_topmenu.gif) repeat-x;
}
#topmenu2 li {
        height:36px;
        float:right;
        padding: 0px 25px 0px 25px;
        margin:0;
        background-position:right;

}
#topmenu2 a, #topmenu2 a:link, #topmenu2 a:visited, #topmenu2 a:hover, #topmenu2 a:active {
        line-height:36px;
        vertical-align:middle;
        text-decoration:none;
        font-weight:bold;
        cursor:pointer;
        color:#fff;
        margin:0;
        padding:0;
}
#topmenu2 a:hover {
        color:#DB9501;

Danke!

[guensi]

Ich würde es mal so versuchen:

Code: XML  [Auswählen]

<div id="topmenuwrap">
     <div id="topmenulinks">
        <ul id="topmenu">
            <li><a href="index.php">Home</a></li>
        </ul>
     </div>
     <div id="topmenurechts">
        <ul id="topmenu2">
            {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
            {/if}
            <li><a href="{$cart}">{#link_cart#}</a></li>
            <li><a href="{$checkout}">{#link_checkout#}</a></li>
            {if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
            {php} } {/php}{/if}
        </ul>
     </div>
        <div id="languages">{$box_LANGUAGES}</div>
    </div>

Dann in der CSS jeweils für den Container topmenulinks und topmenurechts float:left; und float:right; definieren

[Mike Randoo]

Hallo guensi,
vielen Dank für die Antwort. Habe noch ein bisschen rumgeprokelt und eine für mich ganz gute Lösung gefunden. Nun scheint zumindest der IE zu gehorchen...

Viel muss gar nicht verändert werden. Die index.html kann bleiben wie sie ist und im CSS macht man folgende Änderungen:

Füge #topmenu und #topmenu2 noch jeweils eine width: 50%; hinzu.

Und dann noch #topmenuwrap um die 2 Punkte height und overflow ergänzen: ("height" bitte entsprechend der eigenen Navileistenhöhe definieren...)

Code: XML  [Auswählen]

#topmenuwrap {
    background: url(img/bg_topmenu.gif) repeat-x;
    height:36px;
    overflow:hidden;
}

Hoffe, ich konnte dem ein oder anderen helfen.
Greetings

[rlippertz]

Hallo,
vielen Dank für die Infos, funktioniert sehr gut.
width: 50% hat bei mir nicht´s gebracht ausser das die Anzeige (topmenu2) rechts nicht mehr vorhanden war (in IE7 + FF).
Liegt vielleicht an meiner aktuellen Version vom 25.04. !?

Gruss