Benötige mal wenig Hilfe mit CSS

  1. nilsmoeller

    nilsmoeller Thread Starter

    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;
    }
     
    nilsmoeller, 16.12.2006
  2. mcintyre

    mcintyreMacUser Mitglied

    Mitglied seit:
    10.12.2003
    Beiträge:
    1.172
    Zustimmungen:
    2
    mcintyre, 16.12.2006
  3. 2nd

    2ndMacUser Mitglied

    Mitglied seit:
    25.07.2004
    Beiträge:
    8.901
    Zustimmungen:
    242
    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

    msslovi0MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    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
     
    msslovi0, 17.12.2006
  5. Jakob

    JakobMacUser Mitglied

    Mitglied seit:
    05.01.2004
    Beiträge:
    1.067
    Zustimmungen:
    21
    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.
     
    Jakob, 17.12.2006
  6. ThaHammer

    ThaHammerMacUser Mitglied

    Mitglied seit:
    01.06.2004
    Beiträge:
    3.277
    Zustimmungen:
    13
    Gib Rechts mal float:right
     
    ThaHammer, 17.12.2006
  7. nilsmoeller

    nilsmoeller Thread Starter

    Super, das wars...
    Danke
     
    nilsmoeller, 23.12.2006
Die Seite wird geladen...
Ähnliche Themen - Benötige wenig Hilfe
  1. Boogaboo
    Antworten:
    4
    Aufrufe:
    714
  2. NYReiter
    Antworten:
    22
    Aufrufe:
    2.034
    NYReiter
    21.12.2010
  3. viskem
    Antworten:
    2
    Aufrufe:
    381
    MacKirc
    26.01.2009
  4. nielzholgersson
    Antworten:
    4
    Aufrufe:
    590
    nielzholgersson
    29.05.2006
  5. nielzholgersson
    Antworten:
    8
    Aufrufe:
    794
    nielzholgersson
    01.02.2006