Zusätzliches DIV einschleusen

Strahlemann · Post by **Strahlemann** » Fri 20. Jul 2007, 11:50

Liebe PHPWCMS Gemeinde!

Ich arbeite gerade an folgender Seite http://at.camps4you.com

Mein Problem bei dieser Seite ist, dass die Höhe der Seite durch den Inhalt definiert werden soll - was wiederum ein Problem mit den Hintergrundgrafiken Links und/ oder Rechts mit sich bringt, da diese ab Zeile 25 nicht mehr weiter aufgebaut werden (siehe Link).

Jetzt möchte ich gerne mit fauxcolumns arbeiten was aber bedeutet, dass ich {Header}, {Left}, {Content} und {Right} in ein zusätzliches DIV einfassen muss um diesem den Hintergrund zuzuweisen.

Wo finde ich das dazugehörige Template um diese Verschachtelung hinzubekommen?!?

Die Container Links und Rechts sind derzeit folgendermaßen definiert:

Code: Select all

min-height : 400px;
margin : 0;
background-image : url(../../img/layout/nav_left_filler.gif);
background-repeat : repeat-y;

LG. Lukas

pico · Post by **pico** » Fri 20. Jul 2007, 11:54

What's up, good People?

schau mal da http://www.phpwcms.de/forum/viewtopic.php?p=89475#89475
bezieht sich zwar auf YAML, aber im Prinzip ist das vorgehen das gleiche

Post by **flip-flop** » Fri 20. Jul 2007, 11:57

Und richtig sauber ohne hacks: http://www.brunildo.org/test/threecols.html Absolut robust und gut Kommentiert.
Wenn du YAML und dieses Template durchgearbeitet hast, dann bist du ziemlich weit vorne was css angeht.

Knut

pico · Post by **pico** » Fri 20. Jul 2007, 12:01

What's up, good People?

nur zur Klarstellung - YAML kann wie dort (obiger Link) beschrieben OHNE Hacks verwendet werden. Der Hack im unteren Bereich des Postings ist eigentlich an OG gerichtet, evtl. YAML als festen Layout-Typ einzubauen.

Strahlemann · Post by **Strahlemann** » Fri 20. Jul 2007, 12:07

Dankeschön!
Wer mal gleich versuchen zu basteln...

Post by **flip-flop** » Fri 20. Jul 2007, 12:09

Ja, jetzt sehe ich es auch.

Trotzdem halte ich Brunildo´s Variante für die bessere. Schließlich hat Dirk auch von ihm gelernt.
"Big John" Piefecta und Brunildo darf man zu den Pionieren und Richtungsgebern in diesem Bereich zählen.

pico · Post by **pico** » Fri 20. Jul 2007, 12:28

@flip-flop

ja - im Prinzip hast Du ja recht, aber ich bevorzuge das Framework von Dirk

da ist alles schön zusammen und innerhalb von 10 Minuten (OK man muss es erst einmal verstehen) hat man ein stabiles und Browserübergreifendes Layout aus dem Hut 'gezaubert'

Post by **flip-flop** » Fri 20. Jul 2007, 13:45

@pico: Ist absolut richtig, nur eben auch mit dem ganzen Drumherum das mitgeschleppt wird. Schlank ist etwas anderes.
Außerdem sehen die Seiten, basierend auf dem YAML Framework, für mich irgendwie alle gleich aus.
Das liegt aber wohl eher am Seitenersteller, da so ein Teil ja recht schnell zusammengabaut ist.

pico · Post by **pico** » Fri 20. Jul 2007, 16:48

@flip-flop

ob's daran liegt, dass die meisten halt keine Designer sind - so wie ich z.B. auch nicht - also wird das bestehende etwas farblich 'umdekoriert' und gut iss

Aber habe letzens einen Grafiker Entwurf mit YAML umgesetzt - und auch das ging recht flott, auf jedenfall schneller, als wenn man die Klassen alle selber bauen und vor allem testen muss.

Ach und die 3er ist wesentlich schlanker und übersichtlicher geworden. Und wenn man fertig ist sollte man natürlich die nicht benötigten Dateien und ggf. Klassen löschen.

Post by **juergen** » Fri 20. Jul 2007, 17:18

da hat er jetzt recht der good people Horst

Yaml 3 ist richtig schön aufgeräumt ....

Jensensen · Post by **Jensensen** » Fri 20. Jul 2007, 20:51

jetzt habt ihr mich neugierig gemacht. yaml >2.5.x war sehr überfrachtet und zudem nicht sehr verlässlich:

probleme in safari und IE 5.5 (alter mac browser) aber da ging gar nix.

hilfreicher und lobenswerter ansatz,
aber einfach too much code. braucht's nicht, um in allen (halbwegs) modernen browsern sauber exakt zu laufen.

übrigens werden fonts im FF immer n ticken kleiner dargestellt, egal ob Win oder Mac oder....

das ist beispielsweise etwas, wobei dir YAML nicht helfen kann.

wenn man identische sites in allen plattformen und browsern haben will, brauchts deutlich weniger code...

aber die 3er schau ich mir mal an...
(wusst ich gar nicht, das d.j. schon sooo weit ist...)

greetz

schönes WE

Strahlemann · Post by **Strahlemann** » Sat 21. Jul 2007, 23:24

flip-flop wrote:Ja, jetzt sehe ich es auch.
Trotzdem halte ich Brunildo´s Variante für die bessere. Schließlich hat Dirk auch von ihm gelernt.
"Big John" Piefecta und Brunildo darf man zu den Pionieren und Richtungsgebern in diesem Bereich zählen.

Hmm - so weit so gut...

Hänge aber an einem unerklärlichem Problem und würde mich freuen eine Erklärung zu finden:

Unter http://at.camps4you.com/index.php?id=0,3,0,0,1,0 wird eine Bilddatei für den rechten HG definiert und es haut nicht hin!

Unter http://at.camps4you.com/index.php?id=1,1,0,0,1,0 werden in der selben CSS Datei Farben statt Bilder als HG definiert und es funktioniert?!?

Ich rufe das Layout über HTML folgendermaßen in der Vorlage auf:

Code: Select all

<div class="container">

<div class="headerBlock">
	<ul>
		<li><a href="index.php" id="logo"><img src="img/layout/navtop.gif" alt="Camps4you Sprachreisen und Englisch Camps"/></a></li>
		<li><a href="index.php?camps4you" id="camps4you"><img src="img/layout/nav_camps4you.gif" alt="&Uuml;ber Camps4you"/></a></li>
		<li><a href="index.php?reiseziele" id="reiseziele"><img src="img/layout/nav_reiseziele.gif" alt="Reiseziele" border="0"/></a></li>
		<li><a href="index.php?kursdaten" id="kursdaten"><img src="img/layout/nav_kursdaten.gif" alt="Kursdaten & Preise" border="0"/></a></li>
		<li><a href="index.php?im_preis" id="preis"><img src="img/layout/nav_preis.gif" alt="Im Preis inkludiert" border="0"/></a></li>
		<li><a href="index.php?eltern" id="eltern"><img src="img/layout/nav_eltern.gif" alt="F&uuml;r Eltern"/></a></li>
		<li><a href="index.php?bildergalerie" id="bilder"><img src="img/layout/nav_bilder.gif" alt="Bildergalerie"/></a></li>
	</ul>
</div>

<div class="outer1"><div class="outer2"><div class="outer0">

	<div class="wrap-cl">

		<div class="mainBlock"><div class="inmainBlock">
			{CONTENT}
			<p>Sie befinden sich hier: {BREADCRUMB}</p>
		</div></div> <!-- end center div -->

		<div class="leftBlock"><div class="inleftBlock">
			<img src="img/layout/nav_left_top.gif" alt="Camps4you Sprachreisen und Englisch Camps"/>
			{LEFT}
			<img src="img/layout/nav_kontakt.gif" alt="Kontakt mit Camps4you Sprachreisen aufnehmen"/>
			<img src="img/layout/nav_buchen.gif" alt="Online Buchen bei Camps4you Sprachreisen"/>
			<img src="img/layout/nav_broschuere.gif" alt="Camps4you Sprachreisen Broschüre bestellen"/>
			<img src="img/layout/nav_lehrer.gif" alt="Camps4you Sprachreisen - Lehrerzone"/>
		</div></div> <!-- end left div -->

	</div> <!-- end wrap-cl div -->

	<div class="rightBlock"><div class="inrightBlock">
		{RIGHT}
	</div></div> <!-- end right div -->
		
	<br class="clear" />

</div></div></div>

<div class="footerBlock">
	{FOOTER}
</div>
</div>

und das über CSS:

Code: Select all

.clear {
	clear: both;
}

.container {
	width: 800px;
	margin: 0 auto;
	background-image: url(../../img/layout/nav_left_filler.gif);
	background-repeat: repeat-y;
}

.headerBlock {
	text-align:left;
}
	.headerBlock ul {
		list-style-type:none;
		margin: 0px;
		padding: 0px;
	}
		.headerBlock ul li {
			display:block;
			float: left;
			padding: 0px;
			margin: 0px;
		}	
			.headerBlock ul li a {
				background-repeat: no-repeat;
				float: left;
				text-decoration: none;
				display: block;
			}

			.headerBlock ul li a:hover {
				border: 0;
			}

			.headerBlock ul li a:hover img {
				visibility:hidden;
			}

				li #logo {
					background-image:url(../../img/layout/navtop.gif);
					width: 800px;
					height: 95px;
				}
				li #logo img {
					width: 800px;
					height: 95px;
					border: 0px;
				}
	
				li #camps4you {
					background-image:url(../../img/layout/nav_camps4you_act.gif);
					width:158px; 
					height:62px;
				}
				li #camps4you img {
					width:158px; 
					height:62px;
					border:0;
				}
	
				li #reiseziele {
					background-image:url(../../img/layout/nav_reiseziele_act.gif);
					width:87px; 
					height:62px;
				}
				li #reiseziele img {
					width:87px; 
					height:62px;
					border:0;
				}
	
				li #kursdaten {
					background-image:url(../../img/layout/nav_kursdaten_act.gif);
					width:169px; 
					height:62px;
				}
				li #kursdaten img {
					width:169px; 
					height:62px;
					border:0;
				}
			
				li #preis {
					background-image:url(../../img/layout/nav_preis_act.gif);
					width:148px; 
					height:62px;
				}
				li #preis img {
					width:148px; 
					height:62px;
					border:0;
				}
		
				li #eltern {
					background-image:url(../../img/layout/nav_eltern_act.gif);
					width:106px; 
					height:62px;
				}
				li #eltern img {
					width:106px; 
					height:62px;
					border:0;
				}
			
				li #bilder {
					background-image:url(../../img/layout/nav_bilder_act.gif);
					width:132px; 
					height:62px;
				}
				li #bilder img {
					width:132px; 
					height:62px;
					border:0;
				}	

.mainBlock {
	width: 484px;
	float: right;
}

/*
.inmainBlock {
	width: 100%;
	overflow: hidden;
}
*/

.leftBlock {
	float: left;
	width: 158px;
}

/*
.inleftBlock {
	width: 100%;
	overflow: hidden;
}
*/

.rightBlock {
	float: right;
	width: 158px;
}

/*
.inrightBlock {
	width: 100%;
	overflow: hidden;
}
*/

.footerBlock {
	background-color:#6699CC;
	height:25px;
	text-align:right;
	text-decoration:none;
	color:#FFFFFF;
}

.outer1 {
	margin-left: 158px;
	background-color: Lime;
}

.outer2 {
	margin-right: 158px;
	background-color: Green;
}

.outer0 {
	position: relative;
	margin-left: -158px;
	margin-right: -158px;
}

.wrap-cl {
	float: left;
	width: 642px;
}

Was kann da los sein?!?
In beiden Fällen ist HTML und CSS validiert...

LG. Lukas

Jensensen · Post by **Jensensen** » Sun 22. Jul 2007, 00:10

[der gute (alte) alistapart] fauxcolumns bezieht sich auf die --> Länge der Spalten, nicht auf den hintergrund in selbigen!

bedeutet, wenn richtig CSSt, dann würde deine BG-grafik aufhören/enden nach:

"Sie befinden sich hier: Camps4you Sprachreisen > Camps4You"
[endegelände]
dennoch würde die spalte bis unten mit deiner BG-COLOR!! gezeichnet.

das bedeutet, dass du dein

/img/layout/nav_left_filler.gif

bspw. nicht nur hinter/über deiner linken spalte laufen lässt,
sondern [NUR EINE (800px breite) GRAFIK IM HINTERGRUND] über den gesamten 800px breiten container laufen lässt. mit entspr. breiten/spalten layout.

funktioniert natürlich nur bei festem/statischen layout --> festen spaltenbreiten....

übrigens kollidieren bei dir .container und #container und
#footer mit .footer

mir scheint, der DIV-Aufbau ist Käse.

du hast [irgendwas zusammengerührt]

#container
leftBlock
rightBlock
mainBlock

[wie wärs mit left, main, right?]

dann schon wieder [als Klasse]
.container

dann erst den
<div class="headerBlock">
<ul>
</ul>
</div>
<div class="outer1">
<div class="outer2">

was ist der outer-krmpl??

greetz

Jensensen · Post by **Jensensen** » Sun 22. Jul 2007, 00:24

irgendwie doppelt gemoppelt:

left main right

outer1 outer2 outer0

das beisst sich alles:
outer1 erstreckt sich über den gesamten #container oder nur left (schwer zu erkennen in meinen checker tools...)

outer2 läuft über main und right

outer0 == body

right wird völlig ignoriert

auf:
http://at.camps4you.com/index.php?id=0,3,0,0,1,0

ist im rightBlock keine Hintergrundgrafik in deinen CSS definiert...

?????

greetz

PS: beim seitenaufbau lieber mit # als mit . arbeiten
bedeutet: .rightBlock für spalten-layout --> käse

-->
#left
#main
#right

+ float

Strahlemann · Post by **Strahlemann** » Sun 22. Jul 2007, 00:28

Danke für den Hinweis mit dem Container --> war noch CSS im Layout eingetragen!

[wie wärs mit left, main, right?]

Ich halte mich an die vordefinierten PHPWMS Werte da ich mehrere Seiten betreue und so immer sofort alles finde...

was ist der outer-krmpl??

Das ist der Workaround zu fauxcolumns nach Brunildo --> zumindest glaube ich es als solches zu vertehen...

Ich habe mich an die empfohlene Vorlage von Flip-Flop gehalten:

Und richtig sauber ohne hacks: http://www.brunildo.org/test/threecols.html Absolut robust und gut Kommentiert.

Code: Select all

This center col is first in the source, being a right float within a left-floated wrapper. The left col (second in source) is floated right in that same wrapper, and following the wrapper is the left floated right col (third in source.)

LG. Lukas

Zusätzliches DIV einschleusen

Zusätzliches DIV einschleusen

Brunildo´s variables 3 Spalten Layout mit Hintergrundbildern