YAML-Frage an DF6IH

santscho · Post by **santscho** » Wed 2. Apr 2008, 15:38

Eigentlich wollte ich die Lösung auf Deiner Website suchen, jedoch ist diese zur Zeit offline.

Auf http://www.perbi.ch/index.php habe ich eine YAML-phpwcms-Kombination im Einsatz. Jetzt wollte ich mal die originale vertikale YAML-Navigation in phpwcms integrieren und austesten. Die integration der Basis-Funktionen war problemlos möglich. Nun möchte ich auch die aktive Ebene mit CSS auszeichnen. Eigentlich so ähnlich wie in den CSS von Knut und Co. Dabei ist es NICHT so wichtig, dass die übergeordnete Ebene auch ausgezeichnet wird (wäre aber auch Okay).

Jetzt werden sicher einige Stimmen laut die sagen: "Nimm doch einfach die vorhandene Knut-CSS und vergiss die YAML-CSS". – Ja, das könnte ich. Will aber nicht

. Die YAML-Navigation-CSS ist sehr simpel aufgebaut und ich möchte aus persönlichen Gründen (lernen!) Schritt für Schritt eine bessere/phpwcms-taugliche Navigation daraus schaffen.

DF6IH (Hilfe! Ich kenne nicht mal Deinen richtigen Namen!) kennt die YAML-Navi und kann mir sicher Ratschläge erteilen !?

Hier mein RT:

Code: Select all

<div id="submenu">{NAV_LIST_UL:F,0,,}</div>

Und hier die originale YAML-CSS (nav_vlist.css):

Code: Select all

@charset "UTF-8";

/**

 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework

 *

 * (en) Vertical list navigation "vlist"

 * (de) Vertikale Navigationsliste "vlist"

 *

 * @copyright       Copyright 2005-2007, Dirk Jesse

 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),

 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)

 * @link            http://www.yaml.de

 * @package         yaml

 * @version         3.0.4

 * @revision        $Revision: 130 $

 * @lastmodified    $Date: 2007-10-05 19:05:21 +0200 (Fr, 05 Okt 2007) $

 */



@media all

{

  #submenu {

    width: 100%;

    overflow: hidden;

    margin: 2.4em 0 1.5em 0;

    list-style-type: none;

    border-top: 2px #ddd solid;

    border-bottom: 2px #ddd solid;

  }



  #submenu ul { list-style-type: none; margin:0; padding: 0; }

  #submenu li { float:left; width: 100%; margin:0; padding: 0 }



  #submenu a,

  #submenu strong {

    display:block;

    width: 90%;

    padding: 3px 0px 3px 10%;

    text-decoration: none;

    background-color:#fff;

    color: #444;

    border-bottom: 1px #eee solid;

  }



  /* Menu Title */

  #submenu li#title {

    width: 90%;

    padding: 3px 0px 3px 10%;

    font-weight: bold;

    color: #444;

    background-color: #fff;

    border-bottom: 4px #888 solid;

  }



  #submenu li span {

    display:block;

    width: 90%;

    padding: 3px 0px 3px 10%;

    font-weight: bold;

    border-bottom: 1px #ddd solid;

  }



  /* Level 1 */

  #submenu li#active,

  #submenu li strong {

    width: 90%;

    padding: 3px 0px 3px 10%;

    font-weight: bold;

    color: #fff;

    background-color:#aab;

    border-bottom: 1px #eee solid;

  }



  #submenu li a { width: 90%; padding-left: 10%; background-color:#fff; color: #444; }

  #submenu li a:focus,

  #submenu li a:hover,

  #submenu li a:active { background-color:#f63; color: #fff; }



  /* Level 2 */

  #submenu li ul li a,

  #submenu li ul li#active,

  #submenu li ul li strong,

  #submenu li ul li span { width: 80%; padding-left: 20%; }



  #submenu li ul li a { background-color:#f8f8f8; color: #666; }

  #submenu li ul li a:focus,

  #submenu li ul li a:hover,

  #submenu li ul li a:active { background-color:#f63; color: #fff; }



  /* Level 3 */

  #submenu li ul li ul li a,

  #submenu li ul li ul li#active,

  #submenu li ul li ul li strong,

  #submenu li ul li ul li span { width: 70%; padding-left: 30%; }



  #submenu li ul li ul li a { background-color:#fcfcfc; color: #888; }

  #submenu li ul li ul li a:focus,

  #submenu li ul li ul li a:hover,

  #submenu li ul li ul li a:active { background-color:#f63; color: #fff; }



  /* Level 4 */

  #submenu li ul li ul li ul li a,

  #submenu li ul li ul li ul li#active,

  #submenu li ul li ul li ul li strong,

  #submenu li ul li ul li ul li span { width: 60%; padding-left: 40%; }



  #submenu li ul li ul li ul li a { background-color:#ffffff; color: #aaa; }

  #submenu li ul li ul li ul li a:focus,

  #submenu li ul li ul li ul li a:hover,

  #submenu li ul li ul li ul li a:active { background-color:#f63; color: #fff; }

}

