NAV_LIST - Einzug anpassen

CyboMoik · Post by **CyboMoik** » Sat 21. Oct 2006, 20:20

Hallo!
Ich expermientiere seit ca. 2 Wochen mit phpwcms.
Irgendwo hier im Forum hab ich folgendes script gefunden,
was meinen Wünschen für die Navigation entspricht:

[PHP]
$id = $GLOBALS['content']['cat_id'];
$parent_id=$GLOBALS['content']['struct'][$id]['acat_struct'];
While ($parent_id<>0){
$id=$parent_id;
$parent_id=$GLOBALS['content']['struct'][$id]['acat_struct'];
}

if ($id > 0) {
echo '{NAV_LIST:'.$id.'}'; // Hier wird die ID-basierte NAVI eingesetzt
}
[/PHP]

Dies ist im LEFT-Bereich installiert...

Jetzt suche ich schon Tage lag nach einer Lösung den Einzug der unteren Ebenen zu verringern.
Der Einzug ist recht groß und der Text drängt sich zu sehr an den Rand.

Leider komme ich zu keinem Ergenis und meine CSS-Kenntnisse sind auch sehr bescheiden. Im Config-Verzeichnis hab eich auch keine entsprechende Stelle gefunden, die mich weitergebracht hätte...

Wo werde ich fündig??

Vorab vielen Dank!
Beste Grüße!

Post by **flip-flop** » Sun 22. Oct 2006, 16:56

Hallo CyboMoik,

das hat nichts mit dem script zu tun. Dieser PHP Schnippsel hebt nur den Einstigspunkt der NAVI auf das Level 1.
Mehr dazu hier: http://www.phpwcms.de/forum/viewtopic.php?p=71772#71772

Die Sache mit dem Einzug hängt ausschließlich von deiner CSS-Formatierung für diesen TAG ab.

Ich würde die NAV_LIST_UL (ab V1.2.7) verwenden. http://www.phpwcms.de/forum/viewtopic.php?t=12716

Wenn du bei der NAV_LIST bleiben möchtest:

Code: Select all

/*================================================================
   CSS for an vertical menu
   CSS for <div id="nav_list1">{ NAV_LIST }</div>
   Level 0 - 1;
   22.10.06 flip-flop (KH)
----------------------------------------------------------------*/
   
#nav_list1 {
   margin: 0;
   padding: 0 0 0 0;
   border: 0;
   text-decoration: none;

   /* e.g. 11px font and 19px height */
   font: normal normal 11px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
   width: 212px;  /* Width of Menu Items */
/*   float:left; */
}

#nav_list1 em { font-style: normal; }

#nav_list1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
   width: 212px;  /* Width of Menu Items */
}

#nav_list1 ul li { position: relative; }


/*--- Styles for Menu Items ------------------------------------*/

/*--- LEVEL X --------------------------------------------------*/

#nav_list1 ul li a,
#nav_list1 ul li a:link,
#nav_list1 ul li a:visited,
#nav_list1 ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #FFFFFF;
   background: #993400 url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
                                  /* image adjust e.g. left gap 10px */
   padding: 1px 0 0 25px;         /* Text adjust e.g. left gap 25px */
   border-bottom: 1px solid #ccc; /* IE6 Bug */
}


#nav_list1 ul li.listActive a,
#nav_list1 ul li.listActive a:link,
#nav_list1 ul li.listActive a:visited,
#nav_list1 ul li.listActive a:active {
   color: White;
   font-weight: bold;
   background: #993400 url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

#nav_list1 ul li a:hover,
#nav_list1 ul li.listActive a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #773400 url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}

/*--- LEVEL X + 1--------------------------------------------------*/

#nav_list1 ul ul li a,
#nav_list1 ul ul li a:link,
#nav_list1 ul ul li a:visited,
#nav_list1 ul ul li a:active,
#nav_list1 ul li.listActive ul li a,
#nav_list1 ul li.listActive ul li a:link,
#nav_list1 ul li.listActive ul li a:visited,
#nav_list1 ul li.listActive ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #FFFFFF;
   background: #993400 url(../../img/article/navi1_norm.gif) 15px 1px no-repeat;
                                  /* image adjust e.g. left gap 25px */
   padding: 1px 0 0 40px;         /* Text adjust e.g. left gap 40px */
   border-bottom: 1px solid #ccc; /* IE6 Bug */
}


