Ich seh den Code vor lauter Tags nicht mehr

Jamida · 20. Februar 2014

Hallo zusammen,
ich bastel mir grad ein Joomla-Template und stoße grad auf ein kleines Problem.
Eigenltich ist das Thema ja Kindergarten, aber ich schein irgendwo einen Denkfehler zu haben, oder den Code vor lauter Tags nciht mehr zu sehen.

Hier mal der Teil in HTML5:

Code

<body>




     	<div id="wrapper-main">




/* Headerbereich */




             	<div id="wrapper-content">
                     	<section id="sidebar">
                             	<header>
                                     	<h3>Hauptmen&uuml;</h3>
                             	</header>
                             	<nav id="menu_left">




                                     	<ul class="menu">
                                             	<li><a href="#" title="Link 1">Link 1</a></li>
                                             	<li><a href="#" title="Link 2">Link 2</a></li>
/* weitere Links */
                                     	</ul>




                             	</nav>
                     	</section>




                     	<article id="content">content</article>




                     	<nav id="menu_right">




                             	<ul class="menu">Shopmen&uuml;
                                     	<li><a href="#" title="Link1">Link1</a></li>
                                     	<li><a href="#" title="Link2">Link2</a></li>
/* weitere Links */
                                     	<ul class="submenu_shop">
                                     	<li><a href="#" title="Link1">Link1</a></li>
                                      	<li><a href="#" title="Link2">Link2</a></li>
/* weitere Links */
                                     	</ul>
                             	</ul>




                     	</nav>
             	</div>




             	<footer>footer</footer>
     	</div>




</body>

Alles anzeigen

Im Endefekt soll ein Contentbereich angezeigt werden in dem Links und rechts zwei Menüs angezeigt werden, die von der Formatierung gleich sind (aber von den Verweisen natürlich nicht ;))
Dazwischen ist ein "article" für den Content.

Das klappt auch gut. Nur habe ich das Problem, dass ich die Links nicht formatiert bekomme.
Ich hab schon einige Varianten von selektoren ausprobiert, aber bei keiner dieser passiert was.

Hier ein paar meiner Selektoren-Versuche:

Code

#menu_left .menu ul{
     	list-style-type: none;
     	width: 220px;
}

Code

#menu_left .menu{
     	list-style-type: none;
     	width: 220px;
}

Code

.menu{
     	list-style-type: none;
     	width: 220px;
}

Vielleicht könnt ihr mir ja helfen. Sollte ja eigentlich nicht so schwer sein, aber manchmal sieht man den Fehler leider selber nicht

Liebe Grüße

Nine

The Scout · 21. Februar 2014

Guck mal hier: Aufgeräumter Beispiel Code, und das Ergebnis in Gross
Ich habe deinen Code genommen und ein wenig verändert, zudem ist CSS mit ganz grundlegenden Spielereien dabei um zu zeigen, wie man im DOM die Dinge anspricht.
Natuerlich ist das jetzt nicht optimal, aber es soll auch erstmal aufzeigen, wie man sich durch das HTML hangelt ...

Ich hoffe, das hilft dir weiter

Az. · 21. Februar 2014

Guter Punkt mit dem HTML, ich hätte aber noch aside und main-Elemente genutzt.
Die Frage zur CSS-Architektur ist aber auch nicht zu unterschätzen, leider neigen sehr viele zur Überspezifikation.

Da Browser Selektorketten von rechts nach links lesen ist es möglichst wichtig,
auch um für schnellere CSS-Dateien zu sorgen, die so kurz und präzise wie möglich zu halten.
Ein Beispiel:

CSS

ul#main-navigation ul a { ... }

Für den menschlichen Verstand ist es wohlmöglich logisch hier wie folgt vorzugehen:
Suche ein ul mit ID 'main-navigation' ->
-> Suche eine verschachtelte Liste ->
-> Suche verschachtelte a-Elemente ->
-> OK, nun die Eigenschaften und Werte

Für Browser ist es jedoch wichtig, möglichst schnell auszumachen wann eine Regel nicht zutrifft.
Je mehr ein Browser arbeiten muss um die Informationen zu verarbeiten und zu rendern,
desto länger dauert es bis ein Resultat zu sehen ist - und das will keiner.

