Abstände zwischen Objekten beim Umbruch

[cdash]

Hallo,

ich wollte mal ein Problem schildern auf das ich bei der Gestaltung von Internetseiten mit CSS in den vergangenen Jahren oft gestossen bin und für das ich bisher keine saubere Lösung / Workaround gefunden habe.

Ich habe eine Anzahl von Objekten (Bilder, divs, whatever) die in einer  Reihe sind und wenn nicht mehr genung Platz ist geht es in der nächsten Reihe weiter.

Der Abstand der Objekte zum äußeren Rand ist kleiner als der Abstand Objekte untereinander (kommt ganz oft vor weil die Objekte z.B. rechts und links mit einer Spalte bündig sind).

Ich habe mal hier ein konkretes Beispiel als Layout (jpg):

Im Markup sieht das bei mir so aus:

  
    <div>  
    	<ul>  
        	<li>1</li>  
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
            <li>5</li>  
            <li>6</li>  
            <li>7</li>  
            <li>8</li>  
            <li>9</li>  
        </ul>  
        <div></div>  
    </div>  

und im CSS:

  
div {  
	background-color: #00FFFF;  
	width: 592px;  
	padding: 20px 2px 2px 2px;  
}  
div div {  
	clear: both;  
	padding: 0px 0px 0px 0px;  
}  
ul {  
	list-style: none;  
	margin: 0px;  
	padding: 0px;  
}  
li {  
	float: left;  
	width: 93px;  
	height: 52px;  
	margin: 6px 6px 0px 0px;  
	background-color:#CCFF00;  
}  

Ich habe das auch mal hier hochgeladen, damit man es sich gleich anschauen kann:
http://demo.analogeins.de/div/list_styling.html

Das Problem ist offensichtlich: das jeweils äußerste Objekte auf der rechten Seite darf rechts keine margin haben. Eigentlich würden alle Objekte in eine Reihe passen. So rutscht es schon in die nächste Reihe.

Wenn ich nur eine Reihe habe, kann ich das mit first-child lösen, aber bei mehr Objekten stehe ich da irgendwie auf dem Schlauch.

Vielen Dank

Andreas

[Marc]

Hallo Andreas,

auch wenn ich keine CSS-Lösung für Dich habe (du wirst wohl mit JavaScript arbeiten müssen, um das hinzukriegen) wundere ich mich über Deinen Wunsch - meiner Meinung nach sieht das nicht gut aus, dass am Rand kein Abstand ist. Hier sollte der gleiche Abstand sein, wie zwischen den Bildern, finde ich. Ich muss ständig Layouts umsetzen, die ich vorgegeben bekomme, aber noch nie hat mir ein Designer so ein Layout vorgegeben...

Von daher fährst Du u. U. mit einer anderen Darstellung besser.

Obwohl mir da gerade eine Idee kommt - benutze doch für den rechten Rand eine Hintergrund-Grafik statt border. - Dann kannst Du von collapsing margins profitieren (nicht getestet) oder die Grafik so erstellen, dass der rechte Rand beliebig weit in das Element wandern kann - sinnvollerweise so weit wie dein margin.

Viele Grüße,
Marc.

[ChrisB]

Hi,

Dann kannst Du von collapsing margins profitieren

Nein - In CSS 2.1, horizontal margins never collapse.

MfG ChrisB

[Gunnar Bittersmann]

@@Marc:

nuqneH

auch wenn ich keine CSS-Lösung für Dich habe (du wirst wohl mit JavaScript arbeiten müssen, um das hinzukriegen)

Vorsicht! Dass du keine CSS-Lösung hast, heißt nicht, dass es keine gibt.

Qapla'

[cdash]

Hallo,

... wundere ich mich über Deinen Wunsch - meiner Meinung nach sieht das nicht gut aus, dass am Rand kein Abstand ist. Hier sollte der gleiche Abstand sein, wie zwischen den Bildern, finde ich. Ich muss ständig Layouts umsetzen, die ich vorgegeben bekomme, aber noch nie hat mir ein Designer so ein Layout vorgegeben...

