[de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

uli · 2007-05-21 15:07:51

Ich arbeite im Moment an einer Seite, deren Basisstruktur man in HTML mit vierzehn statischen Seiten lösen würde. Die Navigation wird komplett über Bilder mit rollover-Effekten erfolgen. Bisher hab ich in Textpattern nur mit textbasierter Navi gearbeitet, daher hab ich im Moment keine Idee, wie mir der gekonnte Einsatz von txp-tags die Arbeit an diesem bildlastigen Projekt erleichtern kann. Ich würde es momentan in Dreamweaver anlegen, den code nach txp rüberkopieren und nur die eigentlichen Artikel über txp erzeugen. Bei Änderungen an der Sitestruktur wären dann aber Korrekturen in bis zu vierzehn Seiten erforderlich.

Kann mir der geschickte Einsatz von txp-tags auch hierbei helfen, so dass ich nicht vierzehn Seiten hardcoden und dann gegebenenfalls wieder abändern muss? Wie sähe so ein Bildtag, der in der Navi verwendet wird, dann beispielsweise aus?
Vielen Dank schon mal im voraus.

Last edited by uli (2007-06-03 00:17:04)

Bud · 2007-05-21 15:39:14

Das Naheliegenste wäre für mich die Verwendung eines Bausteines. Damit könntest du zentral Änderungen in deiner Navigation vornehmen, unabhängig, in wie vielen Seiten du sie eingebettet hast.

vg Bud

uli · 2007-05-21 16:02:01

Danke, Bud, ich muss hier offensichtlich etwas vertiefen, dies Verständnisproblem ist mir vorher nicht bewusst gewesen:

Die Navi nimmt verschiedene Aussehen an, ja nachdem wo (auf welcher Seite, in welcher section) sich der Besucher befindet. Das sind die erwähnten 14 Seiten (oder Zustände, die die Navi annehmen kann)

Bud · 2007-05-21 16:48:41

… dies Verständnisproblem ist mir vorher nicht bewusst gewesen …

Mir schon, habe es aber der Einfachheit halber unterschlagen. :-)

Ich verstehe nicht so ganz deinen Einsatz von Javascript. Das Beispiel-Menü ließe sich doch auch mit reinem CSS umsetzen. Oder? Wenn sich nur das Aussehen, aber nicht die Navigation selbst ändert, wäre das doch eine Sache für dein Stylesheet – überall der gleiche Baustein (zentral), dessen Aussehen aber je nach CSS-Selektoren unterschiedlich gestaltet wird.

Du fügst also in jeder Sektions-Vorlage eine ID ein, vielleicht <body>, mit der du deiner Navigation unterschiedliches Aussehen geben kannst? Nur mal so als Idee und ohne übermäßig angestrengt nachgedacht zu haben.

vg Bud

jakob · 2007-05-21 18:01:23

Beispieltutorials für das was Bud meint findest Du in setting the current menu state with css und navigation matrix reloaded.

uli · 2007-05-21 18:08:23

Zunächst mal: JS muss nicht sein, das bekommt man von Dreamweaver einfach so anerzogen. Aber das ist ein Nebenschauplatz.

Was man auf der Beispielseite sehen kann, ist übrigens die absolute Basisnavi. Die faltet sich im Bereich “Galerie” dann aber noch mächtig auf, so dass der Maximalzustand dort eben auf 14 Elemente anwachsen kann, je nachdem welche Hierarchieebene betrachtet wird. Insofern verändert sich die Navigation eben schon, nicht nur das Aussehen. Ich wüsste keine Weg, das, was ich her beschreibe, mit deinem Vorschlag umzusetzen. Aber ich bin relativer Anfänger. Kannst du etwas konkreter werden?

uli · 2007-05-21 18:34:25

Jakob, danke für deine Links, du hattest sie schon gepostet, als ich noch geschrieben hab.
Ich werd mich mit den Texten eingehender beschäftigen, und melde mich dann.
Erst mal danke euch beiden.

Bud · 2007-05-21 19:18:30

… die absolute Basisnavi. Die faltet sich im Bereich “Galerie” dann aber noch mächtig auf, so dass der Maximalzustand dort eben auf 14 Elemente anwachsen kann, je nachdem welche Hierarchieebene betrachtet wird.

