Page 1 of 2

2 Spalten Layout feste Breite, variable Höhe

Posted: Mon 24. Nov 2008, 19:46
by kukki
Eigentlich ist das Thema nicht so neu, aber es ist für CSS-Muffel :mrgreen: schwer eine Lösung für alle gängigen Browser (FF, OP, SF und IE5.5, 6 und 7) konform auf die Reihe zu kriegen.
Angestachelt durch die kleine Ideendiskussion bei meiner neueren Website habe ich mir dazu Gedanken gemacht, wie man das meinige dort sichtbare Layout (980x580) für größere Monitore/ Auflösungen flexibler macht.
Heute habe ich eine basic_Lösung dafür entwickelt, die man noch verfeinern kann, aber den Grundstock für ein Website-Layout mit fester Breite und variabler Höhe legt, wo der Header fest am oberen Bildschirmrand klebt, der Footer am unteren Bildschirmrand und der mainBlock (und leftBlock) mit fester Breite und varibaler Höhe sich dem Bildschirm automatisch anpasst.

Image
[EDIT03.12.08; 13:30 - headerBlock ergänzt mir position: relative; dadurch können Elemente im Header absolute psotioniert werden ...
Mit einer sinnvollen Verknüpfung von SwitchCSS kann man dann das übliche Layout mit diesem kombinieren und erhält somit eine vom User einstellbare Lösung:

Code: Select all

html {
    height:100%;
    max-height:100%;
    padding:0;
    margin:0;
    border:0px none;
    background:rgb(209,205,193);
    font-size:76%;
    font-family:verdana, arial, georgia, times new roman, serif;
    /* hide overflow:hidden from IE5/Mac */
    /* \*/
    overflow: hidden
    }

body {
    height:100%;
    max-height:100%;
    overflow:hidden;
	padding:0;
	margin:0;
	border:0px none;
	background-color: #006400;
	}
..........
#container {
  width: 980px;
  height:100%;
  background-color: #cccccc;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;   }

#headerBlock { position: relative;
	width:980px;
	min-width:980px;
	height:150px;
	font-size:1em;
	background-color: #c0c0c0;
}
* html #head {  	top:2px; width:978px; height:148px; 	}

/* ************************* HauptBlock ************** */
#mainBlock {  display:block;
	overflow:auto;
	position:absolute;
	z-index:3;
	top:150px;
	bottom:30px;
	width:785px;
        margin-left: 190px;
        padding: 5px 0 5px 5px;
	border-left:1px solid #000;
	border-right:1px solid #000;
	background:#fff;
 }

* html #mainBlock{
    top:0;
	bottom:0;
	height:100%;
	width:980px;
	border-top:154px solid #fff;
	border-bottom:50px solid #fff;     }

#footerBlock { clear: both;
        color: #ffffff;
	text-align:center;
	position:absolute;
	bottom:0;
	width:980px;
	min-width:980px;
	height:30px;
	background:#006400 url('heading.jpg') 0 100px; font-size:1em;
	z-index:5;
	border:1px solid #000;
	font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
	font-weight:bold;
	}

* html #footerBlock {
	bottom:2px; width:980px; height:30px;
	}

Re: 2 Spalten Layout feste Breite, variable Breite

Posted: Mon 24. Nov 2008, 20:20
by juergen
Hallo kukki

Passt jetzt wirklich fast garnicht nach hier, aber Schlawiner schreibt man ohne 'e', sonst geht der Leser hier http://www.jg300.de/29.99.0.0.1.0.phtml in den Quirks Mode :wink:

Da ich Süddeutscher bin , kenn ich mich aus mit Schlawinern .. :lol:

Re: 2 Spalten Layout feste Breite, variable Breite

Posted: Mon 24. Nov 2008, 20:38
by kukki
Dann klick doch mal auf das erste Vorschaubildchen und wunder Dich, was da steht! :lol: :lol: :lol:

Image

Das hab ich mir nicht ausgedacht! :mrgreen: ... gar nicht schreibt man gar nicht zusammen .... alte Eselsbrücke, die Deutsche Sprache ist schon komisch....gucks Du!

Re: 2 Spalten Layout feste Breite, variable Breite

Posted: Mon 24. Nov 2008, 20:40
by juergen
Ok ok .. denke der Maler der Schrift dürfte in den ewigen Jagdgründen sein :lol:

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

Posted: Mon 24. Nov 2008, 20:43
by kukki
Davon habe ich noch mehr auf dieser Seite wie "schwarzer Panter" und so weiter. :lol:

Aber für die anderen, das war ein privater Plausch, jetzt gehts ans CSS!

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

Posted: Mon 24. Nov 2008, 22:39
by Jensensen
palatino linotype
hat auch nicht jeder.

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

Posted: Thu 27. Nov 2008, 23:35
by Jensensen
...
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden
biste sicher, dass das stimmt und benötigt wird :wink:
na ja, ich hab den noch... :wink:
und was dort funzt, funzt ja [meist] auch im IE6 win :wink:
/* click-clack \*

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

Posted: Sun 30. Nov 2008, 11:57
by kukki
@Jensensen ...
funktioniert schon, habe einen Freund gefragt, der mit MAC arbeitet.

Zur Demo kannst Du gerne unter meiner historischen Website http://www.beuteflugzeuge.de zuschauen, weil ich das ganze System HEUTE(!) umgerubelt habe. 40 Min. dauerte das Upgrade von 1.3.1. auf 1.3.9 (r273) incl der neuen frontend.css. Es sind zwar noch das Layout anzupassen, aber es funktioniert erst einmal in allen IE-Versionen und FF und OP und SF ... was will ich erst einmal mehr? :mrgreen:
Auf meinem breiten 16:9-Monitor sieht die ganze Sache schon gut aus. Ob man nun die komplette Seite scrollen muß, um die Informationen alle sehen zu können ( :( ) oder nur dern wichtigen mainBlock ( :) ) .... letzteres gefällt mir besser, weil damit das Banner, das Menü, das Impressum etc. IMMER sichtbar sind, die Seite nicht so zappelt und damit auch Ruhe bringt. Es ist (psycologisch erwiesen!) beruhigender und weniger stressig für Auge und Kopf und die Verweilzeiten lassen sich damit erhöhen. Jeder Besucher sieht sofort Wo bin ich, WOHIN kann ich gehen, WEM gehört die Seite, Wo ist ein Kontakt möglich ... Was jeder dann daraus macht, ist jedem seine Sache.

Wenn das CSS-Template keine weiteren schwerwiegenden Probleme macht, kann es schon sein, dass dieses neue Template mein Standard für die Zukunft sein wird, wie es bisher des feste Layout 984x584 war. :wink:

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

Posted: Thu 4. Dec 2008, 16:03
by AnnaK
Besten Dank für dieses Basic. Ich hab's mal auf localhost ausprobiert und es hat auf Anhieb funktioniert. Natürlich sind da noch Verbesserungen dran zu machen, je nachdem, wie man es braucht. Ich habe beim Rumspielen mit phpwcms dieses SIMPLE BASIS CSS mit Deiner Lösung getauscht. :)
Was mir noch nicht so richtig gefällt - Du positionierst den mainBlock absolute. Entstehen damit nicht Probleme? Warum nicht mit float:left/ right :?:

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

Posted: Sat 6. Dec 2008, 20:49
by santscho
Hallo Kuki

Vielleicht hilft Dir das bei Deinen Experimenten mit "voller Höhe"
http://www.yaml.de/fileadmin/examples/0 ... eight.html

Grüsse
Ralph

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

Posted: Sat 6. Dec 2008, 22:59
by G-Punkt
santscho wrote: Vielleicht hilft Dir das bei Deinen Experimenten mit "voller Höhe"
http://www.yaml.de/fileadmin/examples/0 ... eight.html
Also mir hilfts ungemein... Das ist aber sowas von haargenau das was ich gesucht habe bzw. selber versucht habe umzusetzen: liquid width und der #footer immer janz weit unten :wink:


Vielen Dank...

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

Posted: Sun 7. Dec 2008, 03:07
by santscho
Wichtige Hinweise, Tips und Tricks zu diesem Layout im YAML-Forum beachten. ist nämlich ein Sonderfall. Ich würde äusserst vorsichtig mit Modifikationen und Eigenkreationen umgehen.

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

Posted: Fri 12. Dec 2008, 15:41
by kukki
Yaml hat schon was, klar - aber es ist halt ein für mich nicht so einfach überschaubares CSS-System, wo man erst einmal von der Fülle, den Hacks und Varianten erschlagen wird. Ich habe mal zu Anfangszeiten des Yaml probiert mitzuhalten und versucht, in den CSS-dateien ein wenig Hand anzulegen, weil ich etwas andere Lösungen haben wollte. Jetzt benutze ich es nur noch als Vorlage zum Lernen, incl. dem dazugehörigen Buch .... :mrgreen: :wink:

PS.: Ich vergaß .... dieses 2-Spalten-Layout macht noch Probleme mit dem IE6 (ohne Servicepack) ... ich arbeite aber dran! :mrgreen:

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

Posted: Sat 13. Dec 2008, 19:24
by kukki
Heul, heul .... :( :x :oops:

Ich muß gestehen, innerhalb NUR IE7 und FF, OP und SF-Browser funktionierte mein Template suuuper, nur der schei ... IE6 schmeist alles über den Haufen, ohne
width: expression
wird man der Sache nicht Herr. :evil: :evil: :evil:
Aber irgendwie wurmt mich die Sache doch, denn ich möchte das Layout so haben, dass Navig, Header und Footer fest stehen und nur im Mainbereich gescrollt wird .... der Biene muß, eben wie bisher (unterAusschluß IE6)

Lauf Statistik werden alle meine Seiten, die ich mit einem Statiktikmodul versehen habe, immer noch von knapp 25% mit diesem Teil besucht, auf diese kann ich (man) heutzutage nicht verzichten.
Image

Ergo ... habe ich mein Wochenende für YamlIt verplant. Kann ich nur empfehlen, ich habe mich zwar immer vor gedrückt (siehe oben) aber mit dem YamlBuilder zusammen ist eine Template schnell zusammengestellt, dass dann auch noch funktioniert ( :?: schaun wa mal).
Tut mir leid AnnaK, aber ich glaube, wenn Du auf diese Leute verzichten kannst ist die Sache schon o.k., aber leider werden wir uns auch 2009 damit rumärgern .... oder doch zu Yaml greifen. :idea:

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

Posted: Sat 13. Dec 2008, 19:46
by santscho
Achtung Kukki! Dieses Layout kann nicht vom YAML-Builder generiert werden. Da musst Du selber basteln. Zum Glück ist das Template schon fertig in YAML vorhanden und im Forum gibts Hinweise, wie man das Ganze anpassen kann. Selber habe ich mich noch nicht damit beschäftigt. Viel Erfolg.