ECB Yaml Nav-Bereich zentrieren

[cybertramp]

Hallo zusammen,
suche nun schon verzweifelt seit Stunden nach der Möglichkeit, die Navigationsleiste (Home/Warenkorb etc) im YAML-Template [CSS Shop/Onlineshop Template s oder Tabellen Shop/Onlineshop Template s ] zu zentrieren.
Ich hatte es zwischenzeitlich sogar schon mal soweit, dann hab ich irgendwas angeklickt, und weg war es unwiderbringlich.
Ich dachte, ich hätte es mit der Einstellung in der

yaml\css\screen\top_navigation_slidingdoor.css
/
#nav {
background: #252527 url(../../img/sliding_door/background_top_navi.gif) repeat-x top left;
padding-left: 13 px;
}
/
geschafft, indem ich bei padding-left die px auf 240 geändert hatte. Danach hat es wie gesagt mal kurzfristig super geklappt.
Nun kann ich da einstellen was ich will - es ändert sich nix mehr. :icon_veryangry:

Bin ich auf dem völlig falschen Pfad ??

Die Col1 und 2 sind mit 200 px festgelegt, so der Main-Bereich variabel ist. Gesamtbreite ist die StandarDeinstellung von 980 (meine ich, so war der Wert).

Wenn mir jemand nen hilfreichen Tritt geben könnte, wäre das prima. Beiße hier nämlich gleich in die Tasten. f

[Comy]

theoretisch mit

padding-left:auto; padding-right:auto

[cybertramp]

''>ZITAT(Comy @ Apr 18 2009, 1:24) 164748
theoretisch mit

padding-left:auto; padding-right:auto
[/b]


in der
top_navigation_slidingdoor.css

??

[cybertramp]

Hallo nochmal,

so, leider kam ich mit dem Tipp aus der letzten Antwort nicht weiter - es bewirkte schlicht und ergreifend nix.


So halbwegs hab ich es jedoch mit Änderungen an der Datei Top_navigation_slidingdoor.css (Änderung des Link [ Verweis auf andere Stelle der Webseite ]en EinzugsBereichs / Abstands beim Nav_main hinbekommen.

Mein Problem ist nur, dass der Button "ABMELDEN" ja beim ausgeloggten User aus der Navi-Leiste, verschwindet, so dass es nicht mehr zentral ist (weil der Button fehlt).

Ich finde auch verdammt nochmal nicht den Bereich, der aufgerufen wird beim Ausloggen (bzw. die Regel für den Nav-Bereich nach dem Ausloggen / vor dem Einloggen).

Könnte mir da jemand auf die Sprünge helfen ? Ich stehe hier voll auf dem Schlauch.

Merci !

[msslovi0]

''>ZITAT(Comy @ Apr 18 2009, 1:24) 164748
theoretisch mit

padding-left:auto; padding-right:auto
[/b]

Weder theoretisch noch praktisch. Es gibt keinen Wert 'auto' für die Eigenschaft 'padding'. Dieser existiert nur für 'margin'.

[msslovi0]

''>ZITAT(cybertramp @ Apr 22 2009, 23:31) 166344
so, leider kam ich mit dem Tipp aus der letzten Antwort nicht weiter - es bewirkte schlicht und ergreifend nix.
So halbwegs hab ich es jedoch mit Änderungen an der Datei Top_navigation_slidingdoor.css (Änderung des Link [ Verweis auf andere Stelle der Webseite ]en EinzugsBereichs / Abstands beim Nav_main hinbekommen. [/b]

Das Problem ist, dass Du der Navigation (#nav_main ul) eine feste Breite geben musst, damit eine AnwenDung von 'margin: 0 auto' auf eben dieses Element irgenDeine Auswirkung hat. Eine feste Breite geht ja aber nicht, wie Du schon festgestellt hast, weil die MenüPunkte variabel sind von ihrer Anzahl her.

[cybertramp]

@msslovi0
Ja, das dachte ich mir ja auch schon fast.

Daher:
Wo ist denn definiert, welche MenüPunkte WANN oder mit welcher Datei aufgerufen werden... das eben find ich nicht.
Wenn ich quasi beide Versionen (Login und Logout) entsprechend anpassen könnte, wäre es ja erledigt (oder denke ich da zu einfach ????)

[msslovi0]

Es gibt eine Möglichkeit, die mit einem etwas größeren Umbau verbunden ist, wobei Du da die Sliding Door einbüßt (die aber eh nicht wirklich genutzt wird):
CSS Set Property: Firebug Change Do, 23. Apr 2009 9:57:36 Uhr
#nav_main {
****Text-align:center;
}
CSS Remove Property: Firebug Change Do, 23. Apr 2009 9:57:41 Uhr
#nav_main ul {
****float:left;
}
CSS Remove Property: Firebug Change Do, 23. Apr 2009 9:57:42 Uhr
#nav_main ul {
****border-left:1px solid rgb(0, 0, 0);
}
CSS Remove Property: Firebug Change Do, 23. Apr 2009 9:57:48 Uhr
#nav_main ul li {
****float:left;
}
CSS Remove Property: Firebug Change Do, 23. Apr 2009 9:58:08 Uhr
#nav_main a span {
****display:block;
}
CSS Set Property: Firebug Change Do, 23. Apr 2009 9:58:00 Uhr
#nav_main a {
****line-height:26px;
}
CSS Remove Property: Firebug Change Do, 23. Apr 2009 9:58:13 Uhr
#nav_main a {
****float:left;
}
CSS Remove Property: Firebug Change Do, 23. Apr 2009 9:58:18 Uhr
#nav_main a {
****padding:0pt 0pt 0pt 9px;
}
CSS Set Property: Firebug Change Do, 23. Apr 2009 9:58:36 Uhr
#nav_main a span {
****padding:5px 11px 8px 1px11px;
}

