Ich bin zu doof, css boxen unter einander
  • Hallo,
    ich versuche eine Seite ganz ohne Tabellen mit css boxen zu erstellen und schaffe es einfach nicht, dass ich 2 Boxen links unter einander anordnen kann.
    Ich sehe schon vor lauter Wald keine Bäume mehr, kann mir vielleicht jemand helfen?

    .ecke { border-style: solid; width: 0px; height: 0px; line-height: 20px; float:left;}
    .linksoben {border-width: 60px 150px 150px 60px; border-color: #ffffff #ACC3FA #F89A2C #ffffff; }
    .farbe {height: 200px; background-color:#ACC3FA; color:#000066; font-size:20px; font-weight: bold; }
    div#logo {text-align: left; padding: 40px; margin: 0;}
    .links {float:left; margin-top: 130px;width: 220px; background-color: ACC3FA;}

    ecke und links sollten eigentlich untereinander.

  • 9 Answers sorted by
  • hallo und willkommen,
    bei mir sind die boxen untereinander,im FireFox 2.0 und InternetExplorer 7.0.

    ich sehe auch keinen fehler im CSS code =/

  • Bei mir sind sie in beiden Browsern versetzt. :o(
    Ich teste es später noch mal, erst mal brauche ich eine Auszeit.

  • nen tipp :

    wende float layouts nimmst, dann gib flaot:left nur 1ner box, in die box packste dann weitere rein.
    solche probs kenn ich tlw selber von daher um die ecke denken^^

  • So langsam bekomme ich die Krise, nun stimmt die Seite im FF, aber der IE7 stellst sie bei mir noch immer versetzt dar.

    Kann bitte noch mal jemand einen Blick darauf werfen und mir evtl. helfen den Grund zu finden warum dem so ist?
    Hier noch mal der AT:

    .ecke { border-style: solid; width: 0px; height: 0px; line-height: 20px; float:left;}
    .linksoben {border-width: 60px 150px 150px 60px; border-color: #ffffff #ACC3FA #F89A2C #ffffff; }
    .farbe {height: auto; background-color:#ACC3FA; color:#000066; font-size:20px; font-weight: bold; }
    div#logo {text-align: left; padding: 40px; margin: 0; height:auto;}
    .farbelinks {background-color: #FF0000; margin-top: 130px;width: 220px;}
    div#links {float:left; }

    #navlist
    {
    padding: 130px 1px 1px;
    margin-left: 0;
    font: 12px verdana, sans-serif;
    background: #2BAB0D;
    width: 210px;
    color: #006; }

    #navlist li
    {
    list-style: none;
    margin: 0px;
    border-top: 1px solid #060;
    text-align: left;
    white: 210px;
    }

    #navlist li a
    {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.5em;
    background: #FBFBD6;
    text-decoration: none;
    text-align:center;
    border-left: 1em solid #ACC3FA;
    border-right: 1em solid #DE360F;
    }

    #navlist li a:link { color: #000; }
    #navlist li a:visited { color: #006; }

    #navlist li a:hover
    {
    border-left: 1em solid #060;
    border-right: 1em solid #060;
    color: #004500;
    background: white;
    }







  • Nachtrag, füge ich in die navilist clear:both ein wird sie auch im IE nicht mehr versetzt, aber dann habe ich im IE einen Spalt oben zwischen der Ecke und der navilist.

    Im FF stimmt es.

  • kannst du BITTE mal ne testseite (URL) posten ...
    die sources so im kopf durchzugehen dauert VIEL zu lange ;)


    des weiteren sind attribute wie align="center" bei css nicht angebracht, das bringt nur chaos.

    fang du mal bei 0 an.
    bau du dir mal ein 3 spaltiges CSS div layout.

    arbeite nur mit background-color, margin, width und float.
    wichtig ist, dass dei flaot left/right container ÜBER dem im source stehen, der mittig sein soll.
    mittig positionieren tust du den container garnichtm du gibst dem nur margin ;)

    hier ein bsp:

    HTML
    <br /><div class="left"><br /><!-- platzhalter wie ganz VIELE <br/> zum testen !--><br /></div><br /><div class="right"><br /><!-- platzhalter wie ganz VIELE <br/> zum testen !--><br /></div><br /><div class="main"><br /><!-- platzhalter wie ganz VIELE <br/> zum testen !--><br /></div><br /><div class="footer"></div><br />


    CSS
    <br />.left{<br />width: 200px;<br />float:left;<br />background-color:#cc0000;<br />}<br /><br />.right{<br />width: 300px;<br />float:right;<br />background-color:#ccff00;<br />}<br /><br /><br />.main{<br />background-color:#cccccc;<br />/* containerbreite des linken + abstand von 10px*/<br />margin-left: 210px;<br />/* containerbreite des rechten + abstand von 10px*/<br />margin-right: 310px;<br />}<br /><br />/* um mal clear zu demonstrieren */<br />.footer{<br />clear:both;<br />width:100%;<br />height: 40px;<br />margin-top: 50px;<br />background-color: #ee99ee;<br /><br />}<br /><br />

    solche layouts sind halt schon anspruchsvoller als tab layouts nur hast hier wesentliche vorteile mit der übersicht, barierefreiheit etc.
    man muss tlw anderst denken und viel viel lernen ;)

  • Danke!
    Ich habe schon mit css und 3 Spalten gearbeitet, das Problem hier ist die Ecke links in css und das Feld rechts daneben.
    Das verursacht irgendwie Verwirrung.

    Hier ist das Ganze mal im Netz, auch mit deinem QT von oben kommt die Seite ins Rutschen, wenn ich den geplanten Kopf einfüge.

    Testseite

  • Ich war sogar schon so weit wieder mit Tabellen zu arbeiten, aber das habe ich lange nicht mehr gemacht und es klappte leider auch nicht wie geplant. ;o)

  • dein header...sry sowas hab ich noch nie gesehen xD
    ....wenn ich richtig hingucke....da nimmt man ne grafik und keine border trix, das ist alles andere als plattformunabhängig ;)

    algin="...." vergisst du mal als attribut bei css layouts !

    so solls aussehen oder ? ;)
    3ColumnCSSLayout

Willkommen!

It looks like you're new here. If you want to get involved, click one of these buttons!

Einloggen Registrierung!

Diskussionsteilnehmer

Who's Online (0)