|
|||
Problem mit Mittelspalte bei 3-Spalten Layout mit Boxen
Hallo Jungs.
Habe hier Folgenden Code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>3-Spalten-Layout</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-language" content="de"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link rel="shortcut icon" href="images/favicon.ico"> <style type="text/css"> * { margin: 0; padding: 0; } body { margin-left: 20%; margin-right: 20%; font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; } .box { border-radius: 7px; background-color: rgb(250,240,160); padding: 10px; margin: 10px; } .button { text-align: left; padding: 1px; margin-top: 5px; display: block; } .subbutton { text-align: left; padding: 1px; margin-top: 2px; margin-left: 20px; font-size: 13px; } /*----Überschriften----*/ .menueheading { font-variant: small-caps; border-bottom: 1px solid black; margin-bottom: 5px; font-weight: 700; text-align: center; } .heading { font-variant: small-caps; border-bottom: 1px solid black; font-weight: 700; } /*----Die drei Boxen----*/ #links { background-color: #CCCCCC; float: left; } #rechts { background-color: #CCCCCC; float: right; } #inhalt { background-color: #8D8D8D; } /*----------Linkdarstellungen----------*/ a:link, a:visited, a:active, a:focus { text-decoration: none; color: rgb(0,0,0); } a:hover { text-decoration: none; background-color: rgb(70,39,24); color: rgb(255,255,255); } .helplink { cursor: help; } </style> </head> <body> <div id="links"> <div class="box"> <div class="menueheading">Test 1</div> <div class="button"><a href="index.html">punkt 1</a></div> <div class="subbutton"><a href="index.html">dfsgdsfgdsfg</a></div> <div class="subbutton"><a href="index.html">Vdsfgsdfg</a></div> <div class="subbutton"><a href="index.html">sdgfdfg</a></div> <div class="button"><a href="index.html">punkt 2</a></div> <div class="subbutton"><a href="index.html">dgfsdfg</a></div> <div class="subbutton"><a href="index.html">Vdfgdfgall</a></div> <div class="subbutton"><a href="index.html">Fdgfdfgk</a></div> <div class="button"><a href="index.html">dfgsgdfi</a></div> <div class="button"><a href="index.html">gdfdfgk</a></div> <div class="button"><a href="index.html">Qdfgdfgt</a></div> <div class="button"><a href="index.html">Wgdfdfg</a></div> <div class="button"><a href="index.html">Bufdgdfgr</a></div> <div class="button"><a href="index.html">Fagdfsdfg</a></div> </div> <div class="box"> <div class="menueheading">Test 2</div> <div class="button"><a href="index.html">Adfgdfgs</a></div> <div class="button"><a href="index.html">Pdsfggfm</a></div> <div class="button"><a href="index.html" class="helplink">Hilfe</a></div> </div> </div> <div id="rechts"> <div class="box"> <div class="menueheading">Rechts 1</div> sdfsdfsdf: 57995<br> sdfsdf: 15663<br> sdfsdfsdfsdfs: 55<br> sdfsdfsdf: 2293<br> sdfsdf: 3<br> sdfsdfsf: 2<br> sdfsdfsdf: 9298<br> sdfsdfsdf: 29<br> bvxcvxcv: 88<br> xcvxcvxcv: 20<br> xcvxcv: 111<br> xvxcv: 4<br> fgdhfgdhfgh: 2 </div> </div> <div id="inhalt"> <div class="box"> <div class="heading">Punkt 1 Übersicht:</div> test </div> </div> </body> </html> Ich möchte, dass sich die mittlere Box so stark wie möglich ausdehnt, sodass sie noch zwischen die Boxen links und rechts passt. Ich hoffe, mir kann jemand weiterhelfen. Viele Grüße |
Sponsored Links |
|
||||
Du hast keine Breiten angegeben. Du hast nur die Seitenbereiche gefloatet. Warum sind ausserdem die Bereiche nicht in logischer Reihenfolge angeordnet? Wäre einfacher.
Du hast die divititis --> die ist aber heilbar |
Sponsored Links |
|
|||
Hinter welchem Mond lebst du, oder ist deine Anrede neudeutsch und umfasst beiderlei Geschlecht?
... der aber dein Problem, bzw dein Anliegen nicht gleich erkennen lässt. Ich habe das mal für dich gemacht, und noch ein wenig Blindtext hinzugefügt, dem Inhaltsbereich eine andere Farbe gegeben, und die Außenboxen halbdurchsichtig gemacht. ToDoWaldi Zitat:
Float-Boxen sind, ähnlich wie position-absolut-Boxen, aus dem Textfluß genommen, d.h., sie überlagern andere Elemente. Im Gegensatz zu pos-abs-Boxen überlagern sie jedoch nur Block-Elemente und schieben Inline-Content (hier: den Text) vor sich her. Zitat:
Gruß zurück Edit: Hmmm, da fällt mir gerade ein, daß einige ältere Browser 'display: table-cell' nicht verstehen. andere Möglichkeit: Mach aus dem Inhaltsteil einen containing-block, indem du ihm 'overflow: auto' gibst. Geändert von gaby (28.02.2013 um 02:42 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 Spalten Layout INKL. 1 Spalten Layout | miedsegadse | CSS | 20 | 14.04.2011 01:02 |
problem mit 2 spalten css layout | sonnengott | CSS | 17 | 11.12.2008 15:21 |
Einfaches Layout 2 Spalten 2 Zeilen - bloß wie? | armagedon | CSS | 8 | 02.11.2008 16:54 |
[CSS | 3 Spalten Layout] Problem | dotchen | CSS | 3 | 11.04.2006 11:07 |
Problem mit mehrspaltigem Layout | RalfEggert | CSS | 2 | 05.04.2004 17:20 |