''>ZITAT(cybertramp @ Apr 23 2009, 9:24) 166384
Wenn ich quasi beide Versionen (Login und Logout) entsprechend anpassen könnte, wäre es ja erledigt (oder denke ich da zu einfach ????)
[/b]

Ja, aber Du hast dann immer noch das Problem, dass es nicht mehr passt, wenn der User zoomt. Wobei das Problem zumindest in der Zukunft mit der Verbreitung der Page Zooms irgendwann der Vergangenheit angehören dürfte.

[gdevelop]

''>ZITAT(msslovi0 @ Apr 23 2009, 9:20) 166382
Das Problem ist, dass Du der Navigation (#nav_main ul) eine feste Breite geben musst, damit eine AnwenDung von 'margin: 0 auto' auf eben dieses Element irgenDeine Auswirkung hat. Eine feste Breite geht ja aber nicht, wie Du schon festgestellt hast, weil die MenüPunkte variabel sind von ihrer Anzahl her.
[/b]
Da würde es sich doch anbieten, ein <div> mit einer festgelegter Breite drumrum zu setzen.

Habs jetzt grade keine Möglichkeit das auszuprobieren, aber so könnte es funktionieren:

"nav_margins">....</div>

**/ Layout Alignment | Layout-Ausrichtung /
**.nav_margins { margin: 0 auto; }

**/ Layout Properties | Layout-Eigenschaften /
**.nav_margins { width: auto;**min-width: 500px; max-width: 700px; }


So gehts, wenn Du bei YAML um die Seiten-Layouts zentrieren will.
Evtl. brauchst Du für den IE noch einen YAML-Workaround für min-width/max-width.

[msslovi0]

Hilft leider nur bedingt. Dann ist zwar möglicherweise der DIV-Container zentriert aber die darin enthaltene Liste steht trotzdem wieder Link [ Verweis auf andere Stelle der Webseite ]sbündig.

[cybertramp]

Erst mal Danke für Eure Bemühungen !

@msslovi0
Mit dem Quelltext zum "grlßeren Umbau" - wo müsste der hin ? in die Slidingdoor-CSS ?

Und müsste ich da was deaktivieren / rausbauen ?

ich bin in Sachen CSS noch ziemlich grün hinter den Ohren und alles ist noch mit viel Sucherei verbunden...

[gdevelop]

''>ZITAT(msslovi0 @ Apr 23 2009, 11:40) 166440
Hilft leider nur bedingt. Dann ist zwar möglicherweise der DIV-Container zentriert aber die darin enthaltene Liste steht trotzdem wieder Link [ Verweis auf andere Stelle der Webseite ]sbündig.
[/b]

Dafür wird dann ja die Min-/Max- Breite gesetzt.
So kann der Container mit den den Inhalten wachsen, bis die max Breite erreicht ist.

[msslovi0]

''>ZITAT(cybertramp @ Apr 23 2009, 11:49) 166444
Mit dem Quelltext zum "grlßeren Umbau" - wo müsste der hin ? in die Slidingdoor-CSS ?
[/b]

Bei YAML schwierig zu sagen. Da wirst Du um die Suche nicht rumkommen.

''>ZITAT</div>Und müsste ich da was deaktivieren / rausbauen ? [/b]

Wie's im Changelog steht.

[gdevelop]

Mit
<div id="nav_container">
****{ begin: main navigation #nav }
****<div id="nav">
****** .....
****</div>
****{ end: main navigation }
</div>
in der index.html
und den folgenden Änderungen in der basemod.css klappt es auch.
#nav_container {**
****margin: 0px auto;
****width: auto;**
****border:0;
****min-width: 30px;
****max-width: 500px;
}

Wegen des "Abmelden" muss amn evtl. die max-width noch justieren.

[cybertramp]

@Gdev

ich Danke Dir sehr herzlich für die Mühe, die Du Dir gemacht haben musst.

ich hab eben schon mal mit Deiner Idee rumgespielt und zentriert ist es schon.
Nun muss ich noch gucken, dass ich die "Ränder" wegkriege, da steht nämlich jetzt was über von der Hintergrundfarbe, sozusagen.
Aber das werd ich hinbekommen, hoffe ich.


Schönen Tag wünsch ich,
Cybertramp

[gdevelop]

''>ZITAT(cybertramp @ Apr 28 2009, 4:24) 167501
@Gdev

ich Danke Dir sehr herzlich für die Mühe, die Du Dir gemacht haben musst.

ich hab eben schon mal mit Deiner Idee rumgespielt und zentriert ist es schon.
Nun muss ich noch gucken, dass ich die "Ränder" wegkriege, da steht nämlich jetzt was über von der Hintergrundfarbe, sozusagen.
Aber das werd ich hinbekommen, hoffe ich.
Schönen Tag wünsch ich,
Cybertramp
[/b]
Wahrscheinlich bist Du mit Deinen Änderungen schon Durch. Falls nicht, dann schau mal nach ob in der Navigations-CSS für #nav_main ul noch ein Wert gesetzt ist, wie
#nav_main ul {
**** margin: 0 0 0 5px;
}

und setz die Wert für die Link [ Verweis auf andere Stelle der Webseite ]en/rechten Ränder auf 0.

[cybertramp]

Hallo !

das hatte ich soweit schon angepasst, Danke !

ist aber nicht so, als hätte ich jetzt keine Fragen mehr ;-)

Kann ich die Besetzung der Nav-Leiste auch für den Fall des Logoff definieren ?
In der index sieht das in dem Bereich derzeit SO aus:



<div id="nav_container">
****{ begin: main navigation #nav }
****<div id="nav">
******<a id="navigation" name="navigation"></a>
******{php}
************// Current Link Hack - by Reinhard Hiebl
************$cur_Link [ Verweis auf andere Stelle der Webseite ] = explode('/', $_SERVER['PHP_SELF']);
************$cur_Link [ Verweis auf andere Stelle der Webseite ] = array_pop($cur_Link [ Verweis auf andere Stelle der Webseite ]);
************if (strpos($cur_Link [ Verweis auf andere Stelle der Webseite ], '?') === true ) {
**********$pos = strpos($cur_Link [ Verweis auf andere Stelle der Webseite ], '?', 1);
**********if ($pos) {
************$cur_Link [ Verweis auf andere Stelle der Webseite ] = substr($cur_Link [ Verweis auf andere Stelle der Webseite ], 0, $pos);
************** }
************}
******{/php}
******<div id="nav_main">
********
**********<li{php} echo $current = $cur_Link [ Verweis auf andere Stelle der Webseite ]=='index.php' ? ' id="current"' : ''; {/php}>Home ({href_Link [ Verweis auf andere Stelle der Webseite ] page=$smarty.const.FILENAME_DEFAULT})
**************{if $account}
************<li{php} echo $current = $cur_Link [ Verweis auf andere Stelle der Webseite ]=='account.php' ? ' id="current"' : ''; {/php}>{#Link [ Verweis auf andere Stelle der Webseite ]_account#} ({$account})
**************{/if}
**************** <li{php} echo $current = $cur_Link [ Verweis auf andere Stelle der Webseite ]=='Shop/Onlineshop / Onlineshopping_cart.php' ? ' id="current"' : ''; {/php}>{#Link [ Verweis auf andere Stelle der Webseite ]_cart#} ({$cart})
**************** <li{php} echo $current = $cur_Link [ Verweis auf andere Stelle der Webseite ]=='checkout_shipping.php' ? ' id="current"' : ''; {/php}>{#Link [ Verweis auf andere Stelle der Webseite ]_checkout#} ({$checkout})
**************** { [ ]Forum (http://forum.yaml.de/) }
**************{if $account}
****************{php} if (isset($_SESSION['customer_id'])) { {/php}
************<li{php} echo $current = $cur_Link [ Verweis auf andere Stelle der Webseite ]=='logoff.php' ? ' id="current"' : ''; {/php}>{#Link [ Verweis auf andere Stelle der Webseite ]_logoff#} ({$logoff})
****************{php} } {/php}
**************{/if}
************
******</div>
****</div>
****{ end: main navigation }

Ich würde nun gern für den Fall, dass der Besucher keinen Account hat (also das Gegenteil von {if $account}) einen anderen Nav-Button anstatt des ABMELDEN-Buttons einsetzten, (z.b. ANMELDEN) so dass ich die Verschiebung der Leiste bei LOGOFF umgehen kann.

Was ist also das Gegenteil von {if $account} ??
Gibt es das überhaupt ?

[cybertramp]

Soooo, ich hab es jetzt. Und zwar hab ich noch etwas mit der Lösung von msslovi0 rumexperimentiert.

Für diejenigen, die es wegen Nachbau oder so interessiert, hier sind die Änderungen mit den zugehörigen Dateien:

Entsprechend der Angaben von Msslovi0 sehen die Einträge in der top_navigation_slidingdoor.css nun so aus:


#nav_main {
********Text-align:center;
********width: 100%;
********overflow: hidden;
********background-color: transparent;
****** }


#nav_main ul li {
********display: inline;
********margin: 0;
****************padding-left: 3px;
********padding-right: 5px;
********** ****font-size: 1.0em;
********line-height: 1em;
********list-style-type: none;
********border-right: 1px #000 solid;
********}


#nav_main a {
********background: url(../../img/sliding_door/left_both.gif) repeat-x left top;
********background-position: 0% -79px;
********margin: 0;
********Text-decoration: none;
****************line-height:26px;****
****}


****#nav_main a span {
********float: left;
********background: url(../../img/sliding_door/right_both.gif) repeat-x right top;
********background-position: 100% -79px;
****************padding: 5px 11px 8px 1px 11px[/color];
********color: #FFF;
********font-weight: bold;
********white-space: nowrap;
****}



Mit Padding-right bzw. Left im Bereich #nav_main ul li habe ich die Abstände etwas gezogen, die "Buttons" hingen zuvor sehr dicht aneinander, bzw. der Text war so reingequetscht.

Funktioniert soweit alles prima, hab zwar noch nicht alles Durchprobiert, aber ich denke, das kann man so nehmen.

Die Lösung von GDev hätte einiges Hin und Her beim Anpassen im Login und Logout-Bereich benötigt, mit denen ich als Neuling echt überfordert bin.
Zudem war der Hintergrund der Zeile, in der sich der der Nav-Container befand, gleich dem Rahmen um den Shop. Das sah zwar interessant, aber nicht unbedingt gut aus ;-)


Für Eure Hilfe nochmals herzlichen Dank !!!!