# Quadrat



## Geflügel (9. Januar 2008)

Ausschauen soll das ganze wie im Anhang dargestellt.
Leider klappt das bei mir nicht. Eigentlich wollte ich ein Quadrat mit 14 mal 14 Quadraten darstellen, aber der Einfachheit halber habe ich das jetzt (um es hier zu posten) auf 3 mal 3 Quadrate reduziert. (Bitte denkt euch die blauen Quadrate im Bild unten weg )

Hier mein Code:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="screen, projection, handheld">
	/*<![CDATA[*/
		.box {
			height: 230px;
			width: 230px;
			margin: 0 -10px -10px 0;
		}
		.square {
			float: left;
			margin-right: 10px;
			height: 70px;
			width: 70px;
		}
		
		.box {
			background-color: grey;
			border: 1px solid red;
		}
		.square {
			background-color: #993300;
		}
	/*]]>*/
	</style>
</head>
<body>
	<div class="box">
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
</body>
</html>
```

Danke im Voraus!


----------



## Maik (9. Januar 2008)

Hi,

der Klasse *.square* fehlt die entsprechende margin-bottom-Deklaration, und bei jedem dritten Quadrat muss der rechte Außenabstand auf null gesetzt werden.


----------



## Geflügel (9. Januar 2008)

Danke, aber was meinst du damit?


----------



## Maik (9. Januar 2008)

Derzeit besteht zwischen den Quadraten kein vertikaler Abstand, weshalb sie nahtlos untereinander angeordnet werden, und da alle Quadrate einen rechten Außenabstand besitzen, werden nicht drei pro Zeile angezeigt, sondern nur zwei.


----------



## Geflügel (9. Januar 2008)

Danke, erstmal..

Jetzt lautet der Code:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="screen, projection, handheld">
	/*<![CDATA[*/
		.box {
			height: 230px;
			width: 230px;
			margin: 0 -10px -10px 0;
		}
		.square {
			float: left;
			margin: 0 10px 10px 0;
			height: 70px;
			width: 70px;
		}
		
		.box {
			background-color: grey;
			border: 1px solid red;
		}
		.square {
			background-color: #993300;
		}
	/*]]>*/
	</style>
</head>
<body>
	<div class="box">
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
</body>
</html>
```

Aber die Darstellung ist noch nicht richtig:
Woran liegt das? Siehe Anhang. Danke schonmal!

Edit: Ja, alle Quadrate haben einen Abstand nach rechts, aber anders geht es ja nicht, oder? Was kann ich tun?


----------



## Maik (9. Januar 2008)

Bei jedem dritten Quadrat muss der rechte Außenabstand auf null gesetzt werden:


```
.marginRight { margin-right:0; }
```


```
<div class="box">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square marginRight"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square marginRight"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square marginRight"></div>
        </div>
```


----------



## Geflügel (9. Januar 2008)

Anders geht das nicht?


----------



## Maik (10. Januar 2008)

Hi,

ansonsten verwendest du den Selektor für benachbarte Elemente, um die entsprechenden DIVs anzusprechen - hier das dritte, sechste und neunte DIV:


```
.box > div:first-child + div + div,
.box > div:first-child + div + div + div + div + div,
.box > div:first-child + div + div + div + div + div + div + div + div {
              margin-right:0;
}
```
Es sei aber darauf hingewiesen, dass dieser Selektor von den älteren IEs bis einschliesslich Version 6 nicht unterstützt wird.


----------

