CHris08156 Geschrieben 4. Oktober 2005 Teilen Geschrieben 4. Oktober 2005 Hi! Ich möchte ein Menu mit Untermehnues erzeugen. dazu habe ich in php ein array angelegt, welches für jeden menupunkt den angezeugten namen, href und evtl. ein array mit einem untermenu enthält, welches wiederrum ein untermenu enthalten kann, usw. Also praktisch ein mehrdimensionales, geschachteltes array. Das auslesen klappt auch ganz gut. aber ich weiß nicht, wie ich es am sinnvollsten in html darstelle. momentan sieht es so aus: css-script: div#Menu { float: left; width: 15em; } div#Menu ul { float: left; width: 15em; margin: 0 0; padding: 0; } div#Menu li { list-style: none; margin: 1px; padding: 0.5em; background-color: #4A4B4F; } div#Menu p { margin: 0 3em; padding: 0.5em; } html-script <div id="Menu"> <ul> <li><a href="./index.html">Home & News</a></li> <li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li> <li><a href="./tcl-projects.html">Tcl Projekte</a></li> <p> <li><a href="./tcl-projects.html">4 Gewinnt</a></li> <li><a href="./tcl-projects.html">Chess</a></li> <li><a href="./tcl-projects.html">Screen</a></li> <li><a href="./tcl-projects.html">Tetris</a></li> <li><a href="./tcl-projects.html">Space</a></li> </p> <li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li> </ul> </div> Ich dachte eigentlich, dass durch den tag <p> das untermenu etwas eingerückt wird. Wird es aber leider nicht. warscheinlich weil ich für <li> ein css-style gesetzt habe. aber ich wollte auch nicht für jede ebene ein css-style vergeben. Ich dachte mir, wenn ich in eine neue ebene komme, lege ich einen neuen <p> an und der ist dann automatisch (siehe css-style) etwas eingerückt. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
xmurrix Geschrieben 4. Oktober 2005 Teilen Geschrieben 4. Oktober 2005 Hallo CHris08156, ein Untermenü sollte innerhalb eines Listenelementes (<li>) untergebracht sein, und auch am besten als eine neue Liste, also: <div id="Menu"> <ul> <li><a href="./index.html">Home & News</a></li> <li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li> <li><a href="./tcl-projects.html">Tcl Projekte</a></li> <li> <ul> <li><a href="./tcl-projects.html">4 Gewinnt</a></li> <li><a href="./tcl-projects.html">Chess</a></li> <li><a href="./tcl-projects.html">Screen</a></li> <li><a href="./tcl-projects.html">Tetris</a></li> <li><a href="./tcl-projects.html">Space</a></li> </ul> </li> <li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li> </ul> </div> Gruß, xmurrix Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
CHris08156 Geschrieben 4. Oktober 2005 Autor Teilen Geschrieben 4. Oktober 2005 Das Problem dabei ist, dass durch mein css-style, alle ul-elemente den rand 0 haben. dass heißt, das neue elemente nicht mehr eingerückt werden. deshalb wollte ich mit <p> weiter einrücken. mit <blockquote> funktioniert es (auch ohne neue liste <ul>). aber dann ist der abstand so groß. Kann man den wiederum etwas kleiner machen? Ich hab mal ein Bild angehängt, wie es in etwa aussehen soll. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Aiun Geschrieben 4. Oktober 2005 Teilen Geschrieben 4. Oktober 2005 dann mach für das Sub-UL eine neue CSS-Klasse und mach da einen Rand rein Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
CHris08156 Geschrieben 4. Oktober 2005 Autor Teilen Geschrieben 4. Oktober 2005 Ich wollte ja nicht für jede Untermenu-ebene einen neuen style machen. gehts nicht anders. wie schon geschrieben, ich habs mit <blockquote> fast hinbekommen. nur wie kann ich da den abstand ändern? Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
CHris08156 Geschrieben 4. Oktober 2005 Autor Teilen Geschrieben 4. Oktober 2005 Was haltet ihr von folgendem code? css-script .indented { margin-left: 3em; } html-script <div id="Menu"> <ul> <li><a href="./index.html">Home & News</a></li> <li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li> <li><a href="./tcl-projects.html">Tcl Projekte</a></li> <div class="indented"> <li><a href="./tcl-projects.html">4 Gewinnt</a></li> <div class="indented"> <li><a href="./tcl-projects.html">sub 4 Gewinnt</a></li> </div> <li><a href="./tcl-projects.html">Chess</a></li> <li><a href="./tcl-projects.html">Screen</a></li> <li><a href="./tcl-projects.html">Tetris</a></li> <li><a href="./tcl-projects.html">Space</a></li> </div> <li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li> </ul> </div> dadurch bin ich nicht an eine bestimmte menge ebenen gebunden sondern kann teoretisch unendlich viele erzeugen (auch wenn man es bei 3-5 belassen sollte) und es ist wenig code! Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
bmg4ever Geschrieben 4. Oktober 2005 Teilen Geschrieben 4. Oktober 2005 in welchem browser hast du dir das angesehen? Im IE z.b. siehts grauenhaft aus. Das wird nur korrekt dargestellt, wenn du es wie folgt machst: <div id="Menu"> <ul> <li><a href="./index.html">Home & News</a></li> <li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li> <li><a href="./tcl-projects.html">Tcl Projekte</a></li> <div class="indented"> [B]<ul>[/B] <li><a href="./tcl-projects.html">4 Gewinnt</a></li> <div class="indented"> [B]<ul>[/B] <li><a href="./tcl-projects.html">sub 4 Gewinnt</a></li> [B]</ul>[/B] </div> <li><a href="./tcl-projects.html">Chess</a></li> <li><a href="./tcl-projects.html">Screen</a></li> <li><a href="./tcl-projects.html">Tetris</a></li> <li><a href="./tcl-projects.html">Space</a></li> [B]</ul>[/B] </div> <li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li> </ul> </div> dann musst du nur noch die margin etwas justieren. prinzipiell gehts also, wobei ich nicht ausschließen möchte, dass man das auch mit ohne die div's direkt über ul's hinbekommt, aber sicher bin ich mir da nicht. Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
xmurrix Geschrieben 4. Oktober 2005 Teilen Geschrieben 4. Oktober 2005 Also, so ist's auf jeden Fall nicht richtig (nicht valides HTML/XHTML), eher folgendermaßen: CSS: div#Menu .indented{margin-left:3em;} HTML: <div id="Menu"> <ul> <li><a href="./index.html">Home & News</a></li> <li><a href="ftp://mychrisoft.game-host.org/">Downloads</a></li> <li><a href="./tcl-projects.html">Tcl Projekte</a></li> <li> <ul class="indented"> <li><a href="./tcl-projects.html">4 Gewinnt</a></li> <li><a href="./tcl-projects.html">Chess</a></li> <li><a href="./tcl-projects.html">Screen</a></li> <li> <ul class="indented"> <li><a href="./tcl-projects.html">4 Gewinnt</a></li> <li><a href="./tcl-projects.html">Chess</a></li> <li> <ul class="indented"> <li><a href="./tcl-projects.html">4 Gewinnt</a></li> <li><a href="./tcl-projects.html">Chess</a></li> <li><a href="./tcl-projects.html">Screen</a></li> <li><a href="./tcl-projects.html">Tetris</a></li> <li><a href="./tcl-projects.html">Space</a></li> </ul> </li> <li><a href="./tcl-projects.html">Screen</a></li> <li><a href="./tcl-projects.html">Tetris</a></li> <li><a href="./tcl-projects.html">Space</a></li> </ul> </li> <li><a href="./tcl-projects.html">Tetris</a></li> <li><a href="./tcl-projects.html">Space</a></li> </ul> </li> <li><a href="/phpMyAdmin/index.php">phpMyAdmin</a></li> </ul> </div> Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.