Quadrat

Status
Nicht offen für weitere Antworten.
G

Geflügel

Erfahrenes Mitglied
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:

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!
 

Anhänge

  • squares.png
    squares.png
    261 Bytes · Aufrufe: 94
Hi,

der Klasse .square fehlt die entsprechende margin-bottom-Deklaration, und bei jedem dritten Quadrat muss der rechte Außenabstand auf null gesetzt werden.
 
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.
 
Danke, erstmal..

Jetzt lautet der Code:

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? :(
 

Anhänge

  • square-falsch.png
    square-falsch.png
    284 Bytes · Aufrufe: 20
Bei jedem dritten Quadrat muss der rechte Außenabstand auf null gesetzt werden:

Code: 
.marginRight { margin-right:0; }
Code: 
        <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>
 
Hi,

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

Code: 
.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.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück