2 spalten design per CSS + variabeler rahmen
  • hallo,

    ich möchte, wie schon im Titel beschrieben ein 2 Spaltiges CSS layout realiserieren, um welche auch ein Rahmen geht.

    das 2 spaltige Layout habe ich schon, allerdings wird so wie ich es habe, nur eine Feste rahmen größe genutzt und nicht der rahmen den spalten angepasst.

    hier mal der Code:
    <br /><br /><div style="border:1px <a href="/search?Search=%23000000&Mode=like">#000000</a> ridge; height:auto; "><br /> <ul style="float:left; width:100px; margin:0px; padding:0px; list-style:none; "><br /> <li>1</li><br /> <li>2</li><br /> </ul><br /> <br /> <div><br /> 123123123123 123123123<br /> </div><br /></div><br />

    ich hoffe, dass ich mich nicht allzu dumm angestellt habe, wobei ich denke, dass es relativ einfach zu lösen ist, allerdings komme ich nicht drauf wie es gehen soll :(

    Eisberg / Nikolas

  • 5 Answers sorted by
  • eigentlich geht das schon so wie dus gemacht hast ^^
    das problem ist bei border, muss die 1te angabe IMMER der style sein, also solid oder so ;)

    HTML
    <br /><br /><div class="border"><br /> <div class="left"><br /> <ul><br /> <li>1</li><br /> <li>2</li><br /> </ul><br /> </div> <br /> <br /> <div class="main"><br />content<br /> </div><br /><div class="clearfix"></div><br /></div><br /><br />
    CSS
    <br />.border{<br />border:solid 1px #cc0000;<br />}<br />.left{<br />width:100px;<br />float:left;<br />}<br />.main{<br />margin-left: 110px;<br />}<br />.clearfix{<br />clear:both;<br />}<br />

  • habe den code von xaos ausprobiert und der geht nicht, dass gleiche problem wie vorher, die höhe wird einfach nicht dem angepasst was im div kontainer steht, dass ist das problem. ich will ja, dass der rahmen im alles geht und nicht nur um den content, ich teste es mit FF2 und IE6^^

    *edit*: falls das nicht so geht wie ich will könnte ich auch einfach die tabellen CSS sachen nutzen, also div´s als reihen und zellen nehmen

  • so habe etwas weiter gebaut, nun poste ich mal alles was ich so habe, also sowohl CSS als auch HTML aufruf:

    CSS:
    <br />#main_frame {<br /> margin-left:10px;<br /> margin-right:10px;<br /> margin-top:10px;<br /> border:2px;<br /> border-style:solid;<br /> border-color:#496EFF;<br /> color:#000000;<br /> background-color:#FFFFFF; <br />}<br /><br />#header_frame {<br /> border:0px;<br /> color:#000000;<br /> background-color:#0065FF;<br /> font-size:24px;<br /> text-align:right;<br /> padding:2px;<br /> padding-top:25px;<br /> font-family:Verdana, Arial, Helvetica, sans-serif;<br />}<br />#header_frame <a href="/search?Search=%23small_text&Mode=like">#small_text</a> {<br /> font-size:12px;<br />}<br /><br />#second_frame {<br /> border:1px;<br /> border-style:ridge;<br /> border-color:#000000;<br /> margin:3px;<br />}<br /><br />#nav_frame {<br /> border:0px;<br /> width:12%;<br /> float:left;<br /> margin:3px;<br /> padding-left:5px;<br /><br />}<br />#nav_frame ul {<br /> list-style:none;<br /> margin:1px;<br /> padding:1px;<br />}<br />#nav_frame li {<br /> background-color:#CCCCCC;<br /> color:#000000;<br /> border:1px <a href="/search?Search=%23000000&Mode=like">#000000</a> ridge;<br /> padding-left:1px;<br />}<br /><br />#content_frame {<br /> margin:3px;<br /> float:left;<br />}<br /><br />#bottom_frame {<br /> text-align:center;<br /> font-size:10px;<br /> font-family:Verdana, Arial, Helvetica, sans-serif;<br /> color:#CCCCCC;<br /> background-color:#0065FF;<br />}<br />

    HTML:
    <div id="main_frame"><br /> <div id="header_frame"><br /> homepage_titel<span id="small_text"><br>Untertitel</span><br /> </div><br /> <br /> <div id="second_frame"><br /> <div id="nav_frame"><br /> <ul><br /> <li>home</li><br /> <li>about</li><br /> <li>kontakt</li><br /> <li>impressum</li><br /> </ul><br /> </div><br /> <br /> <div id="content_frame"><br /> <p>Fehler:<br>Die gesuchte Seite konnte nicht gefunden werden, kehren Sie zum Start zur&uuml;ck!</p><br /> <p>Fehler:<br>Die gesuchte Seite konnte nicht gefunden werden, kehren Sie zum Start zur&uuml;ck!</p><br /> <p>Fehler:<br>Die gesuchte Seite konnte nicht gefunden werden, kehren Sie zum Start zur&uuml;ck!</p><br /> <p>Fehler:<br>Die gesuchte Seite konnte nicht gefunden werden, kehren Sie zum Start zur&uuml;ck!</p><br /> <p>Fehler:<br>Die gesuchte Seite konnte nicht gefunden werden, kehren Sie zum Start zur&uuml;ck!</p><br /> <p>Fehler:<br>Die gesuchte Seite konnte nicht gefunden werden, kehren Sie zum Start zur&uuml;ck!</p><br /> <p>Fehler:<br>Die gesuchte Seite konnte nicht gefunden werden, kehren Sie zum Start zur&uuml;ck!</p><br /> </div><br /> </div><br /> <div id="bottom_frame"><br /> &nbsp;<br>&nbsp;<br /> </div><br /></div><br />

    ich hoffe, es kann mir jmd helfen^^

  • doch geht, clear:both muss nur immer mit rein, siehe update oben ;)
    musst das floating aufheben, ansonsten überlagern sich die left, right und default positionen

    bei dir: unter dem container content_frame einen container mit der eigenschaft clear:both

  • ah danke jetzt geht alles, thx =)

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)