✔ Welche Methode ist die bessere?

A

Alice

Erfahrenes Mitglied
Hallo.

Ich stehe vor der Frage welche der beiden Varianten besser ist.

1. Methode:

HTML: 
         <div id="Menu">
            <ul>
               <li><a href="./index.php">Home</a></li>
               <li>
                  <a href="./index.php">Wiki</a>
                  <ul>
                     <li><a href="./index.php">Neu</a></li>
                     <li><a href="./index.php">bearbeiten</a></li>
                     <li><a href="./index.php">löschen</a></li>
                  </ul>
               </li>
               <li><a href="./index.php">Impressum</a></li>
            </ul>
         </div>
      </div>

CSS: 
#Menu {...}
#Menu > ul {...}
#Menu > ul > li {...}
#Menu > ul > li a:link,
#Menu > ul > li a:visited,
#Menu > ul > li a:active,
#Menu > ul > li a:focus {...}
#Menu > ul > li a:hover {...}
#Menu > ul > li > ul {...}
#Menu > ul > li > ul > li {...}
#Menu > ul > li > ul > li:hover {...}
#Menu > ul > li > ul > li a:link,
#Menu > ul > li > ul > li a:visited,
#Menu > ul > li > ul > li a:active,
#Menu > ul > li > ul > li a:focus {...}
#Menue > ul > li > ul > li a:hover {...}
#Menu li:hover ul {...}

2. Methode:

Bei der 2. Variante würde ich halt jedem Element ein CSS zuweisen.

Beispiel:

HTML: 
         <div id="Menu">
            <ul id="Menu_UL">
               <li class="Menu_LI"><a href="./index.php">Home</a></li>
               <li class="Menu_LI>
               ...
               ...
               ...

Wie würdet es ihr machen und warum? Was ist "besser"?
 
Zuletzt bearbeitet:
Definitiv die erste Variante, weil deutlich weniger Zeichen(-anzahl/-länge) im HTML und CSS :)

Sofern die Elemente der Submenüebene dieselbe Formatierung wie die der Hauptmenüebene erhalten sollen, würde ich anstelle des Kind-Selektors den Nachfahren-Selektor nutzen, womit diese Zeilen entfallen:

CSS: 
#Menu > ul > li > ul {...}
#Menu > ul > li > ul > li {...}
#Menu > ul > li > ul > li a:link,
#Menu > ul > li > ul > li a:visited,
#Menu > ul > li > ul > li a:active,
#Menu > ul > li > ul > li a:focus {...}
#Menu > ul > li > ul > li a:hover {...}

Das abgespeckte CSS lautet dann so:

CSS: 
#Menu {...}
#Menu ul {...}
#Menu ul li {...}
#Menu ul li a:link,
#Menu ul li a:visited,
#Menu ul li a:active,
#Menu ul li a:focus {...}
#Menu ul li a:hover {...}
#Menu li:hover ul {...}
 
Zuletzt bearbeitet:
Mein Problem ist daran das ältere Browser (z.B. IE) diese "Technik" wohl nicht beherrschen.

Die 2. Ebene hat eine ganz andere Formatierung. Daher hatte ich mich für diesen Selektor entschieden.
 
Zuletzt bearbeitet:
Alice hat gesagt.:
Mein Problem ist daran das ältere Browser (z.B. IE) diese "Technik" wohl nicht beherrschen.
Zum Vergrößern anklicken....
Von den übrigen Browsern (Firefox, Opera, Safari, usw.) ist mir dahingehend nichts bekannt.

Der Nachfahren-Selektor wird von allen IE-Versionen interpretiert, der Kind-Selektor seit IE7.

Aktuell ist Version 11 ;)

Wenn tatsächlich noch seine Vorgänger (IE5 / IE6) berücksichtigt werden sollen, wäre hier ie7-js das Hilfsmittel.


Edit:

