css- menü :)

C

countryqt30

Mitglied
Hi, ich möchte gerne wissen,
wie man mit css denn so eine art menü erstellen kann?
wie z.b. Hier -> http://bussard.bplaced.net/c.o.r.a/#

Ich habe mir schon einiges im css angesehen, das ist aber sehr hässlich geschrieben und auch kein valides css so wie ich das sehe.
Mein spezielles problem ist, ich bekomme nicht hin, dass die unterelemente ( im obigen beispiel bei z.b. products mit einem x bei mouseover gekennzeichnet) richtig angezeigt werden.
Sprich: erst bei mouseover angezeigt werden und dann auch noch so schön darunter! :)

Mein aktueller ansatz:
HTML: 
    <div id="menu">
    	<ul>
        	<li><a href="">foo1</a></li>
        	<li><a href="">foo2</a></li>
        	<li><a href="">foo3</a></li>
            	<ul>
                	<li><a href="">foo3.1</a></li>
                	<li><a href="">foo3.2</a></li>
                	<li><a href="">foo3.3</a></li>
                </ul>
        	<li><a href="">foo4</a></li>
        </ul>
    </div>

und in der css dazu:
HTML: 
#menu ul
{
	list-style-type: none;
	list-style-position: outside; /* outside = standard */
	/* list-style-image: url(images/ok_s.png); */
	margin: 10% 5% 10% 5%;
	padding: 0px;
}

#menu ul li
{
	float: left;
	padding: 0px;
	background: #999;
	border: 5px #FFF;
	text-align: center;
	text-decoration: none;
	margin: 0px;
	padding: 0px 35px;
	line-height: 35px;
	display: block;
}

/* unterelemente */
#menu ul ul li
{
	margin:0px;
	padding:0px 10px 0px 15px;
	background: #aaa;
	color: #33;
	border: thin #CCC solid;
	position: absolute;
	height: auto;
	width: 200px;
	z-index: 200;
	text-align: left;
	display: none;
	
}

#menu ul li a:hover
{
	background: #CC3;
	color: #000;
	display: block;	
}

Man kann es evtl mit display: none und display:block machen bei nem mouseover.
Ich frage deshalb wie das geht und wie ich eben die unterelemente richtig angezeigt bekomme.
 
Häßlich geschriebener Code wäre komprimierter Code, der ausschließlich von Interpretern / Maschinen lesbar ist. Aber selbst die "individuelle" Schreib-/ Formatierweise des CSS-Autors sagt ja mal rein garnichts über den Qualitätsgehalt aus - im Notfall liesse sich der Code für das entspannte Studium auch einfach kurzerhand umformatieren, den persönlichen Vorlieben angleichen :)

Und wo bist du bei deinem Lehrgang über "invalides" CSS gestolpert? :suspekt:

Das zugehörige Stylesheet http://bussard.bplaced.net/c.o.r.a/menu_style.css deines auserkorenen CSS-Menüs ist definitiv valide, wie eine Überprüfung ergab -> http://jigsaw.w3.org/css-validator/...rofile=css21&usermedium=all&warning=1&lang=de ;-)

Von daher, wo ist mit dieser funktionstüchtigen "Arbeitsvorlage" hier nun das Problem der Umsetzung?

Lediglich dein vorgestelltes Markup (HTML) für eine verschachtelte Menüstruktur stimmt so mit der Vorlage nicht überein, ist in dieser Form invalide, was in so ziemlich jedem Browser Fehldarstellungen zur Folge hat (Untermenüs werden nicht zunächst versteckt, u.ä.), weil im Stylesheet mit den praxisüblichen CSS-Selektoren für Nachfahren bzgl. der Untermenüebenen keine Übereinstimmung vorherrscht, und so ihre CSS-Regeln nicht interpretiert, auf das HTML-Dokument angewendet, werden.

Und da offensichtlich übersehen oder nicht umfassend durchgelesen, in der Themenübersicht des CSS-Forums finden sich eine u. drei Zeilen unter deinem heutigen Eintrag zwei verwandte Themen mit weiterführenden Links zu Anleitungen und unzähligen Demos für sog. Dropdown-, Dropfly-, Dropline-Menüs, die auf validem CSS basieren. Die Suchmaschine kennt bestimmt noch weitere.
 
Zuletzt bearbeitet:
Sowas wäre in der Tat nicht regelkonform, kommt aber in dem genannten CSS auch überhaupt nicht vor - ansonsten würde ja das Menü im Original überhaupt nicht funktionieren :D
 
countryqt30 hat gesagt.:
aber wieso werden die submenus nicht korrekt angezeigt?
Zum Vergrößern anklicken....
Das hab ich doch schon in meiner ersten Antwort erläutert.

spicelab hat gesagt.:
Lediglich dein vorgestelltes Markup (HTML) für eine verschachtelte Menüstruktur stimmt so mit der Vorlage nicht überein, ist in dieser Form invalide, was in so ziemlich jedem Browser Fehldarstellungen zur Folge hat (Untermenüs werden nicht zunächst versteckt, u.ä.), weil im Stylesheet mit den praxisüblichen CSS-Selektoren für Nachfahren bzgl. der Untermenüebenen keine Übereinstimmung vorherrscht, und so ihre CSS-Regeln nicht interpretiert, auf das HTML-Dokument angewendet, werden.
Zum Vergrößern anklicken....
 
countryqt30 hat gesagt.:
Schön, aber was kann ich jetzt speziell dagegen tuen?
Was machen, damit es korrekt angezeigt wird?
Zum Vergrößern anklicken....

Was hälst du davon, das gelesene Wort in die Tat umzusetzen, also für einen validen HTML-Code zu sorgen, und im Zweifelsfall einfach mal den HTML-Code der störungsfreien Menüvorlage als Vergleich zu deiner Version heranzuziehen?!

Das sollte eigentlich eine der leichtesten Übungen sein ... :rolleyes:

Aus:

HTML: 
    <body>
      ...
      <div id="menu">
        <ul>
          <li><a href="">foo1</a></li>
          <li><a href="">foo2</a></li>
          <li><a href="">foo3</a></li>
            <ul>
              <li><a href="">foo3.1</a></li>
              <li><a href="">foo3.2</a></li>
              <li><a href="">foo3.3</a></li>
            </ul>
          <li><a href="">foo4</a></li>
        </ul>
      </div>
      ...
    </body>

wird:

HTML: 
    <body>
      ...
      <div id="menu">
        <ul>
          <li><a href="">foo1</a></li>
          <li><a href="">foo2</a></li>
          <li><a href="">foo3</a><!-- </li> --> <!-- Der </li>-Tag ist hier zu Beginn des Untermenüs falsch notiert -->
            <ul>
              <li><a href="">foo3.1</a></li>
              <li><a href="">foo3.2</a></li>
              <li><a href="">foo3.3</a></li>
            </ul>
          </li><!-- Hier endet der Hauptmenüpunkt "foo3" -->
          <li><a href="">foo4</a></li>
        </ul>
      </div>
      ...
    </body>


Desweiteren ist die Breitenangabe für das <ul>-Element der obersten Menüebene nicht stimmig mit der Anzahl der darin enthaltenden <li>-Elemente (foo1 - foo4) und derer Breitendefinition, weshalb der letzte Menüpunkt (foo4) in die nächste Zeile umgebrochen wird.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück