nicht angemeldet
Html5 Sections zentrieren..
3 0 
Matthias Apsel
Html5 Sections zentrieren..
Hallo,
ich kriegs einfach nicht hin die Sections auf der Seite zu zentrieren.
So sieht es momentan aus:
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>
-
float: left ist selbstredend das problem
Gib den Elementen
inline-blockalsdisplay-Eigenschaft und gib dem elternelement eintext-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.
-
Hi,
Du notierst "line-height: 1.3" - die Einheit hast du aber unterschlagen: Marillenknödel?
Bei line-height muss keine Einheit angegeben werden.
~dave
-
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
-
-
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
-
-
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.
-
section-Elemente sind Block-Elemente. Sie werden beispielsweise durch {margin: 0 auto;} zentriert.
Aber nicht wenn mehrere nebeneinander sein sollen.
-