CMS - Der Dirigent » Support » Anwenderforum

Neue Umfrage | neues Thema | Antworten

Seiten: (11) [1] 2 3 ... Letzte » ( Zum ersten neuen Beitrag )

Navigation-Templates, kann ein langer Thread werden ;)

« Älteres Thema | Neueres Thema » Thema abonnieren | Thema versenden | Thema drucken

Sven777b
Geschrieben am: 23. May 2003 - 16:56


Unregistered








Eppi hat mich denn mal gebeten ein bis zwei Konfigurationsmöglichkeiten für die Navi reinzustellen...

Dies hier ist nur der Startbeitrag. Die Templates kommen hier drunter.

Wer selber auch noch schöne vorschläge hat, bitte mit in diesen Thread reinposten

Fragen bitte nicht hier rein schreiben - das macht den Thread mE unübersichtlich.

ich glaube das Posten war anstrengender als das Erstellen tongue.gif
Das sind wie gesagt nur Anregungen damit man vielleicht die Funktion der einzelnen Templates besser versteht.
Zur Erklärung noch kurz...
- die 3 Schriftarten die man am Anfang definiert , müssen in den Templates wieder auftauchen - sie werden nirgends automatisch eingebunden. In den Templates kann man dann z.b. schreiben class={font1}

- die Templates Einleitung und Ende umrahmen die Navi - enthalten also meist eine Tabelle oder div oder so.

- die Templates für Ordner der 1. Ebene betreffen immer nur die Ordner, die in der Navigation ganz links stehen würden. Also wenn man root als Startpunkt hat, dann sind das die Hauptordner.

- die Templates für die Ordner betreffen dann alle anderen Ordner. Sind für erstere keine Templates vergeben, werden die Ordner der 1. Ebene automatisch mit diesem Template angezeigt.

- Es gibt immer 3 Templates pro Gruppe... einmal die Ordner allgemein, einmal den aktuell aktiven Ordner und einmal den zwischenraum zwischen den Ordnern.

- der Zwischenraum erscheint wirklich nur zwischen 2 Ordnern - nicht am Anfang und nicht am Ende. Also wenn nur ein Ordner da ist, wird das Template nicht genutzt.

soviel dazu. Viel Spass damit
Top
Sven777b
Geschrieben am: 23. May 2003 - 17:00


Unregistered








user posted image

Das ist erstmal das Standard-Layout von Eppi:

typische Konfiguration:

Anzeigen von : Ordner mit Seiten
Darstellungsform : Unterordner automatisch
Startseiten anzeigen : ja
Verzeichnis wählen : root

Einleitung:

CODE
<div align="center"><table width="80%" cellspacing="1" cellpadding="0" border="0">

Layout der Ordner in der 1. Ebene:

CODE
<tr><td onMouseOver="this.style['background']='#5A7BAD';" onMouseOut="this.style['background']='#A8BADE';" bgcolor="#A8BADE" nowrap>&nbsp;&nbsp;{space}<a href="{link}" onMouseOver="on('{name}');return true;" onMouseOut="off();return true;" class="{font1}">{name}</a></td></tr>

Layout des aktiven Ordners der 1. Ebene:

CODE
<tr><td bgcolor="#5A7BAD" nowrap>&nbsp;&nbsp;{space}<a href="{link}" onMouseOver="on('{name}');return true;" onMouseOut="off();return true;" class="{font1}">{name}</a></td></tr>

Layout zwischen Ordnern der 1. Ebene

CODE

Layout der Ordner:

CODE
<tr><td onMouseOver="this.style['background']='#5A7BAD';" onMouseOut="this.style['background']='#A8BADE';" bgcolor="#A8BADE" nowrap>&nbsp;&nbsp;{space}<a href="{link}" onMouseOver="on('{name}');return true;" onMouseOut="off();return true;" class="{font1}">{name}</a></td></tr>

Layout des aktiven Ordners:

CODE
<tr><td bgcolor="#5A7BAD" nowrap>&nbsp;&nbsp;{space}<a href="{link}" onMouseOver="on('{name}');return true;" onMouseOut="off();return true;" class="{font1}">{name}</a></td></tr>

