CSS - DIV Id/Class Verstänisproblem

[Reto]

Hallo liebes Forum,

da ich mir CSS/PHP/jQuerry autodidaktisch angelesen habe, fehlen mir manchmal die Grundlagen oder "reales" Verständis für Zusammenhänge. So z.B. hier

<div id="toc_container">
<p class="toc_title">Inhaltsverzeichnis</p>
<ul class="toc_list">
<li>irgendetwas</li>
</ul>
</div>

Nun möchte ich das die UL nach rechts verschoben wird, also bei Class ein # davor:

	#toc_list {
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		color: #00285a;
	}

Änderung "keine", klar fehlt ggf. auch noch die Informaiton 'UL' also:

	#toc_list ul{
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		color: #00285a;
	}

Was mache ich falsch?

PS: CSS Inhalte als CSS markiert, aber keine Anzeige als CSS Quelltext!?

[Meowsalot]

Hallo Reto,

eine id wird im css mit # angesprochen. Eine class hingegen mit einem .
Du siehst wo dein Fehler liegt?;)

Auf die class innerhalb von deinem toc_container kannst du eigentlich verzichten.

Bis bald!
Meowsalot (Bernd)

[beatovich]

hallo

Hallo Reto,

eine id wird im css mit # angesprochen. Eine class hingegen mit einem .

oder man kann sie so ansprechen:

nav[id="toc"]{ }
ul[class=toclist] { }

oder da man ja die Liste sowieso nur in der nav anspricht:

nav[id="toc"]{ }
nav[id="toc"] ul { }

Regel: erstelle keine unnötigen IDs! also:

nav.toc { }
nav.toc ul { }

mit dem entsprechenden Markup

<nav class="toc">
  <!-- falls Klappmenu -->
  <button>Menu</button>
  <ul>
  </ul>
</nav>

[Gunnar Bittersmann]

@@beatovich

Regel: erstelle keine unnötigen IDs!

Sagt wer?

Regel: Alles, was einzigartig ist, kann eine ID haben.

LLAP 🖖

[beatovich]

hallo

@@beatovich

Regel: erstelle keine unnötigen IDs!

Sagt wer?

Regel: Alles, was einzigartig ist, kann eine ID haben.

Nicht alles, was eine ID hat, bleibt einzigartig.

Und viele Dinge, die nach html Regeln einzigartig oder falsch sind, brauchen keine ID.

[Reto]

Hallo,

ich glaube mein Fokus war zu weit offen ;-) gemeint war:

<ul class="toc_list">
<li>irgendetwas</li>
</ul>

hier bringt

<style type="text/css">
	#toc_list ul{
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		color: #00285a;
	}
</style>

nichts, keine Änderung obwohl extra als Inline CSS vorher aufgerufen.

[Robert B.]

Moin Reto,

<ul class="toc_list">
<li>irgendetwas</li>
</ul>

hier bringt

<style type="text/css">
	#toc_list ul{
      /* … */
	}
</style>

nichts, keine Änderung obwohl extra als Inline CSS vorher aufgerufen.

Das kann ja auch gar nicht funktionieren.

Viele Grüße
Robert

[beatovich]

hallo

ich glaube mein Fokus war zu weit offen ;-) gemeint war:

<ul class="toc_list">
<li>irgendetwas</li>
</ul>

hier bringt

 <style type="text/css">
 	#toc_list ul{

hier suchst du nach diesem Markup:

<ul id="toc_list">
<li>irgendetwas</li>
</ul>

Während du aber für dein aktuelles Markup diesen Selektor brauchst

.toc_list ul {
 		max-width: 680px;
 		margin-left: auto;
 		margin-right: auto;
 		color: #00285a;
}

[MudGuard]

Hi,

 <style type="text/css">
 	#toc_list ul{

hier suchst du nach diesem Markup:

<ul id="toc_list">
<li>irgendetwas</li>
</ul>

nein, laut CSS müßte das ul Nachfahrenelement des Elements mit der ID toc_list sein. Im HTML ist aber ul selbst das Element mit der ID.

