Hallo SF Team
Habe da wieder einmal eine Frage zu einer Navigation
Ich möchte 4 Navigationen neben einander platzieren, mit der Ausgabe von Ordnernamen und Seiten, alle Navigationspunkte sollten sichtbar sein.
Mit der Listennavie 1.1 kann man aber den Ordnernamen des aktuellen Baumes nicht anzeigen gibt es da eine Möglichkeit ?
Hat jemand schon mal so etas gelöst und wenn ja wie?
Das ganze sollte in etwa so aussehen:
Ordner1 | Ordner 2 | Ordner 3 | Ordner 4 |
- 1. Seite | - 1. Seite | - 1. Seite | - 1. Seite |
- 2. Seite | - 2. Seite | - 2. Seite | - 2. Seite |
- 3. Seite | - 3. Seite | - 3. Seite | - 3. Seite |
- 4. Seite | - 4. Seite | - 4. Seite | - 4. Seite |
- 5. Seite | - 5. Seite | - 5. Seite | - 5. Seite |
Im Backend habe ich es so:
Im Hauptnavigationordner liegen folgende Ordner:
- Ordner 1
-- 1. Seite
-- 2. Seite
-- 3. Seite
-- 4. Seite
-- 5. Seite
- Ordner 1
-- 1. Seite
-- 2. Seite
-- 3. Seite
-- 4. Seite
-- 5. Seite
- Ordner 1
-- 1. Seite
-- 2. Seite
-- 3. Seite
-- 4. Seite
-- 5. Seite
- Ordner 1
-- 1. Seite
-- 2. Seite
-- 3. Seite
-- 4. Seite
-- 5. Seite
Modulkonfiguration für jeden Ordner eine eigene.:
- Startordner: jeweis der Ordner mit den Seiten
- Anzeigeart: Ordner mit Seiten
- Erst Ordner, dann Seiten anzeigen: ja
- Komplette Ordnerstruktur anzeigen:
- Startseiten anzeigen: ja
- Ordner nur als aktiv markieren, wenn Startseite angezeigt wird: ja
- Pfad als aktiv verfolgen: ja
- Ebenen und Seiten: normale "ul/li" Tags
Eigentlich brauchst Du dafür nur eine Listnavi-Modul:
Ist das die komplette Struktur der Seite (d.h. im root liegen diese 4 Ordner)?
Dann sollte Folgendes gehen:
Startordner: root
Komplette Ordnerstruktur anzeigen: ja
Liegen diese Ordner nicht im root, könntest Du zusätzlich Folgendes machen:
Angezeigter Startebene von Ordnern manipulieren: Da trägst Du die Ebenentiefe ein, auf der die o.g. Struktur vorkommt.
Außerdem:
Ordner ausschließen: alle Ordner, die noch auf dieser Ebene liegen, in dem die o.g. Struktur vorkommt.
Der Rest so, wie in deiner Config.
Habs nicht komplett getestet, sollte aber hinhauen. Das betrifft jedoch nur die Ausgabe von sf - Formatierung dann entstsprechend per css.
Gruß
Jan
Ist das die komplette Struktur der Seite (d.h. im root liegen diese 4 Ordner)?
Dann sollte Folgendes gehen:
Startordner: root
Komplette Ordnerstruktur anzeigen: ja
Liegen diese Ordner nicht im root, könntest Du zusätzlich Folgendes machen:
Angezeigter Startebene von Ordnern manipulieren: Da trägst Du die Ebenentiefe ein, auf der die o.g. Struktur vorkommt.
Außerdem:
Ordner ausschließen: alle Ordner, die noch auf dieser Ebene liegen, in dem die o.g. Struktur vorkommt.
Der Rest so, wie in deiner Config.
Habs nicht komplett getestet, sollte aber hinhauen. Das betrifft jedoch nur die Ausgabe von sf - Formatierung dann entstsprechend per css.
Gruß
Jan
@smail
Danke für dein schnelles antworten habe das nun mit kopierten Modulen gelöst und ausgeschlossenen Ordnern und Seiten.
Denn jeder Navigationsbaum sollte noch ein eigenes HG-Bild erhalten und das ist denke ich nur so zu lösen.
Gruss
Danke für dein schnelles antworten habe das nun mit kopierten Modulen gelöst und ausgeschlossenen Ordnern und Seiten.
Denn jeder Navigationsbaum sollte noch ein eigenes HG-Bild erhalten und das ist denke ich nur so zu lösen.
Gruss
ZITAT
Denn jeder Navigationsbaum sollte noch ein eigenes HG-Bild erhalten und das ist denke ich nur so zu lösen.
Hm, ich denke nicht. Ich gehe mal davon aus, dass jeder Navigationsbaum ohnehin eine feste Breite zugewiesen bekommt, beispielsweise alle 100px.
Dann könntest Du ein Hintergrundbild mit 400px beim ul-Element (oder einem umschließenden Div) setzen, was entsprechend gestaltet ist und die 4 Spalten quasi simuliert. Ggf. per css mit repeat-y runterziehen.
Vorteile:
- übersichtlicher,da weniger Module
- semantisch korrekte Verschachtelung in einer Liste (zu sehen bei ausgeschaltetem css)
- schnellere Ladezeit, da nur 1 Bild (ist meist kleiner als 4 einzelne)
Da ja für jeden Ordner ein <ul> angefangen wird kannst du doch auch per CSS jedem diese ul ein eigenes Hintergrundbild geben! 
Auch wieder war Ist nur die Frage, wie man diese adressiert, denn
fügt ja bei jedem das gleiche Bild ein. Man müsste die verschiedenen ul's also per ID bzw. class unterscheidbar machen. Und das geht mit der Listennavi z.B. durch die Templatevariable {id}, wodurch dann die ID der Seite ausgegeben wird.
Lässt sich übrigens auch prima für Bildnavigationen verwenden.
Ist nur die Frage, wie man diese adressiert, dennQUELLTEXT
ul li ul {
background: url(...);
}
background: url(...);
}
fügt ja bei jedem das gleiche Bild ein. Man müsste die verschiedenen ul's also per ID bzw. class unterscheidbar machen. Und das geht mit der Listennavi z.B. durch die Templatevariable {id}, wodurch dann die ID der Seite ausgegeben wird.
Lässt sich übrigens auch prima für Bildnavigationen verwenden.
@smail
Habe deine Idee aufgegriffen und versucht umzusetzen.
Ich habe da aber folgendes Problem
Wenn ich in der Listennavigation in der Konfiguration:
Ebene:
eingeb, wird das auch für die Verschachtelten <ul > eingesetzt und das führt natürlich dazu das die ganze navi zerfällt.
Backend-Navi sieht wie oben beschrieben aus und das CSS liegt unten bei.
Im Moment sieht die Navi so aus, mit den beschriebenen Einstellungen.
Klicken um den Anhang anzusehen
so sollte sie eigentlich aussehen.
Klicken um den Anhang anzusehen
Wer kann mir da weiterhelfen?
Gruss
Habe deine Idee aufgegriffen und versucht umzusetzen.
Ich habe da aber folgendes Problem
Wenn ich in der Listennavigation in der Konfiguration:
Ebene:
QUELLTEXT
<ul id="navmenu">
{layer}</ul>
{layer}</ul>
eingeb, wird das auch für die Verschachtelten <ul > eingesetzt und das führt natürlich dazu das die ganze navi zerfällt.
Backend-Navi sieht wie oben beschrieben aus und das CSS liegt unten bei.
Im Moment sieht die Navi so aus, mit den beschriebenen Einstellungen.
Klicken um den Anhang anzusehen
so sollte sie eigentlich aussehen.
Klicken um den Anhang anzusehen
Wer kann mir da weiterhelfen?
Gruss
QUELLTEXT
/* Grundeinstellungen */
ul#navmenu {
width: 420px;
height:140px;
padding:5px 0 0 5px;
list-style: none;
background-image: url(../../media/bilder-layout/navi-hg.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
ul#navmenu a {
border: 0 none;
padding: 0px 6px 4px 0px;
display: block;
color: #454518;
text-decoration: none;
height: auto !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%; /*Schriftgrösse für ganzes Menü proportional anpassen*/
font-style: normal;
font-weight: normal;
font-variant: normal;
}
ul#navmenu li {
border: 0 none;
float: left;
display: inline;
list-style: none;
position: relative;
height: 24px;
white-space :nowrap;
width: 105px;
}
/*-- Einstellungen für Seitenmenü --*/
ul#navmenu ul {
list-style: none;
display: block;
position: absolute;
top: 25px; /*Abstand des ersten Menüeintrages zum oberen Rand*/
left: 0;
width: 105px;
font-size: 90%; /* Schriftgrässe für einzelne Seitenmenüs*/
}
ul#navmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: inherit;
}
ul#navmenu ul li {
text-align:left;
width: 100%;
height: 100%;
float: left;
display: block !important;
display: inline;
}
ul#navmenu li:hover li a{
padding: 0px 6px 4px 0px;
float: none;
color: #454518;
}
ul#navmenu li:hover li a:hover {
color: #990000;
background-color: #FFFFFF;
}
ul#navmenu li:hover ul {
display: block;
}
ul#navmenu {
width: 420px;
height:140px;
padding:5px 0 0 5px;
list-style: none;
background-image: url(../../media/bilder-layout/navi-hg.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
ul#navmenu a {
border: 0 none;
padding: 0px 6px 4px 0px;
display: block;
color: #454518;
text-decoration: none;
height: auto !important;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%; /*Schriftgrösse für ganzes Menü proportional anpassen*/
font-style: normal;
font-weight: normal;
font-variant: normal;
}
ul#navmenu li {
border: 0 none;
float: left;
display: inline;
list-style: none;
position: relative;
height: 24px;
white-space :nowrap;
width: 105px;
}
/*-- Einstellungen für Seitenmenü --*/
ul#navmenu ul {
list-style: none;
display: block;
position: absolute;
top: 25px; /*Abstand des ersten Menüeintrages zum oberen Rand*/
left: 0;
width: 105px;
font-size: 90%; /* Schriftgrässe für einzelne Seitenmenüs*/
}
ul#navmenu ul:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: inherit;
}
ul#navmenu ul li {
text-align:left;
width: 100%;
height: 100%;
float: left;
display: block !important;
display: inline;
}
ul#navmenu li:hover li a{
padding: 0px 6px 4px 0px;
float: none;
color: #454518;
}
ul#navmenu li:hover li a:hover {
color: #990000;
background-color: #FFFFFF;
}
ul#navmenu li:hover ul {
display: block;
}
QUELLTEXT
<!--START 11//-->
<ul id="navmenu">
<li><a href="index.php?idcat=2&sid=0b4aa5f6fde2019360274498c7dd025b">feel balanced</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=10&sid=0b4aa5f6fde2019360274498c7dd025b">feelbalanced</a></li><li><a href="index.php?idcatside=4&sid=0b4aa5f6fde2019360274498c7dd025b">Kontakt</a></li><li><a href="index.php?idcatside=7&sid=0b4aa5f6fde2019360274498c7dd025b">über mich</a></li><li><a href="index.php?idcatside=9&sid=0b4aa5f6fde2019360274498c7dd025b">Anfahrt</a></li></ul></li><li><a href="index.php?idcat=7&sid=0b4aa5f6fde2019360274498c7dd025b">Angebot</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=11&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-1</a></li><li><a href="index.php?idcatside=2&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-2</a></li><li><a href="index.php?idcatside=3&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-3</a></li><li><a href="index.php?idcatside=12&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-4</a></li><li><a href="index.php?idcatside=13&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-5</a></li><li><a href="index.php?idcatside=14&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-6</a></li><li><a href="index.php?idcatside=15&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-7</a></li></ul></li><li><a href="index.php?idcat=6&sid=0b4aa5f6fde2019360274498c7dd025b">Aktuelles</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=6&sid=0b4aa5f6fde2019360274498c7dd025b">Foto Shooting</a></li><li><a href="index.php?idcatside=5&sid=0b4aa5f6fde2019360274498c7dd025b">Galerie</a></li></ul></li><li><a href="index.php?idcat=8&sid=0b4aa5f6fde2019360274498c7dd025b">Links</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=16&sid=0b4aa5f6fde2019360274498c7dd025b">Links</a></li>
</ul></li>
</ul><!--END 11//-->
<ul id="navmenu">
<li><a href="index.php?idcat=2&sid=0b4aa5f6fde2019360274498c7dd025b">feel balanced</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=10&sid=0b4aa5f6fde2019360274498c7dd025b">feelbalanced</a></li><li><a href="index.php?idcatside=4&sid=0b4aa5f6fde2019360274498c7dd025b">Kontakt</a></li><li><a href="index.php?idcatside=7&sid=0b4aa5f6fde2019360274498c7dd025b">über mich</a></li><li><a href="index.php?idcatside=9&sid=0b4aa5f6fde2019360274498c7dd025b">Anfahrt</a></li></ul></li><li><a href="index.php?idcat=7&sid=0b4aa5f6fde2019360274498c7dd025b">Angebot</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=11&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-1</a></li><li><a href="index.php?idcatside=2&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-2</a></li><li><a href="index.php?idcatside=3&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-3</a></li><li><a href="index.php?idcatside=12&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-4</a></li><li><a href="index.php?idcatside=13&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-5</a></li><li><a href="index.php?idcatside=14&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-6</a></li><li><a href="index.php?idcatside=15&sid=0b4aa5f6fde2019360274498c7dd025b">Seite-7</a></li></ul></li><li><a href="index.php?idcat=6&sid=0b4aa5f6fde2019360274498c7dd025b">Aktuelles</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=6&sid=0b4aa5f6fde2019360274498c7dd025b">Foto Shooting</a></li><li><a href="index.php?idcatside=5&sid=0b4aa5f6fde2019360274498c7dd025b">Galerie</a></li></ul></li><li><a href="index.php?idcat=8&sid=0b4aa5f6fde2019360274498c7dd025b">Links</a>
<ul id="navmenu">
<li><a href="index.php?idcatside=16&sid=0b4aa5f6fde2019360274498c7dd025b">Links</a></li>
</ul></li>
</ul><!--END 11//-->
nabend
also, id geht schon mal gar nicht. eine id muss einzigartig sein und darf pro dokument nur 1x vorkommen.
du hast drei möglichkeiten:
1. die modifizierte seitennavigation von stam verwenden. damit kannst du per {first} nur der ersten liste eine id mitgeben und dort das hintergrundbild notieren.
2. statt id eine klasse verwenden, dann der «ul.navmenu» das hintergrundbild mitgeben und «ul.navmenu ul» mit background: none ergänzen.
3. ein div um das ganze mit dem bild als hintergrund
update: drücke mich gerade von einer anderen arbeit. ergebnis wie siehe hier :-).
gruss andi
also, id geht schon mal gar nicht. eine id muss einzigartig sein und darf pro dokument nur 1x vorkommen.
du hast drei möglichkeiten:
1. die modifizierte seitennavigation von stam verwenden. damit kannst du per {first} nur der ersten liste eine id mitgeben und dort das hintergrundbild notieren.
2. statt id eine klasse verwenden, dann der «ul.navmenu» das hintergrundbild mitgeben und «ul.navmenu ul» mit background: none ergänzen.
3. ein div um das ganze mit dem bild als hintergrund
update: drücke mich gerade von einer anderen arbeit. ergebnis wie siehe hier :-).
gruss andi
Nur mal ne Frage,
ist die gewünschte Navigation so wie diese (bis auf das mit den Bildern).
Der Ordneraufbau entspricht jedenfalls den gewünschten und die Listennave nutze ich da auch.
Gruß
ist die gewünschte Navigation so wie diese (bis auf das mit den Bildern).
Der Ordneraufbau entspricht jedenfalls den gewünschten und die Listennave nutze ich da auch.
Gruß
Die Version von andi sieht doch schon ganz passend aus Ich weiß jetzt nicht, ob die mit der modifizierten Listennavi gemacht ist, es sollte aber auch mit der normalen gehen.
Das ist schon klar, vielleicht hab ich mich nicht eindeutig ausgedrückt. Man kann {id} dazu verwenden, eindeutige Klassen zu generieren (die äquivalent zu andis "ul#navmenu" funktionieren):
Damit ist jedes <ul> bzw. <li> per css eindeutig adressierbar.
Ich würd dann andis Vorschlag einfach so erweiteren, dass ul.navmenu ein Hintergrundbild für die komplette Navi erhält. Ist meiner Meinung nach die einfachste Lösung.
Ich weiß jetzt nicht, ob die mit der modifizierten Listennavi gemacht ist, es sollte aber auch mit der normalen gehen.ZITAT
also, id geht schon mal gar nicht. eine id muss einzigartig sein und darf pro dokument nur 1x vorkommen
Das ist schon klar, vielleicht hab ich mich nicht eindeutig ausgedrückt. Man kann {id} dazu verwenden, eindeutige Klassen zu generieren (die äquivalent zu andis "ul#navmenu" funktionieren):
QUELLTEXT
<ul class="navmenu_{id}> {layer} </ul> bzw. <li class="item_{id}></li>
Damit ist jedes <ul> bzw. <li> per css eindeutig adressierbar.
Ich würd dann andis Vorschlag einfach so erweiteren, dass ul.navmenu ein Hintergrundbild für die komplette Navi erhält. Ist meiner Meinung nach die einfachste Lösung.
ZITAT(smail @ Wed. 25. July 2007, 02:52) 
Das ist schon klar, vielleicht hab ich mich nicht eindeutig ausgedrückt. Man kann {id} dazu verwenden, eindeutige Klassen zu generieren (die äquivalent zu andis "ul#navmenu" funktionieren)
doch, du hast dich schon richtig ausgedrückt. ich habe mich auf den von feniweb veröffentlichten code von oben bezogen.
gruss andi
Ich möchte allen die hier jeweils Hilfe leisten und Tipps geben einmal recht herzlich danken sagen.
@Stam
Ja ich habe deine Navi als Grundlage benutzt, ich hoffe das ist OK für dich.
Und dank deinen Ergänzungen in der Listen-Navigation 1.01.02 ist mein Navigation erst möglich geworden.
@smail
Es geht eigentlich nur um das <ul> Tag wenn ich hier <ul id="navmenu"> einsetzte wird das auf alle übertragen auch bei verschachtelnden <li>
Mit der Listen-Navigation 1.01.02 von Stam ist das nun kein Problem mehr
Ich habe das nun so gelöst
@andi
Danke für deine kurze CSS Navi-Lösung. Muss evtl. das eine oder andere nochmals nachfragen bis ich meine Kunden-Wuschnavi habe.
Möchte aber nochmals nachfragen {id} gibt die nur die Nummer des Ordner oder der Seite zurück oder eine fortlaufende Nummer?
Super währe wenn man von diesen {Templatevariablen} evtl. im WIKI Anwendungsmuster hätte.
Nochmals an alle Dank.
Gruss
@Stam
Ja ich habe deine Navi als Grundlage benutzt, ich hoffe das ist OK für dich.
Und dank deinen Ergänzungen in der Listen-Navigation 1.01.02 ist mein Navigation erst möglich geworden.
@smail
Es geht eigentlich nur um das <ul> Tag wenn ich hier <ul id="navmenu"> einsetzte wird das auf alle übertragen auch bei verschachtelnden <li>
Mit der Listen-Navigation 1.01.02 von Stam ist das nun kein Problem mehr
Ich habe das nun so gelöst
QUELLTEXT
<ul{first} id="navmenu" {/first}>
{layer}</ul>
und schon wird die id="navmenu" nur auf die erste <ul> angewendet. GENIAL.{layer}</ul>
@andi
Danke für deine kurze CSS Navi-Lösung. Muss evtl. das eine oder andere nochmals nachfragen bis ich meine Kunden-Wuschnavi habe.
Möchte aber nochmals nachfragen {id} gibt die nur die Nummer des Ordner oder der Seite zurück oder eine fortlaufende Nummer?
Super währe wenn man von diesen {Templatevariablen} evtl. im WIKI Anwendungsmuster hätte.
Nochmals an alle Dank.
Gruss
Hier noch ein Muster wie die Navi im Moment aussieht.
Klicken um den Anhang anzusehen
Habe nur noch ein Problem bei der aktiven Seite habe ich einen weissen Balken hinterlegt, dieser verschiebt es um den Abstan vom Rand und einen Punkt jewails am ende der Navi?
Ich hoffe ich bekomme das auch noch in den Griff.
Gruss
Klicken um den Anhang anzusehen
Habe nur noch ein Problem bei der aktiven Seite habe ich einen weissen Balken hinterlegt, dieser verschiebt es um den Abstan vom Rand und einen Punkt jewails am ende der Navi?
Ich hoffe ich bekomme das auch noch in den Griff.
Gruss
mh, hast du den aussenabstand dem li element gegeben? falls ja, gib sie dem linkelement innerhalb des li elementes.
falls nein, poste deinen code :-)
gruss andi
falls nein, poste deinen code :-)
gruss andi
ZITAT
Möchte aber nochmals nachfragen {id} gibt die nur die Nummer des Ordner oder der Seite zurück oder eine fortlaufende Nummer?
Ja, ist die ID von Ordner/Seite und keine fortlaufende Nummer.
Nur der vorsorgliche Hinweis: Diese ID ist nicht immer eindeutig. Angenommen wir haben einen Ordner mit ID 1 und darin die Seiten IDs 1-5. Dann kommt die ID natürlich bei der Ausgabe 2mal vor, einmal für die Seite und einmal für den Ordner. Daher würde ich hier nie das xhtml-Attribut ID verwenden, sondern immer eine Klasse. Aber da Seiten bzw. Ordner (normalerweise) unterschiedlich ausgegeben werden, kannst Du das später im css unterscheiden, beispielweise:
QUELLTEXT
ul.navmenu_1
li.navmenu_1
li.navmenu_1
Gruß
Jan
die problematik kannst du doch einfach umgehen, indem du das template für ordner und seiten unterschiedlich gestaltest:
order:
seite:
oder verstehe ich was nicht?
order:
QUELLTEXT
<li><a href="{link}" id="ordner_{id}">{name}</a>{folder}</li>
seite:
QUELLTEXT
<li><a href="{link}" id="seite_{id}>{name}</a></li>
oder verstehe ich was nicht?
Hm, ich erinnere mich grad dunkel daran, dass gerade der IE bei so einem Menü mal wieder eine Sonderbehandlung verlangt. Weiß allerdings nicht mehr, ob das auch für festgelegte Spaltenbreiten gilt.
Weitere Infos zu diesem Menütyp und wie man die IE-Bugs dabei in den Griff bekommt, findent man im
yaml-Framework.
@andi: Hast Recht Manchmal kommt man nicht auf die einfachsten Lösungen...tsss 
Weitere Infos zu diesem Menütyp und wie man die IE-Bugs dabei in den Griff bekommt, findent man im
yaml-Framework.
@andi: Hast Recht
Manchmal kommt man nicht auf die einfachsten Lösungen...tsss
Habe's fast geschafft, die Naiv funktioniert soweit wie gewünscht nur im IE6 wird der weisse Balken nur bei der Schrift hinterlegt und nicht über die ganze Breite, weiss evtl. auch hierzu jemand Rat evtl. einen Hack.
Gruss
Hier der CSS-Code
Gruss
Hier der CSS-Code
QUELLTEXT
/* CSS Document */
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #eff8e7;
color: #000;
}
ul#navmenu {
float: left;
width: 26.4em;
list-style: none;
background-image: url(../../media/bilder-layout/navi-hg.png);
background-repeat: no-repeat;
height: 8.7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul#navmenu a {
border: 0 none;
padding: 1px 0px 0px 0px;
float: none !important; /*für Opera*/
float: left; /*für IE*/
display: block;
color: #454518;
text-decoration: none;
height: auto !important;
height: 1%; /*für IE*/
font-size: 90%; /*schriftgrösse für ganzes Menü proporzial anpassen*/
font-style: normal;
font-weight: normal;
font-variant: normal;
}
ul#navmenu li {
float: left;
width: 105px;/* 7.45em;*/
}
ul#navmenu ul {
margin-top: 0.5em;
list-style: none;
font-size: 80%;
padding-left: 0px;
}
ul#navmenu li a {
list-style-type: none;
display: block;
text-decoration: none;
color: #464600;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a.navactive {
list-style-type: none;
display: block;
text-decoration: none;
padding: 2px 0px 0px 10px;
background-color: #FFFFFF;
color: #990000;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a:hover {
color: #990000;
background-color: #FFFFFF;
display: block;
}
ul#navmenu .ordner {
float: left;
width: 105px;/* 7.45em;*/
font-size: 90%;
text-align: center;
padding-bottom: 5px;
}
ul#navmenu .ordneraktive {
float: left;
width: 105px;/* 7.45em;*/
font-size: 90%;
text-align: center;
font-weight: bold;
padding-bottom: 5px;
}
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #eff8e7;
color: #000;
}
ul#navmenu {
float: left;
width: 26.4em;
list-style: none;
background-image: url(../../media/bilder-layout/navi-hg.png);
background-repeat: no-repeat;
height: 8.7em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul#navmenu a {
border: 0 none;
padding: 1px 0px 0px 0px;
float: none !important; /*für Opera*/
float: left; /*für IE*/
display: block;
color: #454518;
text-decoration: none;
height: auto !important;
height: 1%; /*für IE*/
font-size: 90%; /*schriftgrösse für ganzes Menü proporzial anpassen*/
font-style: normal;
font-weight: normal;
font-variant: normal;
}
ul#navmenu li {
float: left;
width: 105px;/* 7.45em;*/
}
ul#navmenu ul {
margin-top: 0.5em;
list-style: none;
font-size: 80%;
padding-left: 0px;
}
ul#navmenu li a {
list-style-type: none;
display: block;
text-decoration: none;
color: #464600;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a.navactive {
list-style-type: none;
display: block;
text-decoration: none;
padding: 2px 0px 0px 10px;
background-color: #FFFFFF;
color: #990000;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 50%;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a:hover {
color: #990000;
background-color: #FFFFFF;
display: block;
}
ul#navmenu .ordner {
float: left;
width: 105px;/* 7.45em;*/
font-size: 90%;
text-align: center;
padding-bottom: 5px;
}
ul#navmenu .ordneraktive {
float: left;
width: 105px;/* 7.45em;*/
font-size: 90%;
text-align: center;
font-weight: bold;
padding-bottom: 5px;
}
versuchs mal mit height: 1% bei ul#navmenu li a nur dür ie, also
oder in einem separaten stylesheet.
QUELLTEXT
* html ul#navmenu li a {height:1%}
oder in einem separaten stylesheet.
ZITAT(feniweb @ Wed. 25. July 2007, 15:14)
Habe's fast geschafft, die Naiv funktioniert soweit wie gewünscht nur im IE6 wird der weisse Balken nur bei der Schrift hinterlegt und nicht über die ganze Breite, weiss evtl. auch hierzu jemand Rat evtl. einen Hack.
hallo feniweb,
kurze frage: funktionierts bei dir nun? hab etliche probleme das gleiche darzustellen!
hättest du eventuell die modul config und das fertige css dazu?
wäre nett!
cheers
*s*
das bekannteste dropdown dürfte wohl das suckerfish dropdown sein. auf der seite gibt es sogar eine schritt-für-schritt anleitung. leider nur mit javascript für den ie.
dann gäbe es noch das dropdown-menü von stu nicholls. kommt ganz ohne javascript aus. allerdings mit conditional comments für den ie, welche du nicht ohne weiteres mit der listennavigation hinkriegst.
gruss andi
dann gäbe es noch das dropdown-menü von stu nicholls. kommt ganz ohne javascript aus. allerdings mit conditional comments für den ie, welche du nicht ohne weiteres mit der listennavigation hinkriegst.
gruss andi
ich musste mir die sachen selber beantworten.
mit ungeordneten listen <ul><li> gings NICHT. jedenfalls nicht auf allen browsern.
dann habe ich ne interessante lösung mit divs gefunden:
man braucht nur ein modul für haupt und subnavigation.
die styles sind sehr einfach.
das teil läuft auf allen browsern.
styles:
.ordner {
position:relative;
display:inline;
padding:0;
padding-left:5px;
padding-right:5px;
}
.seite {
position:absolute; /* durch "absolute" wird der div flow der ordner nicht gestört */
top:18px;
left:5px;
padding:0;
}
.seitenlink a etc.
.ordnerlink a etc.
Modulconfig:
- Startordner: root
- Anzeigeart: Ordner mit Seiten
- Komplette Ordnerstruktur anzeigen: ja
- Startseiten anzeigen: ja
Ebene:
{layer}
Seite:
<span class="seitenlink"><a href="{link}">{name}</a><br /></span>
Aktuelle Seite:
<span class="seite_active">{name}<br /></span>
Ordner:
(ohne seiten)
<div class="ordner"><span class="ordnerlink"><a href="{link}">{name}</a></span></div>
(mit seiten)
<div class="ordner"><span class="ordnerlink"><a href="{link}">{name}</a></span><div class="seite">{folder}</div></div>
Aktiver Ordner:
<div class="ordner"><a href="{link}" id="ordner_active">{name}</a><div class="seite">{folder}</div></div>
Verfolgter Ordner:
dito aktiv.
zu sehen hier:
http://www.felber-stiftung.ch/projekt01/
achtung baustelle! wird später im root sein!
hope this helps
cheers
*s*
mit ungeordneten listen <ul><li> gings NICHT. jedenfalls nicht auf allen browsern.
dann habe ich ne interessante lösung mit divs gefunden:
man braucht nur ein modul für haupt und subnavigation.
die styles sind sehr einfach.
das teil läuft auf allen browsern.
styles:
.ordner {
position:relative;
display:inline;
padding:0;
padding-left:5px;
padding-right:5px;
}
.seite {
position:absolute; /* durch "absolute" wird der div flow der ordner nicht gestört */
top:18px;
left:5px;
padding:0;
}
.seitenlink a etc.
.ordnerlink a etc.
Modulconfig:
- Startordner: root
- Anzeigeart: Ordner mit Seiten
- Komplette Ordnerstruktur anzeigen: ja
- Startseiten anzeigen: ja
Ebene:
{layer}
Seite:
<span class="seitenlink"><a href="{link}">{name}</a><br /></span>
Aktuelle Seite:
<span class="seite_active">{name}<br /></span>
Ordner:
(ohne seiten)
<div class="ordner"><span class="ordnerlink"><a href="{link}">{name}</a></span></div>
(mit seiten)
<div class="ordner"><span class="ordnerlink"><a href="{link}">{name}</a></span><div class="seite">{folder}</div></div>
Aktiver Ordner:
<div class="ordner"><a href="{link}" id="ordner_active">{name}</a><div class="seite">{folder}</div></div>
Verfolgter Ordner:
dito aktiv.
zu sehen hier:
http://www.felber-stiftung.ch/projekt01/
achtung baustelle! wird später im root sein!
hope this helps
cheers
*s*
sorry, aber dein menü hat auch nichts mit dem menü zu tun, von welchem hier im beitrag die rede ist....wer soll schon wissen was du willst?
update:
habe mir gerade deine lösung kurz angeschaut. nicht gerade semantisch. mit listen geht dein vorhaben ganz einfach...kein unnötiges markup, semantisch korrekt, valide, crossbrowser-kompatibel.
gruss andi
update:
ZITAT
mit ungeordneten listen <ul><li> gings NICHT. jedenfalls nicht auf allen browsern.
habe mir gerade deine lösung kurz angeschaut. nicht gerade semantisch. mit listen geht dein vorhaben ganz einfach...kein unnötiges markup, semantisch korrekt, valide, crossbrowser-kompatibel.
gruss andi
ZITAT(andi @ Mon. 13. August 2007, 07:06)
sorry, aber dein menü hat auch nichts mit dem menü zu tun, von welchem hier im beitrag die rede ist....wer soll schon wissen was du willst?
äähm... hallooo? guten morgen!
das ist derselbe typ menu, oder?
(mit seiten in jedem ordner)
Ordner1 | Ordner 2 | Ordner 3 | Ordner 4 |
- 1. Seite | - 1. Seite | - 1. Seite | - 1. Seite |
- 2. Seite | - 2. Seite | - 2. Seite | - 2. Seite |
- 3. Seite | - 3. Seite | - 3. Seite | - 3. Seite |
- 4. Seite | - 4. Seite | - 4. Seite | - 4. Seite |
- 5. Seite | - 5. Seite | - 5. Seite | - 5. Seite |
(nur seiten im aktiven ordner)
Ordner1 | Ordner 2 | Ordner 3 | Ordner 4 |
- 1. Seite |
- 2. Seite |
- 3. Seite |
- 4. Seite |
- 5. Seite |
und genau diesselbe situation im backend...
nur funktioniert meine methode für eine unbegrenzte anzahl ordner.
und semantisch ist das korrekt! nur weil alle listen brauchen heisst das noch lange nichts... die divs funktionieren perfekt. auch mit taborder etc...
hier der output:
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 1</a></span></div>
<div class="ordner"><a href="#" id="ordner_active">Ordner 2</a>
<div class="seite">
<span class="seitenlink"><a href="#">Seite 1</a><br /></span>
<span class="seitenlink"><a href="#">Seite 2</a><br /></span>
<span class="seitenlink"><a href="#">Seite 3</a><br /></span>
<span class="seitenlink"><a href="#">Seite 4</a><br /></span>
</div>
</div>
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 3</a></span></div>
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 4</a></span></div>
<div class="ordner"><span class="ordnerlink"><a href="#">Ordner 5</a></span></div>
ich weiss ja nicht. also, bevor du hier unnütze links und beleidigungen verteilst, schau du besser mal nach um was es hier geht!
ZITAT(andi @ Mon. 13. August 2007, 07:06)
update:
habe mir gerade deine lösung kurz angeschaut. nicht gerade semantisch. mit listen geht dein vorhaben ganz einfach...kein unnötiges markup, semantisch korrekt, valide, crossbrowser-kompatibel.
gruss andi
habe mir gerade deine lösung kurz angeschaut. nicht gerade semantisch. mit listen geht dein vorhaben ganz einfach...kein unnötiges markup, semantisch korrekt, valide, crossbrowser-kompatibel.
gruss andi
dein menu vom link ist total was anderes... und ja... das geht mit listen!
das was ich vorhatte geht nicht mit listen! impossible!
voilà
guten morgen!
ZITAT(outline4 @ Mon. 13. August 2007, 09:59)
äähm... hallooo? guten morgen!
morgen
ZITAT(outline4 @ Mon. 13. August 2007, 09:59)
das ist derselbe typ menu, oder?
mach die augen auf und lies den ersten beitrag von feni. wie gesagt, welche anforderungen du hast weiss nur die kristallkugel. meine lösung funktioniert einwandfrei im bezug auf die ausgangslage in diesem beitrag.
ZITAT(outline4 @ Mon. 13. August 2007, 09:59)
nur funktioniert meine methode für eine unbegrenzte anzahl ordner.
aha. und bei der von mir publizierte lösung nicht? woran solls denn scheitern? die navigation ist beliebig erweiterbar.
ZITAT(outline4 @ Mon. 13. August 2007, 09:59)
und semantisch ist das korrekt! nur weil alle listen brauchen heisst das noch lange nichts... die divs funktionieren perfekt. auch mit taborder etc...
schau dir deine seite doch mal ohne css an und sag mir, wie ich z.b erkennen soll, in welchem zusammenhang «felber - stiftung» und «stiftungsrat» stehen. die seiten stehen hierarchisch gleichberechtigt, obwohl «stiftungsrat» eine unterseite von «felber - stiftung» ist.
ZITAT(outline4 @ Mon. 13. August 2007, 09:59)
ich weiss ja nicht. also, bevor du hier unnütze links und beleidigungen verteilst, schau du besser mal nach um was es hier geht!
dein menu vom link ist total was anderes... und ja... das geht mit listen!
dein menu vom link ist total was anderes... und ja... das geht mit listen!
von meiner seite wurde keine beleidigung ausgesprochen. ich habe lediglich die fakten auf den tisch gelegt so wie sie sind.
ZITAT(outline4 @ Mon. 13. August 2007, 09:59)
das was ich vorhatte geht nicht mit listen! impossible!
in diesem satz schreibst du ja selber, dass das was du vorhattest, nicht mit listen geht. die ausgangslage in diesem beitrag ist mit meiner lösung reproduzierbar. was du vorhattest ist nirgendwo geschrieben. dein onlinebeispiel lässt sich ohne probleme mit meiner lösung umsetzen.
du kannst dir gerne noch ein paar gedanken darüber machen. ich bin aus diesem beitrag raus (es sei denn feni kommt noch mit einem anliegen seinerseits).
gruss andi
ZITAT(andi @ Mon. 13. August 2007, 10:37)
bla
danke für deine ausführliche hilfe!
*s*
ehm, machst du jetzt schon eigene zitate, welche ich nicht widergegeben habe?
OK, bitte kehrt zum Thema zurück. Persönliche Differenzen klärt bitte per PM. Herzlichen Dank.
Hier also meine aktuelle Lösung.
Klicken um den Anhang anzusehen
CSS Datei:
bis jetzt wird es in allen Browsern richtig dargestellt
Gruss
Klicken um den Anhang anzusehen
CSS Datei:
bis jetzt wird es in allen Browsern richtig dargestellt
QUELLTEXT
* {
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #eff8e7;
color: #000;
}
ul#navmenu {
float: left;
width: 28.5em;
list-style: none;
background-image: url(../../media/bilder-layout/hg-navi-01.jpg);
background-repeat: no-repeat;
height: 8.65em;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
ul#navmenu a {
border: 0 none;
padding: 1px 0px 0px 0px;
float: none !important; /*für Opera*/
float: left; /*für IE*/
display: block;
color: #454518;
text-decoration: none;
height: auto !important;
height: 1%; /*für IE*/
font-size: 85%;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
ul#navmenu li {
float: left;
width: 110px;
}
ul#navmenu ul {
margin-top: 0.5em;
list-style: none;
font-size: 80%;
padding-left: 0px;
}
ul#navmenu li a {
list-style-type: none;
display: block;
text-decoration: none;
color: #464600;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 4px;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a.navactive {
list-style-type: none;
display: block;
text-decoration: none;
padding: 2px 0px 0px 10px;
background-color: #FFFFFF;
color: #990000;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 4px;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a:hover {
color: #990000;
background-color: #FFFFFF;
display: block;
}
ul#navmenu .ordner {
float: left;
width: 110px;
font-size: 90%;
text-align: center;
padding-bottom: 5px;
}
ul#navmenu .ordneraktive {
float: left;
width: 110px;
font-size: 90%;
text-align: center;
font-weight: bold;
padding-bottom: 5px;
}
margin: 0;
padding: 0;
border: none;
}
body {
background-color: #eff8e7;
color: #000;
}
ul#navmenu {
float: left;
width: 28.5em;
list-style: none;
background-image: url(../../media/bilder-layout/hg-navi-01.jpg);
background-repeat: no-repeat;
height: 8.65em;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
ul#navmenu a {
border: 0 none;
padding: 1px 0px 0px 0px;
float: none !important; /*für Opera*/
float: left; /*für IE*/
display: block;
color: #454518;
text-decoration: none;
height: auto !important;
height: 1%; /*für IE*/
font-size: 85%;
font-style: normal;
font-weight: normal;
font-variant: normal;
}
ul#navmenu li {
float: left;
width: 110px;
}
ul#navmenu ul {
margin-top: 0.5em;
list-style: none;
font-size: 80%;
padding-left: 0px;
}
ul#navmenu li a {
list-style-type: none;
display: block;
text-decoration: none;
color: #464600;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 4px;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a.navactive {
list-style-type: none;
display: block;
text-decoration: none;
padding: 2px 0px 0px 10px;
background-color: #FFFFFF;
color: #990000;
background-image: url(../../media/bilder-layout/arrow-right.gif);
background-repeat: no-repeat;
background-position: 2px 4px;
padding: 2px 0px 0px 10px;
}
ul#navmenu li a:hover {
color: #990000;
background-color: #FFFFFF;
display: block;
}
ul#navmenu .ordner {
float: left;
width: 110px;
font-size: 90%;
text-align: center;
padding-bottom: 5px;
}
ul#navmenu .ordneraktive {
float: left;
width: 110px;
font-size: 90%;
text-align: center;
font-weight: bold;
padding-bottom: 5px;
}
Gruss
ZITAT(andi @ Mon. 13. August 2007, 10:42)
ehm, machst du jetzt schon eigene zitate, welche ich nicht widergegeben habe?
sorry, muss mich entschuldigen.
hatte "wer will schon wissen was du weisst?", anstatt "wer soll schon wissen was du willst?" gelesen. das ist natürlich was gaaanz anderes und dann war es noch montag morgen. mir wurde was wichtiges geklaut etc etc...
war gefrustet!
deine lösung ist gut!
danke für das gute beispiel!
muss mal testen ob die dann wirklich überall läuft, denn ich hatte es genau so gelöst, bin aber immer wieder auf inkompabilitäten beim css gestossen!
nochmals sorry!
@feniweb
vielen dank fürs posten!
cheers
*s*
ZITAT(outline4 @ Mon. 13. August 2007, 12:30)
muss mal testen ob die dann wirklich überall läuft, denn ich hatte es genau so gelöst, bin aber immer wieder auf inkompabilitäten beim css gestossen!
also unter ie 5.5, 6 und 7 win, opera 9, firefox 2 und safari 2 lufts. mehr habe ich nicht getestet. falls es in einem anderen browser nicht klappt bitte ich um rückmeldung.
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.