Peter: Html5 Sections zentrieren..

Hallo,
ich kriegs einfach nicht hin die Sections auf der Seite zu zentrieren.

So sieht es momentan aus:
aktuell

Ich möchte die Sections aber zentriert auf der Seite ausrichten.
Ich weiß bzw. ich bin mir ziemlich sicher dass das Problem mit dem float: left; zu tun hat welches ich in section#zeile_1 verwende, aber wenn ich das nicht mache dann bleiben die Sections nicht nebeneinander..

Ich hoffe jemand kann mir helfen :)

HTML Code:

  
<!DOCTYPE html>  
  
<html>  
<body>  
<link rel="stylesheet" href="style.css" type="text/css">  
<style type="text/css">  
a:link { text-decoration:none; font-weight:bold; color:#800000; }  
a:visited { text-decoration:none; font-weight:bold; color:#800000; }  
  
a{  
	font-size: 14px;  
	color:white  
}  
  
  
  
section#zeile_1 {  
	background-color: #ffffff;  
	width: 20%;  
	margin: 0 25px;  
	color: #000000;  
	height: 150px;  
	float: left;  
	  
	  
	-moz-border-radius:10px 10px 10px 10px; /* Firefox - alte Syntax */  
	-moz-border-radius:10px 10px 10px 10px; /* Safari, Chrome - alte Syntax */  
	border-radius:10px 10px 10px 10px;; /* alle neuen Browser, W3C Standard */  
}  
  
footer {  
	font-size: 10px;  
}  
  
header {  
	text-align: center;  
}  
  
body {  
    font-size: 12px;  
    line-height: 1.3;  
    font-family: Arial, Helvetica, Sans-Serif;  
    color: #fff;  
    background: url('body-bg.gif');  
	text-align: center;  
}  
  
  
h3 {  
	font-size:16px;  
	font-family: Verdana;  
}  
  
  
</style>  
  
  
  
  
<body>  
	<section id="zeile_1">  
		<header>  
			<img src="img/user.png" />  
		</header>  
		  
			<p>  
				<a href="link.php">LINK</a>  
			</p>  
		  
		<footer>  
			<p>Kurze Beschreibung</p>  
		</footer>  
	</section>  
	  
	  
	  
	<section id="zeile_1">  
		<header>  
			<img src="img/user.png" />  
		</header>  
		  
			<p>  
				<a href="link.php">LINK</a>  
			</p>  
		  
		<footer>  
			<p>Kurze Beschreibung</p>  
		</footer>  
	</section>  
  
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />  
  
	<section id="zeile_1">  
		<header>  
			<img src="img/user.png" />  
		</header>  
		  
			<p>  
				<a href="link.php">LINK</a>  
			</p>  
		  
		<footer>  
			<p>Kurze Beschreibung</p>  
		</footer>  
	</section>  
  
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />  
  
	<section id="zeile_1">  
		<header>  
			<img src="img/user.png" />  
		</header>  
		  
			<p>  
				<a href="link.php">LINK</a>  
			</p>  
		  
		<footer>  
			<p>Kurze Beschreibung</p>  
		</footer>  
	</section>  
  
	<section id="zeile_1">  
		<header>  
			<img src="img/user.png" />  
		</header>  
		  
			<p>  
				<a href="extras/link.php">LINK</a>  
			</p>  
		  
		<footer>  
			<p>Kurze Beschreibung</p>  
		</footer>  
	</section>  
<!--<br /><a href="index.php">Home</a> | Eingeloggt als: <?php //echo $_SESSION["username"]; ?> (<a href="logout.php">Logout</a>) -->  
</body>  
<!-- FOOTER EINBAUEN -->  
</html>  

  1. float: left ist selbstredend das problem

    Gib den Elementen inline-block als display-Eigenschaft und gib dem elternelement ein text-align: center;

    Deinen brrrrr-Mist ersetzt du übrigens am besten durch einen Außenabstand.

    Dass alle Sections die ID "zeile_1" haben ist wohl auch nicht ganz so gewollt.

    Safari und Chrome können übrigens mit -moz-border-radius nix anfangen, auch wenn du einen Kommentar daneben schreibst.

    Du musst auch nicht 4x 10px notieren, 1x reicht, wenn ohnehin alle Ecken dieselbe Rundung aufweisen.

    Du notierst "line-height: 1.3" - die Einheit hast du aber unterschlagen: Marillenknödel?

    Um der Konsistenz wegen solltest du die Farbangaben immer in derselben Form notieren - du hast 1x white, 1x #ffffff und 1x #fff - wenn du nun alle "weiß" ersetzen willst, tust du dir ohne intelligente IDE mit suchen & ersetzen ziemlich schwer.

    1. Hi,

      Du notierst "line-height: 1.3" - die Einheit hast du aber unterschlagen: Marillenknödel?

      Bei line-height muss keine Einheit angegeben werden.

      ~dave

      1. Du notierst "line-height: 1.3" - die Einheit hast du aber unterschlagen: Marillenknödel?

        Bei line-height muss keine Einheit angegeben werden.

        Du hast natürlich recht - line-height erwartet number, length oder percent

        http://www.w3.org/TR/css3-linebox/#InlineBoxHeight
        http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

    2. vielen dank für eure Hilfe!

      Und danke an suit, deine Tipps haben mir super geholfen, habe es jetzt hinbekommen!

      Kannst du/jemand mir eine Lektüre empfehlen mit welcher man diese Sachen gut lernen kann? Vor allem Layout, positionierung usw usw, da ich mich damit noch ziemlich schwer tue.

      Lg,
      Peter

  2. Om nah hoo pez nyeetz, Peter!

    ich kriegs einfach nicht hin die Sections auf der Seite zu zentrieren.

    section-Elemente sind Block-Elemente. Sie werden beispielsweise durch {margin: 0 auto;} zentriert.

    Du solltest nicht mehrere IDs mit demselben Namen verwenden.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. section-Elemente sind Block-Elemente. Sie werden beispielsweise durch {margin: 0 auto;} zentriert.

      Aber nicht wenn mehrere nebeneinander sein sollen.