div-Formatierung

[Alex]

Ich habe ein Problem, das ich allein nicht lösen kann:

Ich möchte drei Container nebeneinander in einer Reihe anordnen und diese mit den drei neuesten Beiträgen aus einer Datenbank füttern. Alles kein Problem, aber: Ich möchte diesen Kasten nur einmal im Quelltext definieren und dann per PHP mit den drei Einträgen füttern. Zwischen den einzelnen Kästen soll ein Abstand von z. B. 30 Pixeln entstehen. Ich könnte natürlich dem Container einfach ein margin von 15 Pixeln zuweisen, sodass sich der Abstand zwischen Nr. 1 und 2 und Nr. 2 und 3 automatisch auf 30 Pixel summiert, nur hat das den unschönen Effekt, dass dann auch link neben Nr. 1 und rechts neben Nr3. 15 Pixel Abstand entstehen, die ich aber nicht haben möchte.

Kann mir jemand sagen, wie ich dieses Problem am geschicktesten lösen kann?
Vielleicht steh ich auch einfach nur vor einer Denkblockade.

Danke schon einmal!

[Gunnar Bittersmann]

@@Alex:

nuqneH

div:not(:first-child) { margin-left: 30px }

bzw.

div:not(:last-child) { margin-right: 30px }

oder (es soll ja IrgendEinen Browser geben, der weder :last-child noch :not versteht)

div { margin-left: 30px }  
div:first-child { margin-left: 0 }

Qapla'

[Alex]

Hallo Gunnar,

danke für deine schnelle Antwort - aber die Vorschläge zeigen bei mir (im Safari) beide leider keine Wirkung.

#box {width: 250px; margin-left: 28px; display: inline-block; }

#box:first-child {margin-left: 0;}

Woran könnte das liegen? Am display: inline-block?

[Der Martin]

Hallo,

danke für deine schnelle Antwort - aber die Vorschläge zeigen bei mir (im Safari) beide leider keine Wirkung.

#box {width: 250px; margin-left: 28px; display: inline-block; }
#box:first-child {margin-left: 0;}

du willst doch nicht etwa andeuten, dass du mehrere Boxen mit derselben ID ausstattest? Wenn dein Safari da nicht mitspielt, würde ich sogar noch sagen: Gut gemacht!

Woran könnte das liegen? Am display: inline-block?

Sollte es nicht:
"In an inline formatting context, [...] Horizontal margins, borders, and padding are respected between these boxes."

Auch wenn der Ausdruck "horizontal" hier irreführend (IMO falsch) ist - aus dem Kontext geht hervor, dass in Wirklichkeit die vertikalen Kanten, also links und rechts gemeint sind.

So long,
 Martin

[ChrisB]

Hi,

Sollte es nicht:
"In an inline formatting context, [...] Horizontal margins, borders, and padding are respected between these boxes."

Auch wenn der Ausdruck "horizontal" hier irreführend (IMO falsch) ist - aus dem Kontext geht hervor, dass in Wirklichkeit die vertikalen Kanten, also links und rechts gemeint sind.

margin-left und margin-right geben *horizontale* Abstände an.

MfG ChrisB

[Der Martin]

Hallo,

"In an inline formatting context, [...] Horizontal margins, borders, and padding are respected between these boxes."
Auch wenn der Ausdruck "horizontal" hier irreführend (IMO falsch) ist [...]
margin-left und margin-right geben *horizontale* Abstände an.

Abstände, ja. Aber Abstände von einem vertikalen Rand. Ich sehe bei der Betrachtung in erster Linie die vertikal verlaufende Kante (Begrenzung) der Box, die für mich hier den Ausschlag für die Bezeichnung horizontal/vertikal gibt. Intuitiv sehe ich margin und padding auch eher als Streifen, die an der Kante entlang verlaufen. Den Abstand, den sie erzeugen, würde ich nicht zur Festlegung der Orientierung heranziehen.
Spätestens bei border versagt auch dein Erklärungsversuch: Ein border-left mag wohl auch eine horizontale Ausdehnung haben (z.B. 1px), ist aber trotzdem eine vertikale Rahmenlinie.

So long,
 Martin

[ChrisB]

Hi,

margin-left und margin-right geben *horizontale* Abstände an.

Abstände, ja. Aber Abstände von einem vertikalen Rand. Ich sehe bei der Betrachtung in erster Linie die vertikal verlaufende Kante (Begrenzung) der Box, die für mich hier den Ausschlag für die Bezeichnung horizontal/vertikal gibt. Intuitiv sehe ich margin und padding auch eher als Streifen, die an der Kante entlang verlaufen.

Für mich ist das Gegenteil intuitiv.
Wenn die Box einen seitlichen Abstand einhält, dann befindet sich dieser Abstand auf der horizontalen Ebene, und ein Abstand oben oder unten ist in der vertikalen.

Den Abstand, den sie erzeugen, würde ich nicht zur Festlegung der Orientierung heranziehen.

Nur das erscheint mir logisch; deine Sichtweise hingegen nicht.
margin heisst schliesslich margin und nicht „box-outer-stripe“, und ebenso ist padding kein „box-inner-stripe“.

Spätestens bei border versagt auch dein Erklärungsversuch: Ein border-left mag wohl auch eine horizontale Ausdehnung haben (z.B. 1px), ist aber trotzdem eine vertikale Rahmenlinie.

Bei border ist in der Spezifikation m.W. auch nirgends von horizontal oder vertical die Rede.

MfG ChrisB