CSS-Prioritäten + Ungenaues Positionieren bei Umbrüchen

[Conny]

Guguck ihr,

noch mal zwei Fragen:

1.
Ich habe verschiedene Ebenen, wobei für die Bilder auf der Kopfzeilenebene andere Bedingungen gelten sollen, als für die auf anderen Ebenen. Das kann ich wohl so notieren, wenn ich es richtig verstanden habe:

#Kopfzeile img {}

Ich habe dort unter anderem width und height festgelegt, einzig ein Bild ist etwas größer. Diesem habe ich die Klasse logo zugewiesen und frage mich jetzt, ob die Notation

#Kopfzeile .logo {width:Cpx; height:Dpx;}

in Konflikt geraten kann mit #Kopfzeile img {width:Apx; height:Bpx;} oder ob das eine korrekte Angabe ist.

Mir sind die Prioritäten noch nicht so ganz klar.

2. Frage:
Die oben genannten Bilder, sollen mit jeweils etwas Abstand nebeneinander angeordnet werden. Das funktioniert allerdings nur korrekt, wenn ich im Quellcode alle <img> in eine Zeile hintereinander schreibe. Sobald ich sie der Übersichtlichkeit halber untereinander setze, wird mehr Abstand dazwischen gesetzt. Gibt es einen Trick gegen diese Umbruchproblematik?

Grüße,
Conny

[MudGuard]

Hi,

#Kopfzeile img {}

Also kein style-Attribut, eine id, keine Attribute, ein Element,.
Also a = 0, b = 1, c = 0, d = 1, Spezifizität = 0101

#Kopfzeile .logo {width:Cpx; height:Dpx;}

Also kein style-Attribut, eine id, ein Attribut, kein Element,.
Also a = 0, b = 1, c = 1, d = 0, Spezifizität = 0110

in Konflikt geraten kann mit #Kopfzeile img {width:Apx; height:Bpx;} oder ob das eine korrekte Angabe ist.

Der zweite Selektor hat also eine höhere Spezifizität, die Deklarationen dort haben also Vorrang.

Mir sind die Prioritäten noch nicht so ganz klar.

http://www.w3.org/TR/CSS21/cascade.html#cascade

Die oben genannten Bilder, sollen mit jeweils etwas Abstand nebeneinander angeordnet werden. Das funktioniert allerdings nur korrekt, wenn ich im Quellcode alle <img> in eine Zeile hintereinander schreibe. Sobald ich sie der Übersichtlichkeit halber untereinander setze, wird mehr Abstand dazwischen gesetzt. Gibt es einen Trick gegen diese Umbruchproblematik?

Whitespace sollte Whitespace sein - welcher Browser hat da Probleme?

cu,
Andreas

[Conny]

Hi Andreas,

http://www.w3.org/TR/CSS21/cascade.html#cascade

Danke.

Die oben genannten Bilder, sollen mit jeweils etwas Abstand nebeneinander angeordnet werden. Das funktioniert allerdings nur korrekt, wenn ich im Quellcode alle <img> in eine Zeile hintereinander schreibe. Sobald ich sie der Übersichtlichkeit halber untereinander setze, wird mehr Abstand dazwischen gesetzt. Gibt es einen Trick gegen diese Umbruchproblematik?

Whitespace sollte Whitespace sein

Ja eben. :-)

Wenn ich
<img><img><img><img><img>
hintereinander schreibe, ohne Abstand zu definieren, hängt er sie direkt aneinander, ohne Abstand.

Schreibe ich aber
<img>
<img>
<img>
<img>
<img>
<img>

wird zwischen den einzelnen Bildern ein minnimaler Abstand angezeigt. Was ziemlicher Unsinn ist, wie ich finde. Gibt es da ein Mittel gegen? Ich kann schließlich nicht immer alles  in eine Zeile quetschen, zumindest nicht, wenn ich Überblick behalten will.

• welcher Browser hat da Probleme?

Zumindest Mozilla und IE.

Grüße,
Conny

[Viennamade]

Hallo!

Wenn ich
<img><img><img><img><img>
hintereinander schreibe, ohne Abstand zu definieren, hängt er sie direkt aneinander, ohne Abstand.

Schreibe ich aber
<img>
<img>
<img>
wird zwischen den einzelnen Bildern ein minnimaler Abstand angezeigt. Was ziemlicher Unsinn ist, wie ich finde. Gibt es da ein Mittel gegen?

Du kannst mit float:left arbeiten, dann gibts keine Abstände.

Beste Grüße
Viennamade

[MudGuard]

Hi,

Whitespace sollte Whitespace sein
Ja eben. :-)
Wenn ich
<img><img><img><img><img>
hintereinander schreibe, ohne Abstand zu definieren, hängt er sie direkt aneinander, ohne Abstand.

Klar, KEIN Whitespace ist etwas anderes als Whitespace.

Schreibe ich aber
<img>
<img>
<img>
<img>
<img>
<img>
wird zwischen den einzelnen Bildern ein minnimaler Abstand angezeigt. Was ziemlicher Unsinn ist, wie ich finde.

Nein, wenn whitespace vorhanden ist, wird dieser auf ein einzelnes Leerzeichen normalisiert und dargestellt.

<img> <img> <img> <img> <img>
müßte dasselbe Ergebnis bringen.

Da Du schriebst:

Die oben genannten Bilder, sollen mit jeweils etwas Abstand nebeneinander angeordnet werden.

bin ich davon ausgegangen, daß Du Leerzeichen dazwischen hattest, als Du die img in einer Zeile stehen hattest (woher sollte sonst der Abstand kommen?).

Gibt es da ein Mittel gegen?

Wogegen? Du schreibst erst, daß Du etwas Abstand haben willst, jetzt willst Du keinen Abstand haben?

Ich kann schließlich nicht immer alles  in eine Zeile quetschen, zumindest nicht, wenn ich Überblick behalten will.

Whitespace innerhalb von tags (und außerhalb von Attributwerten wirkt sich in keiner Weise auf die Darstellung aus.

• welcher Browser hat da Probleme?
  Zumindest Mozilla und IE.

Nachdem Du jetzt das "Problem" anders beschrieben hast (KEIN Abstand, weil KEIN Leerzeichen), ist es kein Browserproblem. Die Browser tun das, was der Standard vorgibt. Whitespace zwischen Inline-Elementen wird auf ein Leerzeichen normalisiert und dargestellt (solange nicht white-space:pre oder ähnliches gilt).

Als "Problem" hatte ich gesehen, daß der Abstand größer wird bei Zeilenumbrüchen, aber auch ohne grundsätzlich vorhanden ist - also ging ich von Leerzeichen zwischen den img aus. Wegen Deiner Aussage:

Sobald ich sie der Übersichtlichkeit halber untereinander setze, wird mehr Abstand dazwischen gesetzt.

cu,
Andreas