Alice hat gesagt.:
Die 2. Ebene hat eine ganz andere Formatierung. Daher hatte ich mich für diesen Selektor entschieden.
Zum Vergrößern anklicken....
Dies lässt sich aber auch genauso mit dem Nachfahren-Selektor realisieren:

CSS: 
#Menu {...}
/* Hauptmenüebene */
#Menu ul {...}
#Menu ul li {...}
#Menu ul li a:link,
#Menu ul li a:visited,
#Menu ul li a:active,
#Menu ul li a:focus {...}
#Menu ul li a:hover {...}
/* Submenüebene */
#Menu ul li ul {...}
#Menu ul li ul li {...}
#Menu ul li ul li:hover {...}
#Menu ul li ul li a:link,
#Menu ul li ul li a:visited,
#Menu ul li ul li a:active,
#Menu ul li ul li a:focus {...}
#Menu ul li ul li a:hover {...}
 
Zuletzt bearbeitet:
Ich bin daran (Nachfahren-Selektor) gescheitert. Ich probiere es aber noch einmal aus.

Vielen Dank!

Ich melde mich noch einmal.

Edit:

Wäre es eigentlich empfehlenswert diese Methode - so weit wie möglich - auf die ganze Webseite (in meinem Fall ein Forum) anzuwenden?
 
Zuletzt bearbeitet:
Ich habe es eben noch einmal probiert und es geht leider nicht.

Bei "#Menu ul li ul li" wird das CSS von "#Menu ul li" mitgeladen.

Edit:

Aus irgend einem Grund erbt "#Menu ul li ul li" alles mögliche "darüber".
 
Zuletzt bearbeitet:
Link leider nicht, weil es für die Öffentlichkeit noch nicht Zugänglich ist.

CSS: 
#Menu
{
	width: 100%;
	height: 30px;
	position: relative;
	background-image: url("nav-bg.png");
	background-repeat: repeat-x;
	background-position: 0 0;
	background-color: #FFFFFF;
}

#Menu ul
{
	list-style: none;
	padding: 0px 0px 0px 12px;
	margin: 0px 0px 0px 0px;
}

#Menu ul li
{
	float: left;
	display: block;
	height: 30px;
	padding: 0px 8px 0px 8px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	position: relative;
	background-image: url("nav_separator.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: rgba(0, 0, 0, 0);
	color: #FFFFFF;
	font: 9pt 'Open Sans';
	font-weight: 600;
	line-height: 28px;
}

#Menu ul li a:link,
#Menu ul li a:visited,
#Menu ul li a:active,
#Menu ul li a:focus
{
	color: #FFFFFF;
	text-decoration: none;
	font: 9pt 'Open Sans';
	font-weight: 600;
}

#Menu ul li a:hover
{
	color: #E1E1E1;
	text-decoration: none;
	font: 9pt 'Open Sans';
	font-weight: 600;
}

#Menu ul li ul
{
	display: none;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style: none;
	z-index: 9999;
}

#Menu ul li ul li
{
	min-width: 200px;
	display: block;
	padding: 2px 5px 2px 5px;
	margin: 0px 0px 0px 0px;
	text-align: left;
	border-left: 1px solid #1D3B57;
	border-right: 1px solid #1D3B57;
	border-bottom: 1px solid #1D3B57;
	background-color: #FFFFFF;
}

#Menu ul li ul li:hover
{
	background-color: #DEDEDE;
}

#Menu ul li ul li a:link,
#Menu ul li ul li a:visited,
#Menu ul li ul li a:active,
#Menu ul li ul li a:focus
{
	color: #000000;
	text-decoration: none;
	font: 9pt 'Open Sans';
	font-weight: 600;
}

#Menu ul li ul li a:hover
{
	color: #000000;
	text-decoration: none;
	font: 9pt 'Open Sans';
	font-weight: 600;
}

#Menu li:hover ul
{
	display: block;
	position: absolute;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück