2 Spalten Layout feste Breite, variable Höhe

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
User avatar
update
Moderator
Posts: 6386
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by update » Sat 13. Dec 2008, 22:33

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...
santscho wrote: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
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by Heiko H. » Sat 13. Dec 2008, 23:20

claus wrote:...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. :idea:
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... :mrgreen:
Not longer here - sorry...

Haubner-IT GbR Dresden

User avatar
Jensensen
Posts: 2994
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by Jensensen » Sun 14. Dec 2008, 01:18

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
-
Last edited by Jensensen on Sun 14. Dec 2008, 03:49, edited 8 times in total.
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.

User avatar
santscho
Posts: 1368
Joined: Mon 2. Apr 2007, 08:56
Location: Singapore
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by santscho » Sun 14. Dec 2008, 02:07

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 :lol:
Ausserdem muss immer eine Bewilligung eingeholt werden. Ach! Ist das schön :D
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by flip-flop » Sun 14. Dec 2008, 11:33

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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

User avatar
kukki
Posts: 1663
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by kukki » Mon 15. Dec 2008, 18:47

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. :mrgreen:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
kukki
Posts: 1663
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by kukki » Mon 15. Dec 2008, 18:52

Heiko H. wrote: 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. :idea:
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... :mrgreen:
Ich kann hier nur zustimmen, ohne einen Kompass und einer Karte ist nach einem Jahr eine solche Website wieder ein Buch mit sieben Siegeln. :shock: 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? :mrgreen:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
kukki
Posts: 1663
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by kukki » Thu 18. Dec 2008, 16:48

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 :mrgreen: - 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;}
Image
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
kukki
Posts: 1663
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by kukki » Tue 23. Jun 2009, 08:50

:idea: Zur Verbesserung der Konformaität habe ich mit dem oben vorgestellten Layout ein wenig rumgespielt und experimentiert. Bei der CSS-Validierung wird immer die Kombination

Code: Select all

    height: expression((document.body.clientHeight-157) + "px");
bemeckert.
Ergo muß diese Kombination ausgelagert werden und erst geladen werden, wenn wirklich der IE6 benutz wird - eine Browserweiche muß her :) Wenn man den nachfolgenden Code

Code: Select all

<!--[if lt IE 7]>
  <style type="text/css">
#mainBlock { height: expression((document.body.clientHeight-190) + "px");}
#leftBlock { height: expression((document.body.clientHeight-180) + "px");}
  </style>
  <![endif]-->
in den Header verbannt und nur das aktiviert, was auch gebraucht wird (#mainBlock, #leftBlöock, #rightBlock), ist die CSS-Validierung perfekter. :!:
So habe ich am Beispiel unseres Wohngebietes diese Browserweiche zum Einsatz gebracht und das sich an die Viewporthöhe anpassende Layout verbessert. Die Validierung von W3C zeigt keinerlei Warnungen oder Fehler mehr! :mrgreen: :D 8)
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
kukki
Posts: 1663
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: 2 Spalten Layout feste Breite, variable Höhe

Post by kukki » Wed 15. Jul 2009, 09:32

Für ein spezielles Design-Problem zu diesem Template findet man hier einen Lösungsvorschlag!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

Post Reply