|
|||
Scrollbarer, in der größe beschränkter Bereich in der Seitenmitte
Die Lektüre von FAQ, Hifletexten, etc. hat mir (bislang war ich ausschließlich für die Programmierung zuständig und die Grafikerin hat Skin/SCC/Themendateien geliefert) geholfen, einen Teil der Anforderung zu erfüllen, nämlich das ganze in der Höhe zu zentrieren.
Bei 4 Dingen stehe ich aber komplett an. Ein Layout mit 3 Spalten sowie Kopf- und Fußzeile soll mittig ausgerichtet sein, eine Höhe von maximal 700px haben und eine Breite von max. 1000px. Kopf- und Fußzeile sind je 50xp hoch die linke und die rechte content-spalte 200px breit, die Höhe und Breite mittleren Content-Spalte ergibt sich durch vorhandene Breite - 400 bzw vorhandene Höhe minus 100. So siehts derzeit aus: --> http://sso.e-box.at/default.aspx der Code dazu: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } body { text-align: center; /* horizontal centering for IE Win quirks */ } #distance { width: 1px; height: 50%; background-color: #fc6; margin-bottom: -13.75em; /* half of container's height */ float: left; } #inhalt { vertical-align: middle; position: relative; text-align: left; height: 27.5em; width: 45em; clear: left; text-align: center; max-height: 500px; width: 600px; background-color: #f5f5f5; } #top { position: absolute; height: 50px; width: 100%; text-align: left; padding: 0px; background-color: #ff2222; } #bottom { position: absolute; height: 50px; width: 100%; text-align: left; padding: 0px; bottom: 0px; background-color: #ff2222; } #left { position: absolute; height: 100%; width: 100px; text-align: left; top: 51px; bottom: 51px; padding: 0px; background-color: #22ff22; } #right { position: absolute; height: 100%; width: 100px; text-align: left; top: 51px; bottom: 51px; right: 0px; padding: 0px; background-color: #22ff22; } #content { position: absolute; text-align: left; top: 51px; bottom: 51px; right: 51px; bottom: 51px; min-width: 200px; max-width: 1000px; padding: 0px; background-color: #2222ff; overflow: auto; } </style> </head> <body> <div id="distance"> </div> <div id="inhalt"> <div id="top"> AAA</div> <div id="left"> CCC<br /> CCC<br /> CCC<br /> CCC<br /> CCC</div> <div id="content"> blablabla</div> <div id="right"> EEE<br /> EEE<br /> EEE<br /> EEE<br /> EEE</div> <div id="bottom"> BBB</div> </div> </body> </html> 1.) dass der blaue Bereich zwischen den beiden grünen ist 2.) dass der grüne bereich nicht untern hinausrutscht. Ist zuviel INhalt da, muß dieser abgeschnitten werden. 3.) dass der blaue Content-Berech einen Scrollbar bekommt, wenn der Inhalt über die verfügbare Höhe hinausgeht, und nur dieser bereich gescrollt wird. 4.) dass der gesamte Bereich mittig ausgerichtet ist. Vielen Dank für Input im Voraus. |
Sponsored Links |
|
||||
Zitat:
Stoff zum lernen: Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller) zu 1: alle drei Spalten floaten, im bottom clearen zu 2: siehe 1 zu 3: 'overflow: auto' zu 4: 'margin: 0 auto' für #inhalt keinerlei pos. absolute!! Manfred |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
iframe Größe bei Laden des Inhalts an dessen Größe anpassen | wiseguy | Javascript & Ajax | 0 | 24.06.2007 23:04 |
css - scrollbarer Bereich? | timo_81 | CSS | 11 | 06.02.2005 10:41 |