[CSS] Idee fuer Menueumsetzung

m0mo

m0mo

Aktives Mitglied
Thread Starter
Dabei seit
26.03.2005
Beiträge
478
Reaktionspunkte
2
das geht hier an alle CSS Tueftler,

folgendes Problem habe ich gerade:

Ich baue gerade ein Menue mit 2 Ebenen. das folgende Struktur haben soll:

menu.png


Code: 
<ul>
 <li>Erste Ebene
  <ul>
   <li style="display:inline;">Beschreibung</li><li>Untermenu 1</li>
   <li>Untermenu 2</li>
  </ul>
 </li>
</ul>

nun moechte ich folgendes erreichen: Die Punkte Untermenu 1 und Untermenu 2 sollen den gleichen Abstand von links haben - und das am besten variabel nach dem Text (in dem Fall "Beschreibung").
Aber wie? Ich kann zwar den Untermenuepunkten eine anderen Abstand geben, aber das ist irgendwie unschoen. Eine wirklich elegante Loesung faellt mir aber nicht ein. Deswegen: Hat jemand von euch eine Idee?

Vielen Dank fuer eure Hilfe!
m0mo
 
Du könntest 3 Listen untereinander nehmen, nur die mittlere wird anders formatiert.
 
joachim: kannst du das bitte genauer erklaeren? Genau um diese Formatierungsidee geht es ja, da steh ich auf dem schlauch :)
 
Ich habe verstanden, dass Du eine Liste mit Elementen haben möchtest, bei denen irgendwo in der Mitte ein Teil anders aussieht.
Der Lösungsvorschlag heißt, Du erstellst nicht eine Liste und bastelst an mittleren Elementen, sondern Du erstellst 3 Listen untereinander. Die obere und die untere Liste sind vom Design her gleich, die mittlere sieht optisch anders aus.
Ansonsten unterscheiden sich die CSS-Definitionen nur durch den top-Wert.
 
joachim14 - hast du dir das bild einmal angeschaut? ich glaube da sieht man es ganz gut was ich will. Das ist ja so schon wie ich es haben moechte, nur mit einem Manko, dass ich den abstand fuer untermenu2 manuell eingestellt habe. Er sollte sich aber nach der Textlaenge des vorangestellten Wortes (auf dem Bild: Beschreibung) ausrichten.

was du genau mit mittlere liste meinst, kann ich leider nicht nachvollziehen. Wenn du die Zeit hast, kannst du ja vielleicht mal den HTML Code dafuer aufschreiben, damit ich dein Bild bekomme.

mfg m0mo
 
Vielleicht habe ich es noch nicht ganz verstanden. Aber lass doch mal das display:inline weg.
Dann stehen doch die Listenpunkte untereinander, ggf. CSS mit text-decoration: none; versehen.
 
So ginge es doch, oder?
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Menü</title>
<style type="text/css">
/* <![CDATA[ */
dd.rubrik    { clear:both; border:1px solid red; float:left; margin:0; padding:0 5px; }
dd.subrubrik { border:1px solid red; background:red; color:white; float:left; margin:0; padding:0 5px; }
ul.subrubrik { list-style:none; margin:0; padding:0; }
/* ]]> */
</style>
</head>
<body>
<dl>
<dd class="rubrik">Rubrik 1:</dd>
<dd class="subrubrik">
    <ul class="subrubrik">
    <li>Rubrik 1 Untermenü 1</li>
    <li>Rubrik 1 Untermenü 2</li>
    </ul>
</dd>
<dd class="rubrik">Rubrik xyz:</dd>
<dd class="subrubrik">
    <ul class="subrubrik">
    <li>Rubrik xyz Untermenü 1</li>
    <li>Rubrik xyz Untermenü 2</li>
    </ul>
</dd>
<dd class="rubrik">Rubrik a-z xyz:</dd>
<dd class="subrubrik">
    <ul class="subrubrik">
    <li>Rubrik a-z xyz Untermenü 1</li>
    <li>Rubrik a-z xyz Untermenü 2</li>
    </ul>
</dd>
</dl>
</body>
</html>
 
Ich greife hier mal vor: Und wo ist die Beschreibung?

Ich denke das ganze ist durchaus problematisch ohne feste Breite. Ich wüsste jetzt auf Anhieb nicht wie man das ohne absolute Positionierung oder padding im Submenü hinbekommen sollte. Aber beides setzt eben eine feste Breite voraus.

Vlt. ist das eine Lösung, wenn auch etwas komisch: Ich würde die Beschreibung rausschmeissen und als title-Attribut für den Hauptnavpunkt setzen. Dann ist das Menü nur noch eine ganz gewöhnliche verschachtelte Liste. Jetzt kommst Du mit jQuery und baselst das dynamisch zurecht. So kannst Du die nötige Breite ermitteln und setzen.

Und jetzt kommt einer und postet eine Lösung wie es doch ohne feste Breite geht. ;)
 
hallo joachim14, danke fuer die idee, aber so geht es leider nicht. (wie dms schon sagte, fehlt da immer noch die beschreibung)

hallo dms, okay, du bestaetigst eigentlich das, was ich vorher schon geahnt hatte. Leider soll die Beschreibung nicht als uebermenuepunkt gesetzt sein. Wenn ich es nun als title="beschreibung" setze, wie greife ich auf den title per css zu? ich dachte bisher, dass das title-attribut nur zur kommentierung von elementen dient.
nun gut, sei es wie es ist, dann werd ich mir wohl die breite des <li> elementes mit der beschreibung zurueckgeben lassen.

vielen dank erstmal fuer die hilfe und die ideen.

mfg
m0mo
 
m0mo schrieb:
Wenn ich es nun als title="beschreibung" setze, wie greife ich auf den title per css zu?
Zum Vergrößern anklicken....
Garnicht. :) Ich habe ja schon jQuery erwähnt, das ist dann JavaScript.

Klar, ohne JS gibt es diese Beschreibung nur in der Form des Title-Attributs. Aber immerhin. :)

Mit JavaScript (jQuery) kannst Du dann leicht den Title auslesen, ein neues Element mit der Beschreibung erzeugen, dessen Breite ermitteln und CSS-Eigenschaften des Submenüs anpassen.

Ich sag ja, ist etwas komisch. :)
 
okay, ich dachte es gibt da auch so sonderattribute wie z.B. fuer die Druckausgabe.
Das gefrickel ist wirklich unschoen, vielleicht red ich mit dem Kunden auch nochmal, dass wir es etwas schoener/konformer loesen. :)

mfg
m0mo
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten