|
|||
![]()
Hallo zusammen
Ich benutze ein dreispaltiges Layout, wobei ich möchte, dass die mittlere Spalte eine feste Breite und die beiden äußeren eine variable Breite haben. Derzeit habe ich dies mit einer Tabelle gelöst, wobei die Tabelle eine Gesamtbreite von 100% hat und die mittlere tabledata, Spalte eine feste Größe hat. Diese Tabelle nutze ich nur für den Header, wobei ich möchte, dass der restliche Inhalt, welcher unter der Tabelle/dem Header ist, nur so breit ist wie die feste Tabellenspalte. Das, was ich umgesetzt habe funktioniert, jedoch möchte ich die Tabelle gerne entfernen und durch DIVs ersetzen; leider bin ich bisher kläglich gescheitert ![]() Ich würde mich sehr freuen, wenn ich von euch etwas Unterstützung bekäme ![]() Dazu sei noch gesagt, dass die beiden variablen Spalten "jediglich" dazu dienen, eine Grafik als Hintergrund anzuzeigen, sodass dieser durchgängig ist. Hier der Code: Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>appleHELP | Startseite</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style> *{ margin: 0; padding: 0; } body{ font: normal 11px/16px verdana, geneva, arial, helvetica, sans-serif; text-align: justify; color: #000; background: #fff; } table{ width: 100%; } .breite{ width: 778px; margin: auto; } #links, #rechts{ width: 170px; height: auto; } #links{ float: left; clear: both; } #rechts{ float: right; } #content{ width: 438px; height: auto; float: left; } </style> </head> <body> <table> <tr> <td> linker Hintergrund variable Breite</p> </td> <td class="breite"> HEADER - feste Größe</p> </td> <td> rechter Hintergrund variable Breite</p> </td> </tr> </table> <div class="breite"> <div id="links"> links - feste Breite</p></div> <div id="content"> mitte / content - feste Größe</p></div> <div id="rechts"> rechts - feste Breite</p></div> </div> </body> </html>
__________________
_dshock*collecting dreams // |
Sponsored Links |
|
|||
![]() Zitat:
Setz ein breites Hintergrundbild mittig in body ein und lass es vertikal wiederholen. Der Inhalt kommt dann in ein zentriertes div-Element mit der gewünschten Breite. Grüße fricca |
Sponsored Links |
|
|||
![]()
Hallo!
Schau mal eventuell so? Ist nur ein kleiner Anreiz, aber so müsste es gehen. Code:
body{margin:0;padding:0;} .links{ float:left; margin:0; padding:0;} .mitte { float:left; width:300px; margin: auto; padding:0;} .rechts{ float:left; margin:0; padding:0;} whale[/code] |
|
|||
![]() Zitat:
an den Walfänger: leider nein: die beiden äußeren DIVs füllen nicht bis zur mitte ![]() //EDIT: wie gesagt, müsste eigentlich "nur" die Tabelle "umwandeln" (siehe Code oben)
__________________
_dshock*collecting dreams // |
|
|||
![]()
Selbiges habe ich just-at-the-moment fertig gestellt, will aber nicht funzen?!
html: Code:
<div id="headlinks"></div> <div id="headrechts"></div> <div id="headmitte">[img]includes/img/head.png[/img]</div> Code:
#headlinks, #headrechts, #headmitte{ position: absolute; top: 0px; } #headlinks{ height: 248px; background-image: url('../img/headbglinks.png'); float: left; width: 50%; z-index: 1; } #headmitte{ width: 778px; height: 248px; margin: auto; z-index: 3; } #headrechts{ height: 248px; background-image: url('../img/headbgrechts.png'); float:right; width: 50%; z-index: 2; }
__________________
_dshock*collecting dreams // |
|
|||
![]()
Ich habe es nun
![]() Code:
#headlinks, #headrechts{ position: absolute; top: 0; width: 50%; height: 248px; } #headlinks{ background-image: url('../img/headbglinks.png'); left: 0; z-index: 1; } #headmitte{ position: relative; top: 0px; width: 778px; margin: auto; z-index: 3; } #headrechts{ background-image: url('../img/headbgrechts.png'); right: 0; z-index: 2; }
__________________
_dshock*collecting dreams // |
Sponsored Links |
|
|||
![]()
Schau so ungefähr meinte ich das mit dem drüberlegen:
.mitte{ margin-left: 33%; position: absolute; width: 200px; height: 200px;} .links{ float:left; width:50%; height: 200px; } .rechts{ float:left; width:50%; height: 200px; } Könntest du bitte etwas präzisieren, wo was nicht funzt? |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Webseite: Variable oder feste Breite? | thomas78 | (X)HTML | 6 | 25.12.2009 19:55 |
Geht das: 3 Spalten, Mitte zentriert + feste Breite, Ränder automatisch | Kampmann | CSS | 2 | 25.10.2009 11:24 |
3 Divs Nebeneinander (variable und feste breite) | temp11 | CSS | 0 | 12.06.2009 12:04 |
Holy Grail und der Internet Explorer! | ONeill | CSS | 23 | 01.06.2006 18:20 |
3 Spalten, 100% Breite und Mitte feste breite | lookom | CSS | 0 | 23.07.2005 17:19 |