CSS Boxmodel Anordnung

  • Hallo,
    Ich bin anfänger und versuche mich an meiner ersten Seite. Mein Problm ist das sich die Boxmodelle nicht oben anordnen (Links, Mitte, Rechts sollen alle oben sein und nicht untereinander). Ich hab versucht über google was herauszufinden, jedoch haben die Möglichkeiten wo ich gefunden habe nicht den Erfolg gebracht.


    http://germanelite.webspace24.de/Uebung/uebung04c.htm
    http://germanelite.webspace24.de/Uebung/uebung04c.css

    Einmal editiert, zuletzt von Fussl1 (3. Januar 2011 um 23:31)

  • float:left;

    das is die css-anweisung, mit der du sowas hinbekommst.
    das brauchen alle drei spalten, also links, mitte und rechts.
    nachdem du die spalten nebeneinander angeordnet hast, machst du ein <br /> und gibst dem eine klasse (zB class="clearing")
    diese klasse definierst du dann im css ebenfalls und gibts ihr ein clear:both; mit
    immer merken: wo gefloated wird, muss man clearen, das ist wichtig damit du normal weitermachen kannst.

    ein float hebt das element aus der eigentlichen struktur heraus und lässt text und andere elemente umfliessen.
    float:left, heisst also dass es linksbündig aus dem kontext genommen wird und der text rechts umfließt. bei float:right ist es genau umgekehrt


    edit:

    ich hab mir grad nochmal den quellcode deiner übung angesehen.
    also überleg dir welche elemente wohin sollen, mach dir in deinem contentwrapper 3 divs
    leftcol, maincontent und rightcol
    denen gibst du des float:left; und die breite, die sie haben sollen, abstände machst du dann mit margin-left oder margin-right
    also zB: margin-right:20px;

    und wenn du deine 3 spalten hast, stopfst du alle elemente entsprechend dann in ihre spalte rein.
    es ist nämlich einfacher wenn man mehrere elemente hat, die nochmal mit einem wrapper zu umschliessen und den dann zu positionieren, als wenn man jedes element einzeln positioniert ;)

    Einmal editiert, zuletzt von synaptic (4. Januar 2011 um 00:27)

  • Fang am besten nochmal komplett neu an. Was du da produziert hast, ist die reinste Div-Suppe. Normalerweise sollte man mit maximal drei bis fünf Divs je Seite auskommen.

    Divs solltest du lediglich zur Gruppierung größerer Bereiche verwenden und nicht für jede Einzeldarstellung.
    Was du vor hast, lässt sich am besten mit einer ul-Liste realisieren, bei der die einzelnen li's gefloatet sind.
    Wie das funktioniert findest du hier erklärt:
    http://www.ohne-css.gehts-gar.net/0073.php