Während du aber für dein aktuelles Markup diesen Selektor brauchst

.toc_list ul {
 		max-width: 680px;
 		margin-left: auto;
 		margin-right: auto;
 		color: #00285a;
}

nein, auch hier müßte das ul Nachfahre des Elements mit der Klasse toc_list sein - es ist aber das ul selbst, das der Klasse angehört.

cu,
Andreas a/k/a MudGuard

[Reto]

Ich glaube ich stehe total auf dem Schlauch. ⚠️

Also ich habe jetzt:

	.toc_list ul {
		max-width: 680px;
		margin-left: auto;
		margin-right: auto;
		color: #00285a;
	}

und

<ul class="toc_list">
<li>

Es erfolgt keine Änderung. Der FF Inspektor zeigt keine Codeänderung (auch nichts durchgestrichenes), in der FF Quelltext ansicht, ist der Code aber vorhanden.

Bahnhof?

[Robert B.]

Moin Reto,

ein kleiner Tipp: In CSS sind

ul .toclist {
    /* … */
}

und

.toclist ul {
    /* … */
}

nicht das Gleiche.

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

und für

<ul class="toc_list">

treffen beide Selektoren nicht in's Schwarze. Außer der Reihenfolge ist auch das Space in CSS signifikant.

.toc_list ul ist ein ul Element, das ein Element mit Klasse .toc_list als Vorfahre hat

ul .toc_list ist ein beliebiges Element mit Klasse .toc_list, das ein ul Element als Vorfahre hat

ul.toc_list ist ein ul Element mit Klasse .toc_list. Und das wird gebraucht.

Rolf

[Tabellenkalk]

Hallo,

Bahnhof?

Gutes Stichwort! Dort nimmst du den Zug zum Wiki und schaust dir dort die Selektoren an, insbesondere die Kombinatoren!

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Dort nimmst du den Zug […] insbesondere die Kombinatoren!

Kombinatoren bei Zügen – du meinst sowas wie die Scharfenberg-Kupplung?

LLAP 🖖

[Meowsalot]

Hallo Reto,

ich glaube mein Fokus war zu weit offen ;-)

hast du meine Antwort gelesen? Und auf type="text/css" kann man im Jahre 2018 auch gut und gerne verzichten ;)

Bis bald!
Meowsalot (Bernd)

[Reto]

Danke Bernd, wurde entfernt.

Reto

[Gunnar Bittersmann]

@@beatovich

Nicht alles, was eine ID hat, bleibt einzigartig.

Das weiß man vorher – bevor man das Markup schreibt. Es sei denn , man hat bei der Inhaltsarchitektur was falsch gemacht. Oder hat die völlig übergangen und einfach drauflos gecodet.

Und viele Dinge, die nach html Regeln einzigartig oder falsch sind, brauchen keine ID.

Ob sich eine ID als nützlich erweist, das weiß man manchmal erst hinterher.

LLAP 🖖

[Tabellenkalk]

Hallo,

da ich mir CSS/PHP/jQuerry autodidaktisch angelesen habe,

Was mache ich falsch?

Da fehlt offenbar die Grundlage HTML!?

PS: CSS Inhalte als CSS markiert, aber keine Anzeige als CSS Quelltext!?

Da fehlen Leerzeilen davor bzw. danach.

Gruß
Kalk

[Gunnar Bittersmann]

@@Reto

`<p class="toc_title">Inhaltsverzeichnis</p>`

Was mache ich falsch?

p ist falsch. Das möchte gern eine Überschrift sein.

PS: CSS Inhalte als CSS markiert, aber keine Anzeige als CSS Quelltext!?

Vor und nach Codeblöcken herum sollten Leerzeilen sein. Ich hab das mal berichtigt.

LLAP 🖖

[beatovich]

hallo

`<p class="toc_title">Inhaltsverzeichnis</p>`

Was mache ich falsch?

p ist falsch. Das möchte gern eine Überschrift sein.

oder eventuell ein <button>Menu</button> für ein Klappmenu

Man weiss es nicht.