#nav_list1 ul ul li.listActive a,
#nav_list1 ul ul li.listActive a:link,
#nav_list1 ul ul li.listActive a:visited,
#nav_list1 ul ul li.listActive a:active {
   color: White;
   font-weight: bold;
   background: #bb3400 url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}

#nav_list1 ul ul li a:hover,
#nav_list1 ul ul li.listActive a:hover,
#nav_list1 ul li.listActive ul li a:hover {
   color: White;
/*   text-decoration: underline; */
  background: #993400 url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}

/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }
 
/* ==== End  nav_list1 === */

Muss natürlich für die weiteren Ebenen ausgebaut werden.
Sieht dann so aus wie das Beispiel oben.

Gruß Knut

CyboMoik · Post by **CyboMoik** » Mon 23. Oct 2006, 08:46

Hallo Flip-Flop!!

Vielen vielen Dank für Deine Antwort auf meiner Anfängerfrage!
Im Moment möchte ich gerne bei NAV_LIST bleiben.
Leider komm ich noch nicht so richtig klar

Ich habe jetzt angenommen, dass der Code in die frontend.css gehört!?

Wenn ich ihn da hin kopiere und einige Variablen ändere (müsste doch Margin sein, um den Einschub zu ändern, oder?) tut sich einfach nichts.
Auch wenn Farben oder Größe ändern möchte passiert nichts...
Es sieht so aus als ob, der Code nicht in die frontend.css gehört, oder!?

Wenn ich einmal wüsste was ich falsch mache und hinter das Prinzip gesteigen bin, bin ich ganz zuversichtlich, dass ich auch die unteren ebenen definieren kann.
Aber im Moment fehlt mir der Einstieg

Kannst du mir bitte noch einmal einen Tip geben??

Beste Grüße
CyboMoik

Post by **flip-flop** » Mon 23. Oct 2006, 11:06

Der Aufruf in der Vorlage sieht so aus:

Code: Select all

<div id="nav_list1">{NAV_LIST}</div>

Ich würde eine eigene Datei erstellen, z.B. "nav_list1.css"
Diese Datei kommt nach "/phpwcms_template/inc_css/"
In der Vorlage kannst du mehrere CSS-Dateien auswählen <Strg>-Maus
Die nav_list1.css würde ich als letzte wählen.

Einschub für die Grafik je Level:
background: #993400 url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
Einschub für den Text je Level:
padding: 1px 0 0 25px; /* Text adjust e.g. left gap 25px */

Im Moment möchte ich gerne bei NAV_LIST bleiben.

Die NAV_LIST_UL ist eigentlich nichts anderes, nur etwas umfangreicher mit variablerem Output.
Das Prinzip der CSS-Datei ist übrigens fast identisch.

Gruß Knut

CyboMoik · Post by **CyboMoik** » Mon 23. Oct 2006, 18:37

Hallo Knut!

Tausend Dank!!
Jetzt hab ichs verstanden!!

Funktioniert prima und anpassen geht auch; mit einigem testen und probieren!!

Vielen Vielen Dank!! Das hätte ich alleine nicht hinbekommen!

So macht das Spass!

Beste Grüße

Marek

CyboMoik · Post by **CyboMoik** » Tue 24. Oct 2006, 22:56

Hallo Knut!
Ich komme immer besser zu recht mit dem anpassen meines Menüs.
Unterebenen anlegen klappt auch.
Nur eins macht mich stutzig.

Ich hab alles nach Deiner Anleitung durchgeführt und auch noch 2 weitere Ebenen erstellt.

Sieht so aus:
/*================================================================
CSS for an vertical menu
CSS for <div id="nav_list1">{ NAV_LIST }</div>
Level 0 - 1;
22.10.06 flip-flop (KH)
----------------------------------------------------------------*/

