Formatierung im Grid

[Pit]

Hallo,

ich verstehe nicht, warum im Grid ein Text links steht und ein zufällig ausgewähltes beliebiges Image rechts (oder center?), wenn die css Formatierung identisch ist.

Kanns mir wer erklären?

Pit

[MrMurphy1]

Hallo

Wieso

oder center?

?

Es kann doch nicht so schwer sein Containern Rahmen oder Hintergrundfarben mit auf ihren beschwerlichen Weg zu geben.

Die Ursache liegt wohl im CSS-Grid. Da das Verhalten im Firefox, Chrome und Opera auftritt kann ich deshalb nur vermuten, dass es auch so gewollt ist.

Die einzelnen Container nehmen genau die vom Inhalt vorgegebene Breite ein.

Der Text ist also durch deine CSS-Anweisung eigentlich rechtsbündig. Da der Container aber durch CSS-Grid nur so breit wie der Text ist erscheint er optisch zentriert. Da der Container linksbündig ist wird auch der darin enthaltene Text vermeintlich linksbündig angezeigt.

Gleiches gilt eigentlich auch für das Bild. Allerdings ist die Breite des Bildes mittels CSS auf 30% seiner eigentlichen Breite beschränkt. Hier erhält der umgebende Container wohl die Breite des Bildes bei 100% (= 150px), das Bild wird jedoch innerhalb dieser 150px nur mit 30%-Breite angezeigt, als Inline-Element gleichzeitig rechtsbündig.

Nachtrag: Das scheint auch mit den Prozentangaben zu tun zu haben. Wird dem Bild per CSS eine Breite von 50px zugewiesen ist der umgebende Container auch 50px breit. Wie beim Text wird dann auch das Bild vermeintlich linksbündig angezeigt.

Gruss

MrMurphy

[Pit]

Hallo,

Es kann doch nicht so schwer sein Containern Rahmen oder Hintergrundfarben mit auf ihren beschwerlichen Weg zu geben.

Anscheinend doch.

Die Ursache liegt wohl im CSS-Grid. Da das Verhalten im Firefox, Chrome und Opera auftritt kann ich deshalb nur vermuten, dass es auch so gewollt ist.

Die einzelnen Container nehmen genau die vom Inhalt vorgegebene Breite ein.

Der Text ist also durch deine CSS-Anweisung eigentlich rechtsbündig.

Welche css-Anweisung meinst Du? Ich sehe keine, außer dem rechten Gridcontainer, dem ich so eine Anweisung gegeben hätte.

Da der Container aber durch CSS-Grid nur so breit wie der Text ist erscheint er optisch zentriert. Da der Container linksbündig ist wird auch der darin enthaltene Text vermeintlich linksbündig angezeigt.

Gleiches gilt eigentlich auch für das Bild. Allerdings ist die Breite des Bildes mittels CSS auf 30% seiner eigentlichen Breite beschränkt. Hier erhält der umgebende Container wohl die Breite des Bildes bei 100% (= 150px), das Bild wird jedoch innerhalb dieser 150px nur mit 30%-Breite angezeigt, als Inline-Element gleichzeitig rechtsbündig.

Verstehe ich (bis auf die 100%-Breite des Bildes) nicht.

Nachtrag: Das scheint auch mit den Prozentangaben zu tun zu haben. Wird dem Bild per CSS eine Breite von 50px zugewiesen ist der umgebende Container auch 50px breit. Wie beim Text wird dann auch das Bild vermeintlich linksbündig angezeigt.

Du hast recht. Kannst Du mir noch das "vermeintlich" erklären?

Pit

[MrMurphy1]

Hallo

Welche css-Anweisung meinst Du? Ich sehe keine, außer dem rechten Gridcontainer, dem ich so eine Anweisung gegeben hätte.

Ich sehe dazu folgende CSS-Anweisung:

nav
{
…
	text-align: right;
…
}

Verstehe ich (bis auf die 100%-Breite des Bildes) nicht.

Besser kann ich es leider nicht erklären. Die Auswirkungen habe ich so auch nicht auf dem Zettel gehabt, sondern mir nur durch Ausprobieren erschlossen.

Kannst Du mir noch das "vermeintlich" erklären?

Wenn man sich die Seite anschaut scheint das Bild linksbündig ausgerichtet zu sein. In Wirklichkeit ist es aber (innerhalb seines Containers) rechtsbündig ausgerichtet. Deshalb scheint es nur vermeintlich linksbündig zu sein.

Gruss

MrMurphy

[Pit]

Hallo MrMurphy,

Ich sehe dazu folgende CSS-Anweisung:

nav
{
…
	text-align: right;
…
}

Danke für den Hiweis. Klar, dieses Überbleibsel ist jetzt durch das Grid unnötig geworden. Und nach dem Entfernen läuft dann der Rest auch wie erwartet.

Kannst Du mir noch das "vermeintlich" erklären?

Wenn man sich die Seite anschaut scheint das Bild linksbündig ausgerichtet zu sein. In Wirklichkeit ist es aber (innerhalb seines Containers) rechtsbündig ausgerichtet. Deshalb scheint es nur vermeintlich linksbündig zu sein.

Verstehe. Vielen Dank für Deine Hilfe!

Pit

[Rolf B]

Hallo Pit,

es ist ein verbreiteter Irrtum, dass CSS und C++ ähnliche Kommentierungstechniken hätten.

Guckst Du hier: https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS#Kommentare

Ich habe dazu auch gleich einen Abschnitt in "Typische Fehlerquellen" eingefügt.

// ist in CSS kein „Kommentar bis zum Zeilenende“, sondern etwas undefiniertes und verhindert die Interpretation des "nächsten Konstrukts". Die Quirks in deinem CSS erklären sich dadurch.

Schreibt man:

.foo {
   width: 1000%; // Be really wiiide
   height: 47%;
   color: blue;
}

Dann wird die height-Eigenschaft unwirksam sein. color:blue greift wieder.

Und im folgenden Konstrukt bleibt die ganze Regel unwirksam:

// My nifty CSS rule
.foo {
   width: 1000%;
   height: 47%;
   color: blue;
}

Rolf

[Pit]

Schreibt man:

.foo {
   width: 1000%; // Be really wiiide
   height: 47%;
   color: blue;
}

Dann wird die height-Eigenschaft unwirksam sein. color:blue greift wieder.

Und im folgenden Konstrukt bleibt die ganze Regel unwirksam:

// My nifty CSS rule
.foo {
   width: 1000%;
   height: 47%;
   color: blue;
}

Autsch… Danke für den Hinweis, Rolf!

Pit

[Gunnar Bittersmann]

@@Rolf B

Schreibt man:

.foo {
   width: 1000%; // Be really wiiide
   height: 47%;
   color: blue;
}

dann macht der Sass-Compiler daraus

.foo {
   width: 1000%;
   height: 47%;
   color: blue;
}

😜

LLAP 🖖