Aha, jetzt kommen wir der Sache schon näher. Jakob hat prima Links beigebracht, die zu suchen ich zu faul war. Aber einen habe ich auch.

Mit den drei Links ist eine ganz Menge möglich. Wenn du es damit nicht umsetzen kannst, solltest du dir ernsthaft überlegen, ob das Konzept nicht einer praktikableren Umsetzung entgegen kommen sollte. Mit anderen Worten, die Idee der Website ist vielleicht ganz gut, erfordert aber einen unverhältnismäßig großen Aufwand, den am Ende – vielleicht – doch kein Schwein wahrnimmt und würdigt.

Ich möchte dir folgendes vorschlagen: Vergiss deine Bildnavigation! Okay? Du schreibst, dass du dich mit Textnavigationen auskennst. Versuche einmal, die Website mit den „normalen“ Navigationen umzusetzen, die dir Textpattern zur Verfügung stellt und dir maximale Automation ermöglichen. Zur Not müsste eben bei einzelnen Seiten Abstriche gemacht werden. Wenn alles läuft – und erst dann – könntest du mit den verlinkten Techniken die Dekoration angehen. Es könnte schon sein, dass du so herum leichter zu einem Ziel kommst. Viel Arbeit ist es in jedem Fall.

vg Bud

claus · 2007-05-23 22:30:42

Hallo Uli,
ich baue gerade etwas ähnliches auf: Seite mit statischem Inhalt, wobei sich die Navi je nach sektion ändern soll. Was ich nicht so ganz verstehe ist dein Horror vor dem “hard coden”. Das hört sich so an, als müsste man Granitsteine den Berg hinauf schleppen. ..

Wie dem auch sei und ohne Gewähr für schenialität – so habe ich das gemacht:

Die Hauptnavi ist bei mir ein Baustein, in dem ich den Links der einzelnen Sektionen eine #id zuweise.
………………………………………….
<ul>
<li> <a id=“1” href=“tolle seite eins”> Erste Seite </a> </li><br>
<li> <a id=“2” href=“tolle seite zwei”> Zweite Seite </a> </li>
<<li> <a id=“3” href=“tolle seite drei”> Dritte Seite </a> </li>
</ul>
…………………………………………..

Dann setze ich auf jede Seitenvorlage neben den Hauptstilchen eine zusätzliche css-anweisung, die die entsprechende id triggert und sagt, was hier geschehen soll: ………………………………………….. <html> <head> erste seite </head> <link rel=“stylesheet” type=“text/css” href=“stylesheet/großeSteuerung.css” /> <style type=“text/css”> <!—

{
background-image: url (www.beispiel.de/bilderordner/superbild1.jpg);
background-repeat: lieber nicht;
background-position: passend;
/* hier nur als statischer Background. Ansonsten eine hover-anweisung */
}
—>
</style>
</head>
<body>
<div id=“content>
<txp:form form_output=“hauptnavi” />
… hier rockt dann der seiteninhalt …
</div>
</body>
</html>
…………………………………………..

Das “hardcoding” besteht jetzt also darin, dass man den css-schnipsel per copy und paste in die einzelnen Vorlagen setzt und dabei jedesmal den bildnamen der hover-anweisung ändert. Das ist nicht super-elegant, aber kein Tagewerk.
Und – so habe ich schon gehört – Navigationen gehören zu den unbeweglichsten Dingen einer Website. Aber ich kenne das Projekt nicht und jetzt ist schon Mitternacht vorbei.
Insofern: Hoffe meine bescheidene Einsicht hilft Dir und ist sinnvoll.
Viele Erfolg weiterhin!
Claus

Bud · 2007-05-24 05:50:06

Was ich nicht so ganz verstehe ist dein Horror vor dem “hard coden”.

Dann schau mal in seinen Quelltext.

Deinen Vorschlag finde ich auch überlegenswert. Wie man sieht, führen viele Wege nach Rom, es muss ja nicht unbedingt der sein mit den meisten Steinen … ;-)

vg Bud

claus · 2007-05-24 06:52:46