#nav_list1 {
margin: 0;
padding: 0 0 0 0;
border: 0;
text-decoration: none;

/* e.g. 11px font and 19px height */
font: normal normal 14px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 200px; /* Width of Menu Items */
/* float:left; */
}

#nav_list1 em { font-style: normal; }

#nav_list1 ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
width: 200px; /* Width of Menu Items */
}

#nav_list1 ul li { position: relative; }

/*--- Styles for Menu Items ------------------------------------*/

/*--- LEVEL X --------------------------------------------------*/

#nav_list1 ul li a,
#nav_list1 ul li a:link,
#nav_list1 ul li a:visited,
#nav_list1 ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 10px */
padding: 1px 0 0 5px; /* Text adjust e.g. left gap 25px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}

#nav_list1 ul li.listActive a,
#nav_list1 ul li.listActive a:link,
#nav_list1 ul li.listActive a:visited,
#nav_list1 ul li.listActive a:active {
color: black;
font-weight: bold;
}

#nav_list1 ul li a:hover,
#nav_list1 ul li.listActive a:hover {
color: black;
/* text-decoration: underline; */
background: #FFFFFF;
}

/*--- LEVEL X + 1--------------------------------------------------*/

#nav_list1 ul ul li a,
#nav_list1 ul ul li a:link,
#nav_list1 ul ul li a:visited,
#nav_list1 ul ul li a:active,
#nav_list1 ul li.listActive ul li a,
#nav_list1 ul li.listActive ul li a:link,
#nav_list1 ul li.listActive ul li a:visited,
#nav_list1 ul li.listActive ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 25px */
padding: 1px 0 0 15px; /* Text adjust e.g. left gap 40px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}

#nav_list1 ul ul li.listActive a,
#nav_list1 ul ul li.listActive a:link,
#nav_list1 ul ul li.listActive a:visited,
#nav_list1 ul ul li.listActive a:active {
color: black;
font-weight: bold;
}

#nav_list1 ul ul li a:hover,
#nav_list1 ul ul li.listActive a:hover,
#nav_list1 ul li.listActive ul li a:hover {
color: black;
/* text-decoration: underline; */
}

/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }

/*--- LEVEL X + 2--------------------------------------------------*/

#nav_list1 ul ul ul li a,
#nav_list1 ul ul ul li a:link,
#nav_list1 ul ul ul li a:visited,
#nav_list1 ul ul ul li a:active,
#nav_list1 ul ul li.listActive ul li a,
#nav_list1 ul li.listActive ul li a:link,
#nav_list1 ul li.listActive ul li a:visited,
#nav_list1 ul li.listActive ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 25px */
padding: 1px 0 0 25px; /* Text adjust e.g. left gap 40px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}

#nav_list1 ul ul ul li.listActive a,
#nav_list1 ul ul ul li.listActive a:link,
#nav_list1 ul ul ul li.listActive a:visited,
#nav_list1 ul ul ul li.listActive a:active {
color: black;
font-weight: bold;
}

#nav_list1 ul ul ul li a:hover,
#nav_list1 ul ul ul li.listActive a:hover,
#nav_list1 ul ul li.listActive ul li a:hover {
color: black;
/* text-decoration: underline; */
}

/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }

/*--- LEVEL X + 3--------------------------------------------------*/

#nav_list1 ul ul ul ul li a,
#nav_list1 ul ul ul ul li a:link,
#nav_list1 ul ul ul ul li a:visited,
#nav_list1 ul ul ul ul li a:active,
#nav_list1 ul ul li.listActive ul li a,
#nav_list1 ul li.listActive ul li a:link,
#nav_list1 ul li.listActive ul li a:visited,
#nav_list1 ul li.listActive ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 25px */
padding: 1px 0 0 35px; /* Text adjust e.g. left gap 40px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}

#nav_list1 ul ul ul ul li.listActive a,
#nav_list1 ul ul ul ul li.listActive a:link,
#nav_list1 ul ul ul ul li.listActive a:visited,
#nav_list1 ul ul ul ul li.listActive a:active {
color: black;
font-weight: bold;
}

#nav_list1 ul ul ul ul li a:hover,
#nav_list1 ul ul ul ul li.listActive a:hover,
#nav_list1 ul ul ul li.listActive ul li a:hover {
color: black;
/* text-decoration: underline; */
}

