NAVIGATION
This shows you the differences between two versions of the page.
deutsch:templates:2-spalten-feste-breite-variable-hoehe [2009/06/23 12:56] Burkhard Otto |
deutsch:templates:2-spalten-feste-breite-variable-hoehe [2018/06/03 18:08] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
{{indexmenu_n>100}} | {{indexmenu_n>100}} | ||
- | ====== 2 Spalten, feste Breite, var. Höhe ====== | + | ====== kukkis: 2 Spalten, feste Breite, var. Höhe ====== |
[[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. | ||
- | * CSS-Code soll konform sein! | + | * CSS-Code soll konform sein! [[http://www.grosse-strasse-strausberg.de|Live-Beispiel siehe hier]] |
Gewählt habe ich eine feste Breite von 980px, so dass 1024 x YYY bedient werden kann. | Gewählt habe ich eine feste Breite von 980px, so dass 1024 x YYY bedient werden kann. | ||
Line 28: | Line 28: | ||
#mainBlock { height: expression((document.body.clientHeight-157) + "px");} | #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! | /* wer auch den #leftBlock bis zum Footer fließen lassen will, sollte die nachfolgende Zeile auch benutzen! | ||
- | **Vorteil:** Man kann dem leftBloch ein eigenes Hintergrundbild ohne Trickereien verpassen */ | + | -->Vorteil: Man kann dem #leftBlock einen eigen spaltengerechten Hintergrund ohne Tricksereien mit Faux Columns verpassen */ |
#leftBlock { height: expression((document.body.clientHeight-157) + "px");} | #leftBlock { height: expression((document.body.clientHeight-157) + "px");} | ||
</style> | </style> | ||
<![endif]--> | <![endif]--> | ||
</code> | </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> | <code css |h selbstzentrierende Seite 980px breit, 100% hoch|h> | ||
- | /* selbstzentrierende Seite 984px breit, 100% hoch*/ | + | /* selbstzentrierende Seite 980px breit, 100% hoch*/ |
html, body { | html, body { | ||
margin: 0; | margin: 0; | ||
Line 48: | Line 53: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
+ | 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%; | ||
Line 66: | Line 72: | ||
#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*/ |
+ | } | ||
- | #leftBlock { | + | #leftBlock |
- | left: 25px; | + | { |
+ | position: absolute; | ||
+ | top: 115px; | ||
width: 200px; | width: 200px; | ||
+ | bottom: 30px; | ||
} | } | ||
Line 88: | Line 98: | ||
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;} | ||
Line 96: | Line 107: | ||
=== Vorlage === | === Vorlage === | ||
- | FIXME | + | |
+ | Im Seitenlayout wird unter **Seitenaufbau:** die Einstellung **[x] CSS DIV** gewählt. | ||
+ | |||
+ | Dann greifen automatisch die folgenden CSS-Klassen aus der frontend.css: | ||
+ | |||
+ | #container | ||
+ | #headerBlock | ||
+ | #mainBlock | ||
+ | #leftBlock | ||
+ | #rightBlock | ||
+ | #footerBlock | ||
+ | |||
+ | In der Vorlage werden folgende Bereiche verwendet: | ||
+ | |||
+ | Kopfzeile | ||
+ | Haupt | ||
+ | Fußzeile | ||
+ | links | ||
+ | rechts | ||
+ | |||
+ | In diesen Bereichen werden die Content-Platzhalter | ||
+ | {HEADER} | ||
+ | {CONTENT} | ||
+ | {FOOTER} | ||
+ | {LEFT} | ||
+ | {RIGHT} | ||
+ | |||
+ | verwendet. | ||
+ |