Layout zwischen den Ordnern:

CODE

Layout der Seiten:

CODE
<tr><td onMouseOver="this.style['background']='#C7D5EB';" onMouseOut="this.style['background']='#DBE3EF';" bgcolor="#DBE3EF" nowrap>&nbsp;&nbsp;{space}<a href="{link}" onMouseOver="on('{name}');return true;" onMouseOut="off();return true;" class="{font2}">{name}</a></td></tr>

Layout der aktuellen Seite:

CODE
<tr><td bgcolor="#C7D5EB" nowrap>&nbsp;&nbsp;{space}<span class="{font2}">{name}</span></td></tr>

Layout zwischen den Seiten:

CODE

Ende der Navigation:

CODE
</table></div>
Top
Sven777b
Geschrieben am: 23. May 2003 - 17:04


Unregistered








user posted image
eine typische Navigation für Servicepunkte

Typische Konfiguration:
{font1} : Klasse für gesamtbereich (z.b. rahmen)
{font2} : Klasse für normalen Link
{font3} : Klasse für aktiven Link

Anzeigen von : Nur Ordner *
Darstellungsform : keine Unterordner anzeigen *
Startseiten anzeigen : ja
Verzeichnis wählen : Auswählen!

* wichtig fürs Design !

Templates:

Einleitung:

CODE
<nobr class={font1}>

Layout der Ordner in der 1. Ebene:

CODE
<a href="{link}" class={font2} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a>

Layout des aktiven Ordners der 1. Ebene:

CODE
<a href="{link}" class={font3} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a>

Layout zwischen Ordnern der 1. Ebene

CODE
&bull;

Layout der Ordner:

CODE

Layout des aktiven Ordners:

CODE

Layout zwischen den Ordnern:

CODE

Layout der Seiten:

CODE

Layout der aktuellen Seite:

CODE

Layout zwischen den Seiten:

CODE

Ende der Navigation:

CODE
</nobr>
Top
Sven777b
Geschrieben am: 23. May 2003 - 17:08


Unregistered








user posted image
Selectbox-Navigation

Typische Konfiguration:
{font1} : nicht verwendet
{font2} : nicht verwendet
{font3} : nicht verwendet

Anzeigen von : Ordner mit Seiten
Darstellungsform : alle Unterordner anzeigen *
Startseiten anzeigen : ja
Verzeichnis wählen : root
* wichtig für das Design!

Templates:

Einleitung:

CODE
<form><select name="nav" onchange="document.location.href = this.form.nav.options[this.form.nav.options.selectedIndex].value;">

Layout der Ordner in der 1. Ebene:

CODE
<option value="{link}">{space}{name}</option>

Layout des aktiven Ordners der 1. Ebene:

CODE
<option value="{link}" selected>{space}{name}*</option>

Layout zwischen Ordnern der 1. Ebene

CODE

Layout der Ordner:

CODE
<option value="{link}">{space}{name}</option>

Layout des aktiven Ordners:

CODE
<option value="{link}" selected>{space}{name}*</option>

Layout zwischen den Ordnern:

CODE

Layout der Seiten:

CODE
<option value="{link}">{space}-{name}</option>

Layout der aktuellen Seite:

CODE
<option value="{link}" selected>{space}-{name}</option>

Layout zwischen den Seiten:

CODE

Ende der Navigation:

CODE
</select></form>
Top
Sven777b
Geschrieben am: 23. May 2003 - 17:12


Unregistered








user posted image

Auflistung

Typische Konfiguration:
{font1} : Klasse für Hauptpunkt
{font2} : Klasse für normalen Link
{font3} : Klasse für aktiven Link

Anzeigen von : Nur Ordner
Darstellungsform : alle Unterordner anzeigen
Startseiten anzeigen : ja
Verzeichnis wählen : root

oder
Anzeigen von : Nur Seiten
Darstellungsform : keine Unterordner anzeigen
Startseiten anzeigen : ja
Verzeichnis wählen : aktuelles

Templates:

Einleitung:

CODE
<ul>

Layout der Ordner in der 1. Ebene:

CODE
<li><a href="{link}" class={font2} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a></li><ol class={font1}>

Layout des aktiven Ordners der 1. Ebene:

CODE
<li><a href="{link}" class={font3} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a></li><ol class={font1}>

Layout zwischen Ordnern der 1. Ebene

CODE
</ol>

Layout der Ordner:

CODE
<li><a href="{link}" class={font2} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a></li>

Layout des aktiven Ordners:

CODE
<li><a href="{link}" class={font3} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a></li>

Layout zwischen den Ordnern:

CODE

Layout der Seiten:

CODE
<li><a href="{link}" class={font2} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a></li>

Layout der aktuellen Seite:

CODE
<li><a href="{link}" class={font3} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a></li>

Layout zwischen den Seiten:

CODE

Ende der Navigation:

CODE
</li></ul>
Top
fion
Geschrieben am: 27. Jun 2003 - 08:44


Unregistered








Hi,
ich hab in meinem Template zwei Navi-Module (beide mit Standard-Layout) eingebaut, will aber, dass sie als eine Tabelle angezeigt werden. Dazu hab ich das Ende der 1. Navi leer gelassen und die Einleitung der zweiten auch. Leider wird beim erneuten Aufruf des Templates der Inhalt aufs neue eingetragen und nach dem Speichern auch wieder verarbeitet. Ich muss also bei jeder Änderung am Template den Inhalt aus den entsprechenden Bereichen erneut löschen.
Ist das gewollt oder ein Bug?
cu fion
Top
spencerj
Geschrieben am: 27. Jun 2003 - 09:25


Member


Gruppe: Members
Beiträge: 155
Mitgliedsnummer: 165
Mitglied seit: 30. May 2003


QUOTE (fion @ Jun 27 2003, 08:44 AM)

QUOTE
Ich muss also bei jeder Änderung am Template den Inhalt aus den entsprechenden Bereichen erneut löschen.
Ist das gewollt oder ein Bug?

Ne das ist ein feature smile.gif . Es werden die default werte eingesetzt.
Du kannst das einfach umgehen indem du ein space (Leerzeichen) reinmachst, wo du nichts drinnhaben willst.

grüße spencer
Top   
bjoern
Geschrieben am: 27. Jun 2003 - 13:08


Unregistered








Alternativ kannst Du auch <!-- // --> einen leeren Kommentar reinsetzen, falls ein Leerzeichen Layouttechnisch stört.
Top
fion
Geschrieben am: 27. Jun 2003 - 21:37


Unregistered








Leerzeichen oder Kommentar. Funzt wunderbar.
Thanx4help.
cu fion
Top
Freeman
Geschrieben am: 30. Jul 2003 - 17:10


DeDi User


Gruppe: Members
Beiträge: 261
Mitgliedsnummer: 142
Mitglied seit: 21. May 2003


CSS-Navigation

Mittels dieser "Doku" ist es möglich, die Navigation sowohl in der Farbgebung als auch in der Größe mittels CSS vollständig anzupassen.

Änderungen:
  • Anstatt Tabellen wird nun <ul> und <li> verwendet. CSS und HTML sollten nun valide sein.
  • 04.09.03: CSS überarbeitet und Fehler bereinigt


Folgendes ist dazu notwendig:

Im Template sind die Layoutangaben komplett zu ersetzen durch:


mehr CODE
Einleitung der Navigation
<table id="navigation"><tr><td><ul>  

Layout der Ordner in der 1. Ebene
<li><a href="{link}" class="ordner">{name}</a></li>  

Layout des aktiven Ordners der 1. Ebene
<li><a href="{link}" class="oaktuell">{name}</a></li>  
 
Layout der Seiten in der 1. Ebene
<li><a href="{link}" class="seite">{name}</a></li>  

Layout der aktuellen Seite in der 1. Ebene
<li><a href="{link}" class="saktuell">{name}</a></li>  
 
Layout der Ordner
<li><a href="{link}" class="ordner">{name}</a></li>  