/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }

/* ==== End nav_list1 === */

Jetzt passiert aber folgendes.
Je mehr Unterebenen ich anlege, desto schlimmer wird es...

In meiner NAV_LIST wird, wenn ich die erste Ebene "X+1" öffne,
diese nicht wie gewünscht, mit einem kleinen Einzug, dargestellt, sondern immer mit maximalsten, also jenach dem wieviele Untereben ich habe (hier z.B. X+3).
Öffnen ich dann weitere Unterbenen "X+2", dann verschiebt sich der Einzug nach vorn.

Also so:
So sieht es wenn alle Eben x, x+1, x+2 u. x+3 geöffnet sind (so soll es auch sein...!)
Ebene 1 X
Ebene 2 -X
Ebene 3 --X
Ebene 4 ---X

wenn ich aber beginne zu navigieren sieht es so aus:

Ebene 1 X
Ebene 2 ---X

und nich so (wie es sein sollte)

Ebene 1 X
Ebene 2 -X

Ist das verständlich erklärt?
Sonst mal hier als Beispiel:
http://bergwitzsee.de/index.php?experimente
(Links die Navigation "Ebene X" usw.)

Gibt es eine Möglichkeit dies zu verhindern.
Wäre schön, wenn Du mir noch einmal helfen könntest

DANKE!!!
marek

Post by **flip-flop** » Wed 25. Oct 2006, 02:43

Das sollte so in diese Richtung gehen:

/*--- LEVEL X + 1--------------------------------------------------*/

#nav_list1 ul ul li a:active,
.
#nav_list1 ul li.listActive ul li a:active {
font-weight: normal; /* #### Würde ich einfügen */
}

#nav_list1 ul ul li a:hover,
.
#nav_list1 ul li.listActive ul li a:hover {.}

/*--- LEVEL X + 2--------------------------------------------------*/

#nav_list1 ul ul ul li a:active,
.
#nav_list1 ul ul li.listActive ul li a:active {.}
.
.
#nav_list1 ul ul ul li a:hover,
.
#nav_list1 ul ul li.listActive ul li a:hover {.}
----------------------------

Erkennst du die Regel

Diesen Part brauchst du nur einmal am Ende der Datei
---------------------------------------------------------------
/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }

Gruß Knut

CyboMoik · Post by **CyboMoik** » Wed 25. Oct 2006, 22:35

hallo flip-flop!!
die systematik hab ich erkannt... nach etlichen versuchen hab ich es jetzt geschafft wie es sein solle!
...wirklich verstanden hab ichs aber nicht

css ist ganz schön kompliziert...

naja das kommt... hoffentlich noch.
bei meinen nächsten projekten werd ich auch auf nav_list_ul umsteigen...

nochmals vielen vielen dank für deine gute hilfe!!!!

marek

Post by **flip-flop** » Thu 26. Oct 2006, 00:15

Hi,

freut mich. Der Fehler lag bei dir einfach darin, das die tieferen Level falsch oder garnicht angesprochen wurden.
Eine CSS-Datei wird grundsätzlich von oben nach unten abgearbeitet. Die Reihenfolge der Anweisungen spielt in vielen Fällen eine Rolle.
Daher, wenn unten in der Datei eine Anweisung das gewünschte Level nicht trifft, wird diese Anweisung abgearbeitet und überschreibt eine eine Anweisung für ein vorheriges Level.

Du hattest unten für z.B. Level 3 so etwas stehen:
#nav_list1 ul li.listActive ul li a:active { padding: irgendwas };

Das ist aber die Anweisung für das erste Level. Also wird diese überschrieben und es kommt zu dem Versatz.

Richtig ist:
#nav_list1 ul ul ul li.listActive ul li a:active { padding: irgendwas };

Die Levels kannst du an den ul´s festmachen.

Gruß Knut

NAV_LIST - Einzug anpassen

NAV_LIST - Einzug anpassen

WOW!!

Hallo Knut!