2 Spalten Layout feste Breite, variable Höhe

[claus]

Mensch Kukki, zu Yaml muss doch niemand greifen, nur um prima Seiten in jedweder Manier zu erstellen, seien sie nun
100% hoch / mit oder ohne Scrollbalken, sich erweiternd bei wachsendem Content, mit Borders, Schatten oder ohne oder watte willst
Man kann zu Yaml greifen, das allerdings... aber das Ding ist so verquarzt und verpieselt, da muss man sich -so wie Ralph- schon mal mit rumhauen...

Da musst Du selber basteln.

Genau! Aber zum Glück gibt's da schöne Vorlagen und HowTos im Web....

Und dann noch'n Link zu einem prima Beispiel (musst Du allerdings (siehe oben) selber Deinen 2-Spalter reinfummeln):
http://www.cssplay.co.uk/layouts/bodyfix.html

[Heiko H.]

...zu Yaml muss doch niemand greifen...

Genau!
Ich versteh den ganzen Yaml-Hype auch nicht so recht (Ralph, das geht überhaupt und gar nicht an deine Adresse!!!).
Wie claus schon so richtig meinte, selbst ist der "Mann"! Da lässt sich meist mit nicht einmal halb soviel Code eine individuelle Lösung stricken, die auch nach Jahren noch nachvollziehbar/pflegbar ist.
Wer sich heute noch als Tabellen-Fan und CSS-Muffel bezeichnet sollte mal ernsthaft nachdenken, ob er das richtige Business gewählt hat!!!

Viel Erfolg beim Basteln...

[Jensensen]

FULL ACK

ich kann nur JEDES Wort beider Vorredner unterstreichen.
Und dachte, da ich mir selbst mehrfach bei diesem Thema mindestens die Finger verbrannte, hier seien nur noch "hilflos abhängige jamelianer" unterwegs. Streckenweise endete jeder zweite Thread jedenfalls mit dieser Empfehlung und gleichermaßen mit der gnädigen Danksagung, noch einmal vor dem Ertrinken gerettet worden zu sein. (was auch daran liegt, dass gegenwärtig kaum {num/stat} noch Threads mit wirklich neuen, wichtigen oder gar spannenden Themen erscheinen. So ein CSS-Kram ist schlichtweg tediously boring und kann in geschätzten 7.893.556 artikeln, blogs, tutorials, die aus geschätzten 23 quellen zitieren, nachgelesen werden.)

Vermutlich korreliert das mit den {Hauptsache} kostenlosen Schneeflocken-Scripts allerorts, die - ohne die Birne einzuschalten - nach maximal 2 Klicks bereits Ergebnisse zeigen, auf jeder Site schnell hingefriemelt werden können, unter HTML funktionieren, aber nicht mit XHTML.

Und dann, im zweiten Schritt, also wenn die Problemchen anfangen, dann kann man in einem Forum fragen oder die nächstbeste Alternative suchen und probieren (Puah, viel zu viel Arbeit).


Bitte nicht falsch verstehen!
kukki kniet sich ja wenigstens noch rein und arbeitet dran (die activeuser hier auch!).
Auch santscho hat sich mächtig viel Arbeit gemacht (s.o. "jedes Wort").

[edit#8] ||| nix raff override ||| [/edit]


Bis dahin alles ganz normal.

Aber die Leserschaft hier, ist doch arg klein geworden. Hoffentlich, nein, ganz bestimmt hilft es noch kukki. Wenn Du dem Tipp von claus folgtest, könntest Du morgen Mittag bereits schon mit Deinem Sohnemann im Schnee rodeln, oder so ähnlich.

Enttäuschender und überschaubarer aber ist die Zahl derer, die noch, im als "MuppetShow" bezeichneten Forum, durch von jeder Taktik losgelöster Hilfsbereitschaft glänzen - also nicht nur fragen, sondern wenigstens gelegentlich auch mal eine Antwort beisteuern.


Und da der Thread, bei dem ich mich zuletzt eingemischt hatte, nun abgeschlossen zu sein scheint, bin ich dann mal weg, surfe hinab und stoße im Internet zu neuen Sektoren vor, die nie ein Mensch zuvor gesehen hat.

engage
-

[santscho]

Wie schon zu Anfang erwähnt...

Vielleicht hilft Dir das bei Deinen Experimenten mit "voller Höhe"

...Das Ding mal runterladen, mit einem DOM-/CSS/-HTML-Inspektor untersuchen und einfach mal gucken, wie das gelöst wurde, damit es in jedem Browser hinhaut. Das Template muss am Schluss nicht YAML sein!

Und dann noch'n Link zu einem prima Beispiel (musst Du allerdings (siehe oben) selber Deinen 2-Spalter reinfummeln):

... Und den hässlichen Scrollbalken im Layout würde ich an den Browserrand verbannen.

Und hier noch die Links zu anderen Layouts auf cssplay
http://www.cssplay.co.uk/layouts/layout.html
http://www.cssplay.co.uk/layouts/body5.html
http://www.cssplay.co.uk/layouts/body2.html
http://www.cssplay.co.uk/layouts/body4.html

Einfach inspirieren lassen. Vereinzelt sind auch die Layouts auf CSSPLAY kostenpflichtig (kommerziell eingesetzt). ... wie das meiste CSS auf dieser Website
Ausserdem muss immer eine Bewilligung eingeholt werden. Ach! Ist das schön

[flip-flop]

U.U. funktionieren diese Layouts in phpwcms nicht durchgängig:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

außer man patcht die include/inc_lib/default.inc.php

Original (ab Zeile ~ 124):

Code: Select all

if(empty($phpwcms['mode_XHTML'])) {

   define('PHPWCMS_DOCTYPE', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'.LF.'<html{DOCTYPE_LANG}>'.LF.'<head>'.LF);
   define('SCRIPT_CDATA_START', '  <!-- ');
   define('SCRIPT_CDATA_END'  , '  //-->');
   define('HTML_TAG_CLOSE'  , '>');
   define('XHTML_MODE', false);
   define('PHPWCMS_DOCTYPE_LANG', ' lang="{DOCTYPE_LANG}"');
   
} else {

   define('PHPWCMS_DOCTYPE', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'.LF.'<html xmlns="http://www.w3.org/1999/xhtml"{DOCTYPE_LANG}>'.LF.'<head>'.LF);
//   define('SCRIPT_CDATA_START', '  /* <![CDATA[ */');
//   define('SCRIPT_CDATA_END'  , '  /* ]]> */');
   define('SCRIPT_CDATA_START', '  <!-- ');
   define('SCRIPT_CDATA_END'  , '  //-->');
   define('HTML_TAG_CLOSE'  , ' />');
   define('XHTML_MODE', true);
   define('PHPWCMS_DOCTYPE_LANG', ' xml:lang="{DOCTYPE_LANG}" lang="{DOCTYPE_LANG}"');

}

$phpwcms["release"] = '1.4.0';
$phpwcms["release_date"] = '2008/12/04';

Neu:

Code: Select all

if(empty($phpwcms['mode_XHTML'])) {

   define('PHPWCMS_DOCTYPE', '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">'.LF.'<html{DOCTYPE_LANG}>'.LF.'<head>'.LF);
   define('SCRIPT_CDATA_START', '  <!-- ');
   define('SCRIPT_CDATA_END'  , '  //-->');
   define('HTML_TAG_CLOSE'  , '>');
   define('XHTML_MODE', false);
   define('PHPWCMS_DOCTYPE_LANG', ' lang="{DOCTYPE_LANG}"');
   
} else {
   switch ($phpwcms['mode_XHTML']) {
   case 1:
   define('PHPWCMS_DOCTYPE', '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'.LF.'<html xmlns="http://www.w3.org/1999/xhtml"{DOCTYPE_LANG}>'.LF.'<head>'.LF);
//   define('SCRIPT_CDATA_START', '  /* <![CDATA[ */');
//   define('SCRIPT_CDATA_END'  , '  /* ]]> */');
   define('SCRIPT_CDATA_START', '  <!-- ');
   define('SCRIPT_CDATA_END'  , '  //-->');
   define('HTML_TAG_CLOSE'  , ' />');
   define('XHTML_MODE', true);
   define('PHPWCMS_DOCTYPE_LANG', ' xml:lang="{DOCTYPE_LANG}" lang="{DOCTYPE_LANG}"');
   break;
   
   default:
   define('PHPWCMS_DOCTYPE', '<?xml version="1.0" encoding="'.PHPWCMS_CHARSET.'"?>'.LF.'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'.LF.'<html xmlns="http://www.w3.org/1999/xhtml"{DOCTYPE_LANG}>'.LF.'<head>'.LF);
   define('SCRIPT_CDATA_START', '  /* <![CDATA[ */');
   define('SCRIPT_CDATA_END'  , '  /* ]]> */');
//   define('SCRIPT_CDATA_START', '  <!-- ');
//   define('SCRIPT_CDATA_END'  , '  //-->');
   define('HTML_TAG_CLOSE'  , ' />');
   define('XHTML_MODE', true);
   define('PHPWCMS_DOCTYPE_LANG', ' xml:lang="{DOCTYPE_LANG}" lang="{DOCTYPE_LANG}"');
   }
}

$phpwcms["release"] = '1.4.0';
$phpwcms["release_date"] = '2008/12/04';

Nun gibt es in der conf.inc.php einen neuen Schalter:

$phpwcms['mode_XHTML'] = 1; // Doctype: 2 = XHTML 1.0 Strict, 1 = XHTML 1.0 Transitional, 0 = HTML 4.01 Transitional

Knut

[kukki]

Ich habs mir ja nur angeschaut, weil damit auch ein solches Layout (rein optisch) mit dem Yaml-Builder erstellt werden konnte ....
aber zufrieden war ich mit dem Ergebenis auch nicht.
Im Moment ist bei mir erst einmal die Lu(f)st raus, weil der IE6 meine Ideen über den Haufen (#mainBlock) geschmissen hat. Ich habe zwar solche
Layouts schon mal für BS-Formatfüllend gemacht, aber bei einem 16:9 Format wird die ganze Sache unansehlich und schwer leserlich/
überschaubar.

Aufgegeben habe ich nicht , nur es liegen momentan so viele andere Sachen an, dass ich mich damit erst wieder beschäftige,
wenn die Zeit dafür da ist. Es sei denn, einer von Euch hat sofort den Kasus-Knacktus gesehen hat und kann mir sagen, was da noch
zu ändern ist.

[kukki]

Genau!
.... selbst ist der "Mann"! Da lässt sich meist mit nicht einmal halb soviel Code eine individuelle Lösung stricken, die auch nach Jahren noch nachvollziehbar/pflegbar ist.
Wer sich heute noch als Tabellen-Fan und CSS-Muffel bezeichnet sollte mal ernsthaft nachdenken, ob er das richtige Business gewählt hat!!!

Viel Erfolg beim Basteln...

Ich kann hier nur zustimmen, ohne einen Kompass und einer Karte ist nach einem Jahr eine solche Website wieder ein Buch mit sieben Siegeln. Deswegen schon bin ich an einer eigenen Lösung interessiert, nur wenn die Luft erst einmal raus ist, muß man halt welche Tanken, wo ist hier die nächste Tanke?

[kukki]

2. Experiment:
nach dem ersten lehrreichen Test (wo nur FF, OP und Safarie erfolgreich waren) habe ich mich heute in einer Schaffensphase mit dem Thema noch einmal befasst.
Zur Wiederholung:
Header soll am obersten Rand der Viewport stehen. (115px)
Left und Main sollen nebeneinander stehen in einem Container. Meine spezielle Lösung - ich stehe halt drauf - der Scrollbalken soll dynamisch im Main erzeugt werden, falls notwendig.
Footer soll untem im Viewport stehen. (20px)
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.

PS.: Kleine Warnung, wer auf seinem PC IE7 standardmäßig installiert hat, wird mit "multiple IEs" seine Überraschung erleben, weil viele Anforderungen an den IE6 einfach durch den IE7 erledigt werden. Es bietet sich dann besser an den IE6 standardmäßig noch auf dem Rechner zu haben. Ich habe diese Erfahrung auch machen müssen. erst als ich meinen alten Laptop mit 'nem IE6 an mein Heimnetz angeschlossen habe, fiel es mir wie Schuppen aus den Haaren!

Folgende Lösung hat bisher einem Test standgehalten und sich stabil verhalten:

Code: Select all

/* selbstzentrierende Seite 984px breit, 100% hoch*/
html, body {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    min-width: 100%;     }

/* der komplette Bildschirmbody */
body{
  margin: 0;
  padding: 0;
  background: #123456;
  }

#container { position: absolute;
       background: #006400;
       margin: 0px 0px 0px -490px;
       left: 50%;
       width: 984px;   /* Breite der gesamten Website */
       height:100%;  /* sichtbare Hoehe der Website */ 
       }

#headerBlock {
  height: 115px;
  margin: 0;
  background: #FF9F9F ;
  }

#mainBlock {
  position: absolute;
  background: #ffff99;
  top: 117px;
  bottom: 30px;
  right: 0; 
  width: 780px;
  padding: 5px 15px 5px 5px;
  margin-left: 220px;
  overflow: auto;
  /* -------------------------------------- nur mit diesen JavaScript-Einstellungen bleibt der IE6 stabil ---------------------------- */
    height: expression((document.body.clientHeight-157) + "px");
    /*width:  expression((document.body.clientWidth-525) + "px");*/   <-- wird nicht benötigt [IE6,7] ...dafür width angeben! [EDIT: 22.12.]
                 }

#leftBlock
  {
  position: absolute;
  width: 200px;
  bottom: 30px;
  height: expression((document.body.clientHeight-157) + "px");   <-- wird benötig, so dass leftBlock mit separaten Hintergrund bis zum footerBlock reicht [EDIT: 22.12.2008]
  }


#footerBlock {
  position: absolute;
  bottom: 2px;
  text-align: left;
  color: #ffffff;
  width: 984px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: url(/picture/Fuss.jpg) repeat-x;
  }
#footerBlock a{ color:#f2f2f2;}