CSS-Layout absolute Positionierung

SinnlosS

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?

Elvis

Der Zaunpfahl heißt float. Position absolut sollte man nur benutzen wenn man damit umgehen kann. Nicht wirklich Anfängergeeignet.

P.S.: Für Absätze benutzt man <p> und nicht <span>. Für Abstände margin und padding und nicht <br>.

SinnlosS

Ja an float hab ich als erstes gedacht. Die Sache ist aber, das die hintergrundfarbe der abgerundeten Ecke oben links anders sein soll als die der abgerundeten Ecke unten rechts. Daher muß ich den Content-Bereich auf einer Seite über ein anderes Element legen wenn ich keine Grafiken nehmen möchte. Und das würde ich gerne vermeiden, und sei es aus experimentellen Gründen.

Hab noch bissl rumprobiert und die CSS sieht jetzt so aus:

Code

body {
    font-family:arial;
    background-color:#171717;
    width:100%;
    text-align:right;
}
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%-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%-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

Das Ergebnis ist schon etwas besser, allerdings klebt jetzt alles links
http://www.phillyblunt.de

SinnlosS

Ok, ich hatte gestern abend echt ein dickes Brett vorm Kopf.
Ich kann ja auch von rechts positionieren, und nicht nur von links aus.
So passt es jetzt, bis auf eine Kleinigkeit.
Die padding-Angabe von div#right wird scheinbar nicht interpretiert, sonst müßte der Text dadrin im sichtbaren Bereich rechts neben dem content liegen. Hat da vielleicht noch jemand ne Idee?
http://www.phillyblunt.de

CSS:

Code

body {
    font-family:arial;
    background-color:#171717;
    width:100%;
    text-align:right;
}
div#top {
    z-index:0;
    position:absolute; top:0; left:0;
    background-color:#0c0c0c;
    height:100px; width:100%;
    text-align:right;
    padding:15px;
}
div#left {
    z-index:1;
    position:absolute; top:130px; left:0;
    background-color:#0c0c0c;
    height:449px; width:100%;
    margin-right:350px;
    border-bottom:1px solid #eaeaee;
}
div#right {
    z-index:2;
    position:absolute; top:130px; right:0;
    width:400px; height:450px;
    background-color:#171717;
    border-top:1px solid #eaeaee;
    padding:10px 0 0 160px;text-align:left;
}
div#bottom {
    z-index:3;
    position:absolute; top:580px; left:0;
    background-color:#171717;
}
div#content {
    z-index:4;
    position:absolute; top:130px; right:250px;
    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

HTML:

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='layout.css' type='text/css'>
</head>
<body>


<div id='top'>
</div>


<div id='left'>
</div>


<div id='right'>
<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

Tags