Gleiche Abstände zwischen Boxen?

Shepstar · #1 (**permalink**) 28.07.2006, 18:50

Vielleicht hat wer von euch eine Lösung.
Also ich hab 9 Boxen die dynamisch fortlaufend sein sollen und 3 Reihen a 3 Boxen sein sollen. Mein Problem ist das es im komplett im CSS sein soll und ich bei den Abständen ein Problem hab. Folgendes Beispiel hab ich mal schnell gemacht: http://www.sheppard.de/stuff/test.html
(im Beispiel nur 3 anstatt den 9 Boxen)

Die ganz linke Box sollte mit dem roten Rand abschliessen und die ganz rechte auch und dazwischen soll ein gleichmäßiger Rand sein.

Folgende Varianten funktioniert nicht:
Variante 1
mit "margin-left:10px" geht nicht weil dann der rechte Rand nicht gleichmässig abschließt.

Variante 2
mit "margin-right:10px" geht nicht weil dann der linke Rand nicht gleichmässig abschließt.

Variante 3
mit "margin-right:5px; margin-left:5px" geht nicht weil dann der linke und rechte Rand nicht gleichmässig abschließen.

Variante 4
zwei Stylesheets verwenden damit immer die ganz linken ein anderes verwenden geht auch nicht weil die neuen Boxen dynamisch hintereinander generiert werden.

Weiß jemand eine Lösung wie man im CSS sagen kann das er die 3 Boxen auf die Breite so verteilt das der Abstand zwischen den Boxen gleichmässig ist?

heiko_rs · #2 (**permalink**) 28.07.2006, 19:10

margin-left: 10px; geht, .page ist mit 330px einfach nur zu schmal. 3mal 100px plus 4 Außenabstände á 10px sind 340px.

In IE 6 und kleiner kommt dann noch der Double-Float-Margin-Bug, den man durch display: inline; für die floatenden divs behebt. Übrigens brauchen diese keine Klasse, sondern können über .page div angesprochen werden.

Shepstar · #3 (**permalink**) 28.07.2006, 21:11

Hallo, vielleicht hab ich das Problem nicht ganz deutlich beschrieben. Ich möchte gerne das die drei Boxen (bzw. am Ende sollte es bei drei umbrechen und in der nächsten Zeile weitergehen damit insg. 9 entstehen) links und rechts ganz am Rand sind und gleicher Abstand zwischen Box 1 und Box 2 sowie Box 2 und Box 3 ist. Die Box 1 sollte ganz links am roten Rand sein und Box 3 ganz rechts am roten Rand sein.
Wichtig ist auch ich möchte "wenn möglich" nur ein Tag für alle 3 Boxen verwenden da diese dann ja dynamisch generiert werden das heißt alle 9 Boxen werden angezeigt und sollen nach 3 umbrechen.

Ich hoffe es ist jetzt etwas verständlicher ausgedrückt ich bräuchte also die Möglichkeit für einen CSS Tag der nur für die Abstände in der Mitte zwischen den Boxen einer Reihe zuständig ist bzw. diese darin gleichmässig verteilt und keinen Abstand links und rechts hinzufügt. Dennoch sollte dies mit nur einem Tag gemacht werden.
Ist natürlich möglich das ich mir was unmögliches vorstelle

, wollte nur wissen ob dies möglich ist.

heiko_rs · #4 (**permalink**) 28.07.2006, 22:00

Alles klar, das hatte ich falsch verstanden. Da fällt mir leider nur eine Lösung über eine zusätzliche Klasse ein, die Dir aber wohl nichts nützen wird. Die zusätzliche Klasse setzt dem jeweils letzten div in der Reihe den Abstand nach rechts wieder auf Null:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"><title>Test</title>
	<style type="text/css" media="screen"><!--

body {
	background-color: #fff;
	}

.page {
	padding-top: 10px;
	padding-bottom: 10px;
	width: 320px;
	height: 110px;
	border: solid 1px #c00;
	}

.page div {
	background-color: #ccc;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 100px;
	height: 100px;
	float:left;
	}

.page .right {
	margin-right: 0;
	}

--></style>
</head>

<body>

	<div class="page">
		<div>box 1</div>
		<div>box 2</div>
		<div class="right">box 3</div>
	</div>

</body>

</html>

fricca · #5 (**permalink**) 28.07.2006, 22:19

Vielleicht irgendwie so (wenig elegant)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    
    <title>xxx</title>
        
    <style type="text/css">
        .page   { 
            padding-top:10px;
            width: 330px; 
            border: solid 1px #c00;
            overflow:hidden;
            }

        .inner {
            width:345px;
            }

        .box { 
            background-color: #ccc; 
            width: 100px; 
            height: 100px; 
            float: left;
            margin:0 15px 10px 0;
            }

    </style>
</head>

<body>
	<div class="page">
		<div class="inner">
			<div class="box">box 1</div>
			<div class="box">box 2</div>
			<div class="box">box 3</div>
			<div class="box">box 4</div>
			<div class="box">box 5</div>
			<div class="box">box 6</div>
			<div class="box">box 7</div>
			<div class="box">box 8</div>
			<div class="box">box 9</div>
		</div>
	</div>
</body>

</html>

heiko_rs · #6 (**permalink**) 29.07.2006, 03:37

Superidee. An overflow hatte ich auch gedacht, aber nicht an das innere div, das den overflow "darstellt".

EDIT: Ups, der "Daumen runter" ist natürlich völlig fehl am Platze, der hat sich beim Tabben eingeschlichen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit display:table-cell in Safari... ungewollte Abstände zwischen Zellen	awa	CSS	5	16.02.2018 06:11
Abstände zwischen Untermenüpunkten in der Navi	Tengu	CSS	2	03.10.2009 09:42
Internet Explorer macht Abstände zwischen Bilder, wo keine hinsollen...	fuhrheiner	CSS	8	24.08.2006 16:55
Liste und Abstände zwischen li	almighty7	CSS	3	30.05.2006 17:55
Boxen im Fluss - Leerraum zwischen Box im IE	Geos	CSS	2	16.04.2005 22:20