Differences

This shows you the differences between two versions of the page.

deutsch:templates:2-spalten-feste-breite-variable-hoehe [2009/06/23 12:48]
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 21: Line 21:
Folgende Lösung hat bisher einem Test standgehalten und ist stabil und mit nachfolgenden Codezeilen CSS-konform: Folgende Lösung hat bisher einem Test standgehalten und ist stabil und mit nachfolgenden Codezeilen CSS-konform:
-/* diesen Codeschnipsel in den Header der Vorlage einstellen: */+--> diesen Codeschnipsel in den Header der Vorlage einstellen: 
 + 
 +<code header/ Vorlage |h header/ Vorlage |h>
<!--[if lt IE 7]> <!--[if lt IE 7]>
  <style type="text/css">   <style type="text/css">
#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 #leftBlock einen eigen spaltengerechten Hintergrund ohne Tricksereien mit Faux Columns verpassen */
-  /* Vorteil: Man kann dem leftBloch einen eigenen Hintergrund ohne Trickereien verpassen */+
#leftBlock { height: expression((document.body.clientHeight-157) + "px");} #leftBlock { height: expression((document.body.clientHeight-157) + "px");}
  </style>   </style>
<![endif]--> <![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> <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 46: 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 64: 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 86: 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 94: 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.  
 + 
deutsch/templates/2-spalten-feste-breite-variable-hoehe.1245754081.txt.gz · Last modified: 2018/06/03 18:07 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0