Quelltext? Den habe ich gestern verschlafen. Mal reingeschaut: Ja mein allerliebstes Lottchen – so viel Javascript auf einem Haufen…
Das geht doch sicher etwas eleganter. Oder?
Grüße allerseits,
Claus

uli · 2007-05-25 10:48:48

STUUU-RAIK!!

Hallo, ihr drei,
ihr habt euch in euren Anregungen prächtig ergänzt. Jeder von euch hat mich irgendwo ein Stückchen weiter gebracht. Danke für eure Hilfe! Initialzündung war natürlich der Artikel “setting the current menu state with css”. War mir zwar nicht völlig unbekannt, wär mir aber nicht mehr von allein eingefallen.

Ich hab den Aufbau der Navi jetzt mit txp:section gelöst (nicht mit sectionlist, weil ich Sortierfreiheit brauche) und dann zum Bildaustausch die Leahy/Langridge-Technik verwendet. Die Radu-Methode war mir zar sympathischer, weil Explorer damit nicht separat angesprochen werden muss, ich vermute aber, dass Firefox 2 (Mac?) nicht nur bei mir damit unerwünschte Ergebnisse bringt. Das Bild erschien nicht an der gewünschten Position, sondern versprang an die linke obere div-Ecke. Hat jemand davon schon gehört?

Zum Nachkochen also, falls es irgendjemand außer mir noch brauchen kann:
In den bodytag stecke ich einen section-tag, der beim Aufruf der Seite dort als ID den Titel der jeweiligen section einbringt, damit ich später in den CSS-Anweisungen Ausnahmen für die aktuelle Seite machen kann:
<body id="<txp:section />" >

Die (komplette!) Navi steckt pflegeleicht an einer einzigen Stelle, in einer form, die per <txp:output_form form="p_body_navi" /> auf der Seite aufgerufen wird:

<h6 id="galerie-h6"><txp:section link=1 title=1 name="galerie" /></h6>
<h6 id="malerei-h6"><txp:section link=1 title=1 name="malerei" /></h6>
usw.

Im CSS dann die Leahy/Langridge-Methode, hier im Original von Stuart Langridges Seite
#ID_OF_ELEMENT {
padding: HEIGHT_OF_IMAGEpx 0 0 0;
overflow: hidden;
background-image: url("hello_world.gif");
background-repeat: no-repeat;
height: 0px !important;
height /**/:HEIGHT_OF_IMAGEpx;
}

Damit dann in der Navi auf der aktuellen Seite ein Indikator-Bild gezeigt wird, kommt noch die Ausnahmeregel ins CSS:
#galerie #galerie-h6 a {
background-image: url("auswahlzustand_kein_rollover.gif");
}

Oder eben “display: none”, wenn bestimmte Bereiche einfach entfallen, beispielsweise weil man den Navibaum auf der Startseite nicht aufklappen möchte.

Falls jemand Fehler findet: bitte melden!

Wenn ich’s dann noch so richtig perfekt machen möchte, kümmere ich mich noch um die Technik, die claus und jakob oben jeweils verlinkt haben, jakob unter “navigation matrix reloaded”. Besser verständlich (wenn auch immer noch auf englisch) finde ich sie auf Petr Staníček’s Seite Wellstyled. Nachteil dieser Methoden ist übrigens die fehlerhafte Ausgabe beim Drucken (siehe Yahoo, dort die Bildchen in der Navi).

Last edited by uli (2007-05-25 11:30:14)

Textpattern CMS

Textpattern CMS support forum

#1 2007-05-21 15:07:51

[de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#2 2007-05-21 15:39:14

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#3 2007-05-21 16:02:01

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#4 2007-05-21 16:48:41

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#5 2007-05-21 18:01:23

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#6 2007-05-21 18:08:23

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#7 2007-05-21 18:34:25

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#8 2007-05-21 19:18:30

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#9 2007-05-23 22:30:42

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#10 2007-05-24 05:50:06

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#11 2007-05-24 06:52:46

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

#12 2007-05-25 10:48:48

Re: [de-de] GELÖST: Wie erzeuge ich eine Bildnavi mit Textpattern?

Board footer