So was kommt bei mir ständig vor. Wenn ich eine Spalte (vor weiß) habe in der oben Text steht so fängt eine Reihe mit Grafiken darunter natürlich bündig vorne mit dem Text an und endet hinten auch mit dem Text. Trotzdem gibt es zwischen den Grafiken Abstände. ???

aber interessante Antwort ;-)

Danke

Andreas

[ChrisB]

Hi,

li {

margin: 6px 6px 0px 0px;
}

  
Verteile doch erst mal diesen Abstand gleichmäßig auf beiden Seiten -  
`margin: 6px 3px 0px 3px;`{:.language-css}  
  
Dann noch das seitliche padding vom DIV-Element entfernen - und dann dürfte das dem, was du willst, doch schon näher kommen.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[ChrisB]

Nachtrag:

Verteile doch erst mal diesen Abstand gleichmäßig auf beiden Seiten -
margin: 6px 3px 0px 3px;

Das geht natürlich nur dann, wenn die seitlichen Abstände mindestens die Hälfte der „inneren“ Abstände betragen sollen.

Soll es seitlich weniger sein, gäbe es noch eine weitere Möglichkeit - negative seitliche Margins für das UL-Element.

Dein Beispiel mal mit etwas extremeren inneren Abständen (nur die geänderten Styles angegeben):

div { width: 502px; }  
ul { margin: 0 -15px; border-top:5px solid red; }  
li { margin: 6px 20px 0px 20px; }

Der rote border-top für UL macht deutlich, wie die Liste selber damit über die Ränder des DIV-Elements „hinaus gezogen“ wird.
Ob das praktikabel ist, hängt natürlich von den weiteren Gegebenheiten des jeweiligen Layouts ab - bspw., ob sich neben dem ganzen noch weitere Spalten befinden, mit denen sich die Liste dann ggf. in die Quere kommen würde.

MfG ChrisB

[ChrisB]

Und noch'n Gedicht^WNachtrag:

Der rote border-top für UL macht deutlich, wie die Liste selber damit über die Ränder des DIV-Elements „hinaus gezogen“ wird.
Ob das praktikabel ist, hängt natürlich von den weiteren Gegebenheiten des jeweiligen Layouts ab - bspw., ob sich neben dem ganzen noch weitere Spalten befinden, mit denen sich die Liste dann ggf. in die Quere kommen würde.

Dem wiederum kann dann unter günstigen Umständen auch noch mit einem overflow-x:hidden für den DIV-Container entgegengewirkt werden.

MfG ChrisB

[cdash]

Vielen Dank,

Dein Beispiel mal mit etwas extremeren inneren Abständen (nur die geänderten Styles angegeben):

div { width: 502px; }

ul { margin: 0 -15px; border-top:5px solid red; }
li { margin: 6px 20px 0px 20px; }

  
ich habe auch ein bisschen rumprobiert und bin auch auf negative seitliche Margins gekommen. Ich vermute auch, dass es gelegentlich Probleme mit angrenzenden Elementen geben kann - in meinem Fall funktioniert es aber.  
  
Danke  
  
Andreas  
  

[Gunnar Bittersmann]

@@cdash:

nuqneH

</ul>
        <div></div>

Das leere 'div'-Element ist unsinnig. Entferne es und mach dich vertraut, wie man Floats einschließt. Und wie man auf Floats verzichtet.

Qapla'

[cdash]

Vielen Dank,

das kannte ich so nicht.

Da Du mir so einen guten Tipp gegeben hast auch noch ein kleiner Tipp von mir: es sieht oft nach Klugscheißerei aus wenn man zwar auf die gestellte Frage keine Antwort hat aber ungefragt andere Antworten gibt. Soll jetzt nich falsch rüber kommen, bin dir wirklich dankbar für die Links - ist aber grenzwertig formuliert.

Das leere 'div'-Element ist unsinnig ... mach dich vertraut...

Danke

Andreas