Layout des aktiven Ordners
<li><a href="{link}" class="oaktuell">{name}</a></li>  
 
Layout der Seiten
<li><a href="{link}" class="seite">{name}</a></li>  

Layout der aktuellen Seite
<li><a href="{link}" class="saktuell">{name}</a></li>  
 
Ende der Navigation
</ul></td></tr></table>  


Das Stylesheet:


mehr CODE

#navigation ul {list-style-type: none; width:100%; margin: 0px; padding: 0px; }
#navigation li {list-style-type: none; margin: 0px 0px 3px 0px; }
#navigation a.ordner {background-color: transparent; border: 1px solid Black; width:145px; color: Black; padding: 2px 2px 2px 2px; text-decoration: none; font-size:12px; display: block; }
#navigation a.ordner:link {color: Black; background-color: #8FBC8F; }
#navigation a.ordner:visited {color: Black; background-color: #8FBC8F; }
#navigation a.ordner:hover {border: 1px solid Black; background-color: #1073A5; color: white; }
#navigation a.oaktuell {background-color: #8FBCBC; border: 1px solid Black; width:145px; color: Black; padding: 2px 2px 2px 2px; text-decoration: none; font-size:12px; display: block; }
#navigation a.seite {border: 1px solid Black; width:140px; color: Black; padding: 2px 2px 2px 2px; text-decoration: none; font-size:10px; background-color: #B0C4DE; display: block; }
#navigation a.seite:link {color: Black; background-color: #B0C4DE; }
#navigation a.seite:visited {color: Black; background-color: #B0C4DE; }
#navigation a.seite:hover {border: 1px dotted Black; background-color: #AFC4DE; color: black; }
#navigation a.saktuell {border: 1px solid Black; width:140px; color: Black; padding: 2px 2px 2px 2px; text-decoration: none; font-size:10px; background-color: #DBDEAF; display: block; }


Erstellt eine neue css-Datei und fügt obigen Code ein. Dann importiert Ihr das Style in DeDi (Design / Stylesheet)
Im Layout ist nun zusätzlich die neue CSS mit anzugeben.

ToDo Liste:

- mehrere Ebenen erstellen (Anpassung an die aktuelle Navi)

Gruß Christian

--------------------

Gruß Christian
Top   
st-cb
Geschrieben am: 04. Aug 2003 - 15:24


bin wieder da...


Gruppe: Members
Beiträge: 260
Mitgliedsnummer: 245
Mitglied seit: 30. Jul 2003


Hallo zusammen,

sven777b hat oben "eine typische Navigation für Servicepunkte" gepostet.

nun meine frage - wie bekomme ich nun die submenues da rein?

ich möchte ne horizontale navi habe also in der richtung:

ordner1 • ordner2 • ordner3 • ordner4 • etc...
page1/ordner1 • page2/ordner1 • page3/ordner1 • etc...

wenn man dann auf "ordner2" klickt sollte es so aussehen:
ordner1 • ordner2 • ordner3 • ordner4 • etc...
page1/ordner2 • page2/ordner2 • page3/ordner2 • etc...

usw....


christian
Top      
Sven777b
Geschrieben am: 04. Aug 2003 - 16:49


Unregistered








wenn du das möchtest, müsstest du quasi 2 Navigationen untereinander bauen.
die 1. Navi wird auf den Service-Ordner gerichtet
die 2. Navi müsstest du in jedem Service-Punkt extra auf den Ordner ausrichten...

also dein Baum z.b.
-Service
- - Ordner 1
- - - - Unterordner 1
- - - - Unterordner 2
- - Ordner 2

- dann stellst du deine 1. Navi auf "Service"
- in der Konfiguration von Ordner 1 stellst du die 2. Navi auf "Ordner 1"
- in der Konfiguration von Ordner 2 stellst du die 2. Navi auf "Ordner 2"

nicht auf "aktuell" stellen - weil du sonst dort die Ordner der Hauptpunkte angezeigt bekommst, wenn du dich dort bewegst - das wär ja blöd
Top
st-cb
Geschrieben am: 04. Aug 2003 - 17:50


bin wieder da...