Wenn also mit dem Selektor ganz rechts begonnen wird, besteht eine direkte Übereinstimmung mit dem "Ziel-Selektor"
und dem vorliegenden HTML-Element. Der Browser sucht also erst alle a-Elemente, dann filtert er die a-Elemente welche in ul-Tags liegen, ... usw.

Kurz: Die Wahrscheinlichkeit dass eine Regel nicht zutrifft ist deutlich höher, wenn vom Ziel-Selektor ausgegangen wird um nach einem möglichen Elternelement zu filtern.
Vorteilhaft wäre es also für die verschachtelte Liste eine Klasse anzulegen um die Selektorkette zu kürzen - zum Beispiel so:

CSS

.sub a

Um zurück auf deine Frage zu kommen ...
Du solltest CSS-Regeln so abstrakt wie möglich halten, sodass du sie auch wiederverwenden kannst wenn es nötig ist.
Wenn du mehrere Navigationselemente gleich gestalten willst macht es Sinn, lediglich '.menu a' zu nutzen (du willst ja die Links bearbeiten).
Wenn du dann Werte dieser Klasse überschreiben willst kannst du veschachteln sodass die Regeln nur auf die gewünschte Navigation zutreffen z. B. '.main-header .menu a'

Um zu überschreiben muss die neue Regel aber unterhalb der Originalregel stehen.

Hier noch meine 4 persönlichen Merkpunkte zur CSS-Architektur:

Zitat

berechenbar heißt, die CSS-Regeln verhalten sich so wie es vom Autor erwartet wird.
Wenn eine Eigenschaft geändert wird, sollten keine ungewollte Auswirkungen auf andere Elemente entstehen.

wiederverwertbar heißt, die CSS-Regeln sind so abstrakt und abgekoppelt wie möglich, sodass neue Komponenten rasch
mit diesen Regeln verknüpft werden können ohne dass ganz neue Regeln eingerichtet werden müssen.

wartbar heißt, wenn HTML-Elemente in der Struktur verschoben oder verändert werden, treten keine aufwändige Arbeiten innerhalb der CSS-Datei auf.
Das Hinzufügen oder Verschieben eines HTML-Elements-X sollte ein Element-Y nicht "beschädigen".

skalierbar: Das Projekt gewinnt an Größe und erfordert plötzlich mehrere Entwickler welche es warten.
Skalierbar heißt, das Projekt kann ohne umständliches Einarbeiten von einer oder mehreren anderen Personen gewartet werden.

Alles anzeigen

The Scout · 21. Februar 2014

@Az.: Stimmt natuerlich alles, mein Beispiel sollte auch eher aufzeigen, WIE man die Dinge richtig verschachtelt und jetzt nicht direkt so abstrakt wie moeglich sein.
Denn ich habe die Erfahrung gemacht, dass es (fuer mich) einfacher ist, von konkret zu abstrakt zu lernen

Az. · 21. Februar 2014

@TheScout: Gegen dein HTML habe ich nichts
Ich zeige gerne die Best Practice Varianten einer Lösung auf, da müsst ihr jetzt durch.

The Scout · 21. Februar 2014

Ich rede auch nicht vom HTML
Nur ist es leichter, finde ich, wenn man erst versteht, wie man die CSS Selektoren nacheinander anreiht, um sich durch das DOM zu hangeln, um danach dann zu abstrahieren. War bei mir zumindest so

Jamida · 22. Februar 2014

Hallo ihr beiden.
Danke für die netten Antworten.
Ich habe meinen Code auch mal entsprechend des Vorschlags von The Scout umgebaut.
Doch leider klappt es immernoch nicht.
Ich steh wahrscheinlich grad nur auf dem Schlauch -.-

Ich habs auch mal, so wie ich es im Moment habe, ins JSFiddle geladen.

Welpenhilfe

Liebe Grüße

wolf · 23. Februar 2014

Hi, ich habe mal ein bischen drübergearbeitet..
Fertige Seite
Der Code

hier der code:

HTML

