NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
english:templates:2-col-fix-width-var-height [2009/04/25 08:05] 127.0.0.1 external edit |
english:templates:2-col-fix-width-var-height [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 6: | Line 6: | ||
| [[http://forum.phpwcms.org/viewtopic.php?p=111983#p111983]] \\ | [[http://forum.phpwcms.org/viewtopic.php?p=111983#p111983]] \\ | ||
| - | -(Autor: kukki) | + | - **Autor:** kukki //(Update: 24.06.09)// |
| - | ==== Anforderung: ==== | + | ===== Anforderung: ===== |
| * Header soll am obersten Rand der Viewport stehen. (115px) | * Header soll am obersten Rand der Viewport stehen. (115px) | ||
| - | * Left und Main sollen nebeneinander stehen in einem Container. | + | * Left und Main sollen optisch nebeneinander stehen |
| - | * Der Scrollbalken soll dynamisch im Main erzeugt werden, falls notwendig. | + | * Der Scrollbalken soll dynamisch im Main erzeugt werden, falls gewünscht, wie im Beispiel. |
| * Footer soll untem im Viewport stehen. (20px) | * Footer soll untem im Viewport stehen. (20px) | ||
| - | * Bei F11-Taste soll die Konstruktion sich diesem Bildschirm automatisch anpassen. | + | * Bei F11-Taste soll die Konstruktion sich diesem Bildschirm automatisch anpassen. |
| - | Gewählt habe ich eine Breite von 980px, so dass 1024x YYY bedient werden kann. | + | * CSS-Code soll konform sein! [[http://www.grosse-strasse-strausberg.de|Live-Beispiel siehe hier]] |
| - | === CSS === | + | Gewählt habe ich eine feste Breite von 980px, so dass 1024 x YYY bedient werden kann. |
| - | Folgende Lösung hat bisher einem Test standgehalten und sich stabil verhalten: | + | ==== CSS ==== |
| - | <code css |h selbstzentrierende Seite 984px breit, 100% hoch|h> | + | Folgende Lösung hat bisher einem Test standgehalten und ist stabil und mit nachfolgenden Codezeilen CSS-konform: |
| - | /* selbstzentrierende Seite 984px breit, 100% hoch*/ | + | |
| + | --> diesen Codeschnipsel in den Header der Vorlage einstellen: | ||
| + | |||
| + | <code header/ Vorlage |h header/ Vorlage |h> | ||
| + | <!--[if lt IE 7]> | ||
| + | <style type="text/css"> | ||
| + | #mainBlock { height: expression((document.body.clientHeight-157) + "px");} | ||
| + | /* wer auch den #leftBlock bis zum Footer fließen lassen will, sollte die nachfolgende Zeile auch benutzen! | ||
| + | -->Vorteil: Man kann dem #leftBlock ein eigenes Hintergrundbild ohne Trickereien verpassen */ | ||
| + | #leftBlock { height: expression((document.body.clientHeight-157) + "px");} | ||
| + | </style> | ||
| + | <![endif]--> | ||
| + | </code> | ||
| + | |||
| + | Soll #leftBlock ebenfalls mit **height: expression** angesteuert werden, damit dieser bis zum footer fließen kann, | ||
| + | ist dieser Block mit **position:absolute** zu behandeln. | ||
| + | **Eine Empfehlung:** Wenn jemand den IE6 ohne Probleme bedienen will, sollten CSS-Kurzschriften vermieden werden. | ||
| + | Macht zwar Mühe, aber der IE6 läuft stabil! | ||
| + | |||
| + | <code css |h selbstzentrierende Seite 980px breit, 100% hoch|h> | ||
| + | |||
| + | /* selbstzentrierende Seite 980px breit, 100% hoch*/ | ||
| html, body { | html, body { | ||
| margin: 0; | margin: 0; | ||
| Line 35: | Line 56: | ||
| margin: 0; | margin: 0; | ||
| padding: 0; | padding: 0; | ||
| - | background: #123456; | + | overflow:hidden; /*weg ist der Scrollbalken*/ |
| - | } | + | } |
| #container { position: absolute; | #container { position: absolute; | ||
| - | background: #006400; | + | background-color: #006400; |
| margin: 0px 0px 0px -490px; | margin: 0px 0px 0px -490px; | ||
| left: 50%; | left: 50%; | ||
| - | width: 984px; /* Breite der gesamten Website */ | + | width: 980px; /* Breite der gesamten Website */ |
| height:100%; /* sichtbare Hoehe der Website */ | height:100%; /* sichtbare Hoehe der Website */ | ||
| } | } | ||
| Line 54: | Line 75: | ||
| #mainBlock { | #mainBlock { | ||
| position: absolute; | position: absolute; | ||
| - | background: #ffff99; | + | background-color: #ffff99; |
| - | top: 117px; | + | top: 115px; |
| bottom: 30px; | bottom: 30px; | ||
| right: 0; | right: 0; | ||
| padding: 5px 15px 5px 5px; | padding: 5px 15px 5px 5px; | ||
| margin-left: 220px; | margin-left: 220px; | ||
| - | overflow: auto; } | + | overflow: auto; /*Scrollbalken nur für den #mainBlock*/ |
| + | } | ||
| - | /* nur mit diesen Einstellungen bleibt der IE6 stabil */ | + | #leftBlock |
| - | #mainBlock { | + | { |
| - | height: expression((document.body.clientHeight-157) + ";px"); | + | position: absolute; |
| - | width: expression((document.body.clientWidth-525) + "px"); | + | top: 115px; |
| - | } | + | |
| - | + | ||
| - | #leftBlock { | + | |
| - | left: 25px; | + | |
| width: 200px; | width: 200px; | ||
| + | bottom: 30px; | ||
| } | } | ||
| Line 78: | Line 97: | ||
| text-align: left; | text-align: left; | ||
| color: #ffffff; | color: #ffffff; | ||
| - | width: 984px; | + | width: 980px; |
| height: 30px; | height: 30px; | ||
| margin: 0; | margin: 0; | ||
| padding: 0; | padding: 0; | ||
| - | background: url(/picture/Fuss.jpg) repeat-x; | + | background-image: url(/picture/Fuss.jpg); |
| + | background-repeat: repeat-x; | ||
| } | } | ||
| #footerBlock a{ color:#f2f2f2;} | #footerBlock a{ color:#f2f2f2;} | ||
