text-align Problem.

[Simon Teidt]

Hallo,

ich habe folgendes Problem und bekomme es nicht gelöst:

Bei mir auf der Seite was in den gelben Kästen steht habe ich mit text-align: center; in die Mitte gesetzt. Nun möchte ich die Links die unter den Kästen sind links am Rand von dem roten Kasten positionieren und mit text-align: left; funktioniert das nicht. Wenn ich text-align: left; bei den gelben Kästen mache geht es aber bei dem gelben Kasten.

<aside id="ligenlinks"> 
	<div id="ligen"> Ligen
	</div>
	<div class="alleligen">
	    <ul>
                 <li><a href="liga1.html">Liga 1</a> </li>
	         <li><a href="liga2.html">Liga 2</a> </li>
	         <li><a href="liga3.html">Liga 3 </a>  </li>
	    </ul>
	</div>

</aside>

#ligenlinks		{
		margin-top: 10px;
		width: 150px;
		height: 2000px;
		text-align: left;
		background-color: #ff0000;
		float: left;
		
}

#ligen			{
		height: 20px;
		width: 140px;
		background-color: #ffff00;
		border: 5px solid black;
		text-align: center;
	
		
		
	
}

.alleligen		{
		text-align: left;
		font-size: 18px;
		
		
		
}




Ihr müsst wissen ich arbeite seit zwei wochen mit html, deswegen nicht wundern falls es nur ein ganz simpler Fehler ist.

Mit freundlichen Grüßen Simon. :)

[Gunnar Bittersmann]

@@Simon Teidt

Du hast zwar mit li { list-style-type: none } die Bullets entfernt^[1], damit wird aber immer noch der Platz dafür freigehalten. Der kommt von einer Regel im browserinternen Stylesheet – im Firefox ist es ul { padding-left: 40px }, in Chrome ist es ul { -webkit-padding-start: 40px }. Beides kannst du in deinem Stylesheet mit ul { padding-left: 0 } überschreiben.^[2]

Andere Browser könnten den Abstand aber vielleicht auch mit li { margin-left: 40px } erzeugen, sodass du das ggfs. auch nullen musst.^[3]

a:focus { color: red } ist gar keine gute Idee, wenn der Hintergrund rot ist. Dadurch wird der jeweils fokussierte Link bei Tastaturnavigation unsichtbar.

LLAP 🖖

---

1. Statt für jedes li kannst du das auch für ul angeben. Das würde ich aber nicht für alle Listen tun, sondern nur spezifisch für jene, wo die Bullets weg sollen, bspw. nav ul, #ligenlinks ul { list-style-type: none } oder kurz nav ul, #ligenlinks ul { list-style: none } ↩︎

2. Auch hier: nur für diejenigen Listen angeben, wo der Abstand weg soll. Also für dieselben, wo du die Bullets entfernst. ↩︎

3. Dito. Also bspw. nav li, #ligenlinks li { margin-left: 0} ↩︎

[Simon Teidt]

Danke. Hat geklappt! Das mit den Hintergrundfarben ist für mich nur ne Hilfe und soll noch nicht das Enddesign sein. Kann mir das dadurch besser vorstellen, muss das ja erstmal alles lernen 😂.

Gruß Simon!

[Auge]

Hallo

Bei mir auf der Seite was in den gelben Kästen steht habe ich mit text-align: center; in die Mitte gesetzt. Nun möchte ich die Links die unter den Kästen sind links am Rand von dem roten Kasten positionieren und mit text-align: left; funktioniert das nicht.

<aside id="ligenlinks"> 
	<div id="ligen"> Ligen
	</div>
	<div class="alleligen">
	    <ul>
               <li><a href="liga1.html">Liga 1</a> </li>
	         <li><a href="liga2.html">Liga 2</a> </li>
	         <li><a href="liga3.html">Liga 3 </a>  </li>
	    </ul>
	</div>
</aside>

#ligenlinks		{
		text-align: left;
}

.alleligen		{
		text-align: left;
}

So funktioniert das natürlich und die Angabe von text-align: left; ist hier für .alleligen überflüssig. Wenn du aber, was deine Eingangsbveschreibung vermuten lässt, #ligenlinks { text-align: center; } angibst, wirkt .alleligen { text-align: left; } nicht. Das liegt an der Spezifität der Selektoren. Der ID-Selektor ist spezifischer als der Klassenselektor und seine Regeln überstimmen die für den Klassenselektor angegebenen Regeln.

Du kannst dem auf mehreren Wegen beimkommen.

1. Du erhöhst die Spezifität des Selektors, mit dem du .alleligen formatieren willst. Das geht mit der zusätzlichen Angabe der ID des Elternelements #ligenlinks .alleligen (höhere Spezifität von #id .klasse gegenüber den zu überschreibenden Regeln für #id). Solltest du aber die Klasse .alleligen noch außerhalb von #ligenlinks benutzen, wirkt der hier notierte Regelsatz dort nicht. Zudem bläht sich das CSS bei ausgiebiger Benutzung des Ansatzes auf.
2. Für diesen Fall überlegenswert wäre, für „alle Ligen“ eine ID statt der Klasse zu benutzen. Der Name .alleligen („alle Ligen“) lässt mich vermuten, dass es im HTML-Dokument ein Element für diese Zusammenfassung gibt. Wenn das so sein sollte, würde die Verwendung einer ID #alleligen dazu führen, dass die dafür notierten Regeln die für #ligenlinks überschreiben, wenn die Regeln für #alleligen nach denen für #ligenlinks notiert sind (gleiche Spezifität, die Reihenfolge der Notation entscheidet).

Tschö, Auge

[Simon Teidt]

Dadurch das es nicht geklappt hatte, habe ich text-align gefühlt überall reinkopiert gehabt um zu schauen ob es klappt 😂. Habe das jetzt geändert und funktioniert jetzt. Muss mir das mit den Klassen und ID`s noch mal genauer anschauen und verstehen. Mache das anscheinend so wie du sagst viel zu umständlich.

Gruß Simon!