<body>
<!--<div id="wrapper-main">-->
	<section>
		<header id="headbereich">
			<div id="logo"></div>
			<div class="left header_top" id="bg_left"></div>
			<div class="left header_top" id="slider"></div>
			<div class="left header_top" id="bg_right"></div>
			<div class="stop"></div>
		</header>
		<!--<div id="wrapper-content">-->
		<nav id="menu_left" class="left">
			<strong>Hauptmen&uuml;</strong>
			<ul>
				<a href="#" title="Link1"><li>Link1</li></a>
				<a href="#" title="Link2"><li>Link2</li></a>
				<a href="#" title="Link3"><li>Link3</li></a>
				<a href="#" title="Link4"><li>Link4</li></a>
				<a href="#" title="Link5"><li>Link5</li></a>
				<a href="#" title="Link6"><li>Link6</li></a>
				<a href="#" title="Link7"><li>Link7</li></a>
			</ul>
		</nav>	
		<article class="left">
			<h1>Textfeld</h1>
			<h2>Aktikeltext</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
				montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
				aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
				Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
				ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
				Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem
				neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis
				faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat,
				leo eget bibendum sodales, augue velit cursus nunc,
			 </p>
		</article>
		<nav id="menu_right" class="left">
			<strong>Shopmen&uuml;</strong>
			<ul>
				<a href="#" title="Link8"><li>Link8</li></a>
				<a href="#" title="Link9"><li>Link9</li></a>
				<a href="#" title="Link10"><li>Link10</li></a>
				<a href="#" title="Link11"><li>Link11</li></a>
				<a href="#" title="Link12"><li>Link12</li></a>
				<a href="#" title="Link13"><li>Link13</li></a>
				<a href="#" title="Link14"><li>Link14</li></a>
			</ul>
		</nav>
		<div class="stop"></div>
		<!--</div>-->
		<footer>footer</footer>
	</section>
<!--</div>-->
</body>

Alles anzeigen

CSS

/** Allg. Style **/
*{
	margin: 0px;
	padding: 0px;
}
html, body{
	background: #000;
}




body{
	font-family: 'PT Serif Caption', serif;
	font-size: 12px;
	color: #FFFFFF;
}
.stop{/*klasse zum stoppen von floats*/
	clear: both;
}
.left{
	float: left;
}
/** Text-Style **/
h1 {
	font-size: 24px;
	font-weight: 400;
}
h2 {
	font-size: 18px;
	font-weight: 400italic;
}
p{
	margin-top: 20px;
	width: 580px;
}
/** Style */
section{
	width: 1050px;
	margin: auto;
	margin-top: 20px;
}
#logo{
	height: 117px;
	background-color: #ccc;
	background-image: url(../images/logo.jpg);
}
.header_top{
	height: 248px;
}
#bg_left{
	width: 220px;
	background-color: #363636;
	background-image: url(../images/bg_2.jpg);
}
#slider{
	width: 610px;
	background-color: #490000;
	background-image: url(../images/platzhalter.jpg);
}
#bg_right{
	width: 220px;
	background-color: #363636;
	background-image: url(../images/bg_1.jpg);
}
nav{
	padding-top: 5px;
	width: 220px;
	background-color: #888888;
	text-align: center;
}
nav a{
	text-decoration: none;
}
ul{
	list-style-type: none;
	margin-top: 5px;
}
ul li{
	background-color: #555555;
	border-bottom: 1px solid #888888;
	padding-top: 3px;
	padding-bottom: 3px;
}
article{
	width: 610px;
	padding: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;
}
footer{
	text-align: center;
	background-color: rgba(255,255,255,0.5);
	border-radius: 5px;
	height: 20px;
	line-height: 20px;
	margin-top: 20px;
	color: #000000;
}

Alles anzeigen

Ich hoffe es hilft dir

EDIT: ..noch ein Tip, ich würde von den festen Breiten mich loslösen ..! nicht jeder hat ein 1050px breites Display und horizontal scrollen ist nervig!

CSS

section{
   width: 90%;
   min-width: 700px;
   max-width: 2000px;
}

Jamida · 23. Februar 2014

Hallo,

dankeeuch für die liebe Hilfe
Ein guter Freund von mir ist Mediengestalter und wurde auch gezwungen mal zu schauen
Er hat meinen Fehler gefunden. Jetzt klappt es. ( "]" statt "}" -.-)
Eure Tips schaue ich mir aber natürlich auch alle mal an

Liebe Grüße

Nine

Ich seh den Code vor lauter Tags nicht mehr

Jetzt mitmachen!

Teilen