Gruppe: Members
Beiträge: 260
Mitgliedsnummer: 245
Mitglied seit: 30. Jul 2003


ok soweit so gut

meine frage war aber auch wie ich die seiten als menuepunkte bekomme

ich habe:
ordner1
-- seite1
-- seite2
-- seite3
--- unterordner1-2
---unterseite1
---unterseite
---unterseite
ordner2
-- seite1
-- seite2
-- seite3
-- seite4
-- seite5
-- seite6
ordner3
-- seite1
-- seite2
-- seite3
-- seite4
-- seite5
-- seite6

meine navi soll dann, wenn ich auf ordner1 klicke, so aussehen


CODE
ordner1 • ordner2 • ordner3
seite1 • seite2 • seite3 • unterordner1-2




CODE
wenn ich auf unterordner1-2 gehe
ordner1 • ordner2 • ordner3
seite1 • seite2 • seite3 • unterordner1-2
unterseite1 • unterseite2 • unterseite3



CODE

wenn ich auf ordner2 gehe
seite1 • seite2 • seite3 • seite4 • seite5 • seite6



im endefekt die normale navi - halt nur horizontal und ohne dieses farbspiel...

christian
Top      
st-cb
Geschrieben am: 04. Aug 2003 - 19:36


bin wieder da...


Gruppe: Members
Beiträge: 260
Mitgliedsnummer: 245
Mitglied seit: 30. Jul 2003


ich habe es hin bekommen - aber frage mich nicht wie...

siehe http://w-23.de/dedi/projekt01/


nachträglich geändert:

so sieht das dann bei mir aus:
in der 1. navi (die der ordner)
Einleitung:

CODE

<nobr class={font1}>


Layout der Ordner in der 1. Ebene:

CODE
<a href="{link}" class={font2} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a>


Layout des aktiven Ordners der 1. Ebene:

CODE
<a href="{link}" class={font3} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a>


Layout zwischen Ordnern der 1. Ebene

CODE
&bull;


Ende der Navigation:

CODE
</nobr>


der rest bleibt leer

da ich ja gezwungen war einen weiteren navi-container anzulegen hier nun der inhalt des zweiten navi moduls:


CODE

<nobr class={font1}>


Layout der Seiten:

CODE
<a href="{link}" class={font3} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a>


Layout der aktuellen Seite:

CODE
<a href="{link}" class={font3} onMouseOver="on('{name}');return true;" onMouseOut="off();return true;">{name}</a>


Layout zwischen den Seiten:

CODE
&bull;


Ende der Navigation:

CODE
</nobr>


Leider fluppt das nicht wenn ich nur ein mal das navi modul nehme - wenn das der fall ist wir die komplatte navi in eine zeile geschrieben.

und wenn ich denn mal so in das template gehe - wird alles zerrissen - soll bedeuten das die ganze navi geschichte vom inhalt her geändert wird - teils die originale teils das was ich geändert habe - und das lecker in beiden navi-modulen.


christian
Top      
Sven777b
Geschrieben am: 05. Aug 2003 - 00:46


Unregistered








evtl. kann man mit der neuen Navi auch noch einiges machen, da die 0.94 noch zwei neue Template-Felder hat. Ansonsten würde ich mal ganz einfach sagen, dass die aktuelle Navigation für diese Anforderung nicht gedacht ist.
Hier wären CSS-Profis gefragt... Denn man kann die verschiebung nach rechts (was die ebenen darstellt) via CSS auch in eine vertikale Positionierung umsetzen und so dieses konzept erreichen. Oder halt gleich eine Navi speziell zu diesem Zweck schreiben
Top

Thema wird von 0 Benutzer gelesen (0 Gäste und 0 Anonyme Benutzer)
0 Mitglieder:

160 Antworten seit 23. May 2003 - 16:56

Thema abonnieren | Thema versenden | Thema drucken


Seiten: (11) [1] 2 3 ... Letzte »

<< Zurück zu Anwenderforum

Neue Umfrage | neues Thema

Home | Das Projekt | Download | Entwicklung | Dokumentation | Forum | Impressum