Ergebnis 1 bis 4 von 4

Thema: CSS-Layout absolute Positionierung

  1. #1
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard CSS-Layout absolute Positionierung

    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-Code:
    <!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>
    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;
    }
    Hat vielleicht jemand nen Zaunpfahl zum winken?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von SinnlosS (03.04.2009 um 00:49 Uhr)
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  2. #2
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard AW: CSS-Layout absolute Positionierung

    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>.

  3. #3
    Großmeister(in)
    Themenstarter

    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: CSS-Layout absolute Positionierung

    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;
    }
    Das Ergebnis ist schon etwas besser, allerdings klebt jetzt alles links ^^
    http://www.phillyblunt.de
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  4. #4
    Großmeister(in)
    Themenstarter

    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: CSS-Layout absolute Positionierung

    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?
    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;
    }
    HTML:
    HTML-Code:
    <!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>
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

Ähnliche Themen

  1. <div> absolute Position
    Von malawi im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 14.02.2007, 14:45
  2. absolute mitte
    Von lumich im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 18.09.2006, 00:19
  3. Ist Absolute Positionierung in einer Tabelle möglich?
    Von Jimmy bondy im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.05.2006, 09:38
  4. absolute positionierung ändern
    Von Monchi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 17.07.2005, 18:08
  5. postion:absolute Problem
    Von elbart im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 28.01.2005, 16:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •