Benötige mal wenig Hilfe mit CSS

Dieses Thema im Forum "Web Page Design" wurde erstellt von nilsmoeller, 16.12.2006.

  1. nilsmoeller

    nilsmoeller Thread Starter Gast

    Hallo, ich versuche ein 2-spaltiges CSS-Layout zu gestalten, mit einer Kopf- und einer Fuss-Note. Hier ein kurzer Überblick über die Struktur:

    - KOPF
    - RAHMEN ANFANG
    ----- LINKS
    ----- RECHTS
    - RAHMEN ENDE
    - FUSS

    Das gelingt mir aber nur zum Teil.
    Die einzelnen Container sind richtig ausgerichtet, das heist: oben der Kopf darunter die linke und rechte Spalte und darunter der Fuss, aber mit dem Rahmen habe ich Probleme. Er will sich einfach nicht optisch um die Spalten herumlegen.

    Ich möchte gerne, dass der Rahmen als Behälter für ein gemeinsames Hintergrundbild für die linke und rechte Spalte funktioniert.

    Ich könnte mir vorstellen, dass ich hier etwas mit "float" nicht richtig mache, aber ich habe bereits soviel probiert, dass ich vor lauter Bäumen den Wald nicht mehr sehe.

    Wäre sehr nett, wenn mir hier jemand aushelfen könnte.

    Hier die einzelnen Formatierungen (so, wie ich sie bereits geschrieben habe):

    body {
    margin: 0 0 20px 0;
    color: #f00;
    background: black;
    font-size: 12px;
    font-family: "lucida grande", geneva, arial, verdana, sans-serif;
    text-align: center;
    }

    #KOPF {
    width: 900px;
    height: 110px;
    margin: 0 auto;
    padding: 0;
    color: #f00;
    background: #GREEN;
    border-bottom: 15px solid white;
    }

    #RAHMEN {
    width: 900px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    color: #f00;
    background: WHITE;
    border: 1px solid red;
    }

    #LINKS {
    float: left;
    width: 600px;
    height: 100%;
    margin: 0;
    padding: 0 15px;
    text-align: left;
    background: BLUE;
    }

    #RECHTS {
    float: left;
    width: 210px;
    height: 100%;
    margin: 0;
    padding: 0 15px;
    text-align: left;
    background: RED;
    }

    #FUSS {
    clear: both;
    width: 900px;
    height: 32px;
    font-size: .75em;
    margin: 0 auto;
    padding: 0;
    color: #f00;
    background: GREEN;
    border-top: 15px solid white;
    }
     
  2. mcintyre

    mcintyre MacUser Mitglied

    Beiträge:
    1.177
    Zustimmungen:
    2
    MacUser seit:
    10.12.2003
  3. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    MacUser seit:
    25.07.2004
    Prinzipiell sollte es so gehen:

    HTML:
    <div id="RAHMEN">
       <div id="LINKS">....Inhalt hier...</div>
       <div id="RECHTS">....Inhalt hier...</div>
    </div>
    
    2nd
     
  4. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Also, außer das
    HTML:
    background: #GREEN;
    keine gültige Farbangabe ist und groß geschrieben IDs und Farbnamen auf mich eher ungewohnt wirken (was sagt eigentlich der Validator dazu), kann ich da jetzt nichts erkennen, was nicht stimmt (könnte aber auch an der Uhrzeit liegen ;)

    Wie sieht denn dein Markup dazu aus? Mein Test-Markup macht was es soll (validiert nur nicht):
    HTML:
    <link rel="stylesheet" href="css.css">
    <body>
    	<div id="kopf"></div>
    	<div id="rahmen">
    		<div id="links"></div>
    		<div id="rechts"></div>
    	</div>
    	<div id="fuss"></div>
    </body>
    However, zwei Links, die möglicherweise weiterhelfen:
    http://www.yaml.de/
    Einschließen von Floats ohne zusätzliches Markup
     
  5. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    MacUser seit:
    05.01.2004
    Wenn der Rahmen sich gar nicht erweitert, sondern nur ganz oben komplett zusammengeklappt hängt, liegt's daran, dass Du keinen clear gemacht hast. Versuch mal unterhalb der floats aber noch im Rahmen ein <div style="clear:both;"></div>

    Wenn's dann geht, hast Du Dein Problem.
     
  6. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    MacUser seit:
    01.06.2004
    Gib Rechts mal float:right
     
  7. nilsmoeller

    nilsmoeller Thread Starter Gast

    Super, das wars...
    Danke
     

Diese Seite empfehlen