Strict Standards: Declaration of action_plugin_dlcount::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/dlcount/action.php on line 14

Strict Standards: Declaration of action_plugin_indexmenu::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/indexmenu/action.php on line 169

Strict Standards: Declaration of action_plugin_ipban::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/ipban/action.php on line 67

Strict Standards: Declaration of action_plugin_loglog::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/loglog/action.php on line 82

Strict Standards: Declaration of action_plugin_navi::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/navi/action.php on line 46

Strict Standards: Declaration of action_plugin_uparrow::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/uparrow/action.php on line 69

Strict Standards: Declaration of action_plugin_userspagecreate::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/userspagecreate/action.php on line 97

Strict Standards: Declaration of cache_instructions::retrieveCache() should be compatible with cache::retrieveCache($clean = true) in /home/www/wiki/inc/cache.php on line 289

Warning: Cannot modify header information - headers already sent by (output started at /home/www/wiki/lib/plugins/dlcount/action.php:14) in /home/www/wiki/inc/auth.php on line 312

Strict Standards: Only variables should be passed by reference in /home/www/wiki/doku.php on line 71

Warning: Cannot modify header information - headers already sent by (output started at /home/www/wiki/lib/plugins/dlcount/action.php:14) in /home/www/wiki/inc/actions.php on line 154
kukkis: 2 Spalten, feste Breite, var. Höhe [phpwcms-HowTo:wiki]

Strict Standards: Declaration of syntax_plugin_code::render() should be compatible with DokuWiki_Syntax_Plugin::render($format, &$renderer, $data) in /home/www/wiki/lib/plugins/code/syntax.php on line 41

Strict Standards: Declaration of syntax_plugin_tip::render() should be compatible with DokuWiki_Syntax_Plugin::render($format, &$renderer, $data) in /home/www/wiki/lib/plugins/tip/syntax.php on line 38

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

Strict Standards: Only variables should be assigned by reference in /home/www/wiki/inc/JpegMeta.php on line 999

kukkis: 2 Spalten, feste Breite, var. Höhe

Anforderung:

  • Header soll am obersten Rand der Viewport stehen. (115px)
  • Left und Main sollen optisch nebeneinander stehen
  • Der Scrollbalken soll dynamisch im Main erzeugt werden, falls gewünscht, wie im Beispiel.
  • Footer soll untem im Viewport stehen. (20px)
  • Bei F11-Taste soll die Konstruktion sich diesem Bildschirm automatisch anpassen.

Gewählt habe ich eine feste Breite von 980px, so dass 1024 x YYY bedient werden kann.

CSS

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:

header/ Vorlage

<!--[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 einen eigen spaltengerechten Hintergrund ohne Tricksereien mit Faux Columns verpassen */
#leftBlock { height: expression((document.body.clientHeight-157) + "px");}
  </style>
<![endif]-->

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!

selbstzentrierende Seite 980px breit, 100% hoch

/* selbstzentrierende Seite 980px breit, 100% hoch*/
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    min-width: 100%;     }
 
/* der komplette Bildschirmbody */
body{
  margin: 0;
  padding: 0;
  overflow:hidden;  /*weg ist der Scrollbalken*/
    }
 
#container { position: absolute;
       background-color: #006400;
       margin: 0px 0px 0px -490px;
       left: 50%;
       width: 980px;   /* Breite der gesamten Website */
       height:100%;  /* sichtbare Hoehe der Website */
       }
 
#headerBlock {
  height: 115px;
  margin: 0;
  background: #FF9F9F ;
  }
 
#mainBlock {
  position: absolute;
  background-color: #ffff99;
  top: 115px;
  bottom: 30px;
  right: 0;
  padding: 5px 15px 5px 5px;
  margin-left: 220px;
  overflow: auto;  /*Scrollbalken nur für den #mainBlock*/
  }
 
#leftBlock
  {
  position: absolute;
  top: 115px;
  width: 200px;
  bottom: 30px;
  }
 
#footerBlock {
  position: absolute;
  bottom: 2px;
  text-align: left;
  color: #ffffff;
  width: 980px;
  height: 30px;
  margin: 0;
  padding: 0;
  background-image: url(/picture/Fuss.jpg);
  background-repeat: repeat-x;
  }
#footerBlock a{ color:#f2f2f2;}

2spalten_feste-breite_var-hoehe_01.jpg

Vorlage

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.txt · Last modified: 2013/06/22 11:11 by Burkhard Otto
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

Strict Standards: Only variables should be passed by reference in /home/www/wiki/doku.php on line 79