Der gerenderte Code im Browser:

Code: Select all

<div id="submenu">

<ul>
	<li class="sub_no sub_ul_true sub_first"><a href="index.php?ueberperbi">Über PERBI</a></li>
	<li class="sub_ul"><a href="index.php?produkte">Produkte</a>
	<ul>
		<li class="sub_no sub_ul_true sub_first"><a href="index.php?zuschnitte">Schaumstoff-Zuschnitte</a></li>
		<li class="sub_no"><a href="index.php?konfektion">Konfektion</a></li>
		<li class="sub_no"><a href="index.php?physiotherapie">Physiotherapie</a></li>

		<li class="sub_no"><a href="index.php?freizeit">Freizeit</a></li>
		<li class="sub_no"><a href="index.php?schallisolation">Schaumstoff-Schallisolation</a></li>
		<li class="sub_no"><a href="index.php?schaumstoffeinlagen">Schaumstoff-Einlagen</a></li>
	</ul>
	</li>
	<li class="sub_no"><a href="index.php?perbishop1">PERBIshop</a></li>
	<li class="sub_no"><a href="index.php?kontaktformular">Kontaktformular</a></li>

	<li class="sub_no"><a href="index.php?sitemap">Sitemap</a></li>
</ul>
</div>

Dabei ist noch anzumerken, dass ich diesen Code rauskopiert habe, als ich auf der Ebene "index.php?konfektion" war. Diese Ebene sollte doch im gerenderten Code einen "aktiv"-Status haben?

Liebste Grüsse vom
"Bastel-Ralph"

Post by **juergen** » Wed 2. Apr 2008, 16:06

Ja schon, aber das ist jetzt gar nicht mein Forum die Yaml Seite wird wieder kommen, sie lebt weiter auf meinem USB Laufwerk... aber phpwcms support, ralf alter chinese, da liegste aber voll nebem dem Trend

santscho · Post by **santscho** » Wed 2. Apr 2008, 16:30

Ich versuche nur, die die "Einfachheit" von YAML mit der "Dynamic" von phpwcms zu verschmelzen. Wenn möglich ohne gross in den CSS-Benennungen herum zu hacken.
Ich denke, das Posting ist schon am richtigen Ort. Ansonsten sollen die, die es nicht interessiert einfach nicht lesen

.

Bin so ziemlich YAML-süchtig! Und mit dem Builder 1.0 ist ein CSS-Template in Minuten erstellt! Und in weiteren wenigen Minuten in phpwcms integriert. Und falls es dann in IE7 doch nicht so aussieht wie es sollte, dann ist es in 99.9% aller Fälle die falsch/nicht verlinkte IE-Bug-CSS. Dazu hat man nahezu volle gestalterische Freiheit. Da kann ein CSS-YAML-Template schon mal wie ein tabellenbasiertes Layout aussehen (siehe perbi.ch: Gleiches Design, nur neu mit CSS statt Tabellen gelöst).
Und die Vielfalt von CSS-Definitionen, die man nicht selber erstellen muss, ist gigantisch! Vom einfachen FETT bis zu Tabellen... alles schon drinn. Aber Dir brauche ich das ja nicht zu erzählen

santscho · Post by **santscho** » Wed 2. Apr 2008, 16:34

Schade ist die Seite offline. Hätte gerne mal nachgesehen, wie man die YAML-Div (Col_1....) in phpwcms-vorlage einbaut. Zur Zeit benutze ich immer noch die Standard-Tags {LEFT/RIGHT/CONTENT...}.

Post by **juergen** » Wed 2. Apr 2008, 16:48

ich belebe sie, das geht fix, KabelBaden Württemberg hat meinen Anschluß einfach so auf 32Mbit down und 3200 kbits up geschaltet.. sagen wir in 30 Minuten von nun an gerechnet

santscho · Post by **santscho** » Wed 2. Apr 2008, 16:54

Also soooo dringend ists jetzt schon nicht

Gehe nämlich bald ins Bett *gaehn*

Post by **juergen** » Wed 2. Apr 2008, 17:33

da ist sie wieder

11 minuten Verzögerung weil ich einen Kunden erklärt habe, dass ich grade keine Zeit habe ...

YAML-Frage an DF6IH

YAML-Frage an DF6IH

Re: YAML-Frage an DF6IH

Re: YAML-Frage an DF6IH

Re: YAML-Frage an DF6IH

Re: YAML-Frage an DF6IH

Re: YAML-Frage an DF6IH

Re: YAML-Frage an DF6IH