Ich versuche gerade ein Layout umzusetzen, aber irgendwie will das nicht ganz so wie ich...
Da ich leider, was CSS angeht, nicht so der Checker bin, dachte ich es findet sich vielleicht jemand der mehr Ahnung hat und mir sagen kann wo mein Fehler liegt bzw wie ich meine CSS-Eigenschaften für meinen Zweck korrigieren kann, oder jemand mit einem Alternativ-Vorschlag (Denkanstoß genügt, muß kein fertiger Code sein) wie ich das gewünschte Layout umsetzen kann.
Erstmal wie es vom Prinzip her aussehen soll (Schrift wegdenken, sind Platzhalter):
http://phillyblunt.de/philly.jpg
Dann mal den Schrott den mein Versuch produziert:
http://phillyblunt.de/
index.php:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Philly Blunt's Music</title>
<link rel='stylesheet' href='css/layout.css' type='text/css'>
</head>
<body>
<div id='top'>
</div>
<div id='right'>
</div>
<div id='left'>
<span style='font-size:18px;font-weight:bold;color:#e3e4e8;'>YO<br>yoyo</span>
</div>
<div id='bottom'>
</div>
<div id='content'>
<span style='font-size:18px;font-weight:bold;color:#e3e4e8;'>YO<br>yoyo</span>
</div>
</body>
</html>
Alles anzeigen
und die layout.css
Code
body {
font-family:arial;
background-color:#171717;
}
div#top {
z-index:0;
position:absolute; top:0; left:0;
background-color:#0c0c0c;
height:100px;
text-align:right;
padding:15px;
}
div#left {
z-index:1;
position:absolute; top:130px; left:0;
background-color:#0c0c0c;
height:450px;
border-bottom:1px solid #eaeaee;
}
div#right {
z-index:2;
position:absolute; top:130px; left:100%;
margin-right:400px;
width:400px; height:450px;
background-color:#171717;
border-top:1px solid #eaeaee;
text-align:left; padding:10px 0 0 160px;
}
div#bottom {
z-index:3;
position:absolute; top:580; left:0;
background-color:#171717;
}
div#content {
z-index:4;
position:absolute; top:130px; left:100%;
margin-right:700px;
width:400px; height:400px;
background-color:#000000;
-moz-border-radius-topleft:24px;
-moz-border-radius-bottomright:24px;
-khtml-border-radius-topleft:24px;
-khtml-border-radius-bottomright:24px;
border:1px solid #eaeaee;
text-align:center; padding:24px;
}
Alles anzeigen
Hat vielleicht jemand nen Zaunpfahl zum winken?