CSS DIV. Reihenfolge im Quelltext ändern

derelch · Post by **derelch** » Tue 5. Jan 2010, 09:59

Guten Morgen alle zusammen.

ich stehe gerade von einem kleinen Problem.

Und zwar ist es mein Ziel das Layout von Seitenaufbau "Tabelle" in "CSS DIV" zu ändern. Bisher hat es eigentlich auch ganz gut geklappt.
Meine frontend.css sieht jetzt so aus.

Code: Select all

#container {

	width: 955px;

	border: 0px solid gray;

	margin: 0px;

	margin-left: auto;

	margin-right: auto;

	padding: 0px;
	background-color: white;

}



#headerBlock {

	padding: 0px;

	margin-bottom: 0px;

	background-color: gray;

}



#mainBlock {
	width: 655px;

	padding-left: 0px;

	padding-right: 0px;

	margin-left: 138px;

	/margin-right: 200px;
	border-right: 1px solid gray;
	border-left: 1px solid gray;
	background-color: white;

}



#leftBlock {

	float: left;

	width: 135px;

	margin: 0px;

	margin-right: 0px;
	padding: 0px;

	background-color: white;

}



#rightBlock {

	float: right;

	width: 160px;

	margin: 0;
	/* border-left: 2px solid gray;
	border-bottom: 1px solid gray; */
	margin-left: 0px;

	padding: 0px;

	background-color: rgb(253,253,253);

}



#footerBlock {

	clear: both;

	padding: 0px;

	margin-top: 0px;
	border-top: 2px solid gray;

	background-color: #DCD6CC;

}

Doch ein Änderung hätte ich gerne noch. Und zwar soll die Reihenfolge der Blöcke im Quelltext anders sein.

Bisher ist es so: headerBlock, leftBlock, rightBlock, mainBlock, footerBlock

Gerne hätte ich es so: mainblock, headerBlock, rightBlock, leftBlock, footerBlock

Jedoch habe ich keine Schimmer wie ich dies machen soll. Auf der Suche hier im Forum bin ich in 2 Threads auf diese Seite [url =http://www.brunildo.org/test/piefecta5.html]hier[/url] gestoßen. Dort ist es mehr oder weniger so wie ich es haben will. Doch irgendwie sehe ich keine Gemeinsamkeit zwischen seinen und meinem CSS Code.

Könnt ihr mich vielleicht etwas helfen?

Danke!

Post by **juergen** » Tue 5. Jan 2010, 13:39

Hallo

lass dir den doch von dem Brunildo Beispiel den Seitenquelltext anzeigen und stelle den <body> ...</body> Bereich in den Hauptbereich des Templates ein. Die CSS Sachen einfach mal ins CMS CSS einfüllen.

Wenn du dann {CONTENT} und {LEFT} etc. richtig einfügst kannst du sehen dass du deinem Resultat nahe bist.

derelch · Post by **derelch** » Tue 5. Jan 2010, 16:19

Danke DF6IH,

ich glaube verstanden zu haben was du willst.
Ich habe nur wie du gesagt hast den Brunildo body part bei mit in "Haupt" von meiner Vorlage kopiert. Der steht jetzt nur Dann habe ich den {CONTENT} eingefügt wo der Inhalt hin soll.

Nun ist es bei meinem Template so, dass ich auch in den Feldern Kopfzeile, Fusszeile, links und rechts etwas stehen habe. Dies wird jetzt aber weiterhin angezeigt. Nur im Hauptteil (Mitte) habe ich nun die Brunildo Aufteilung mit 3 Spalten.

Somit ist es im Moment doppelt gemoppelt.

Post by **flip-flop** » Tue 5. Jan 2010, 16:52

Du musst natürlich in ADMIN -> Seitenlayout umschalten auf -> Seitenaufbau: -> "Eigener" (Hattest du ja beim Wechsel von -> "Tabelle" nach -> "CSS DIV" auch gemacht).

Knut

derelch · Post by **derelch** » Tue 5. Jan 2010, 17:06

Ahh,
jetzt passt es so halb. Danke!

Doch wir füge ich nun die linke und rechte Spalte meinen Code ein. Habe {LEFT} und {RIGHT} probiert, klappt aber nicht. {CONTENT} wird übernommen. Mein Code im Hauptteil sieht jetzt so aus.

Code: Select all

<div class="wrapper">

<div class="wide top">
	{HEADER}

	<p>Based on <a href="http://www.positioniseverything.net/piefecta-rigid.html">Big John's Piefecta</a></p>
</div>

<div class="outer">

	<div class="wrap-cl">

		<div class="center"><div class="incenter">
			<h2>First in source</h2>
{CONTENT}
			<p>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 left in that same wrapper, and following the wrapper is the right floated right col (third in source.)
			</p>

			<p>The headings and paragraphs are widthless and have 1px red borders to show any width problems in the columns.
			</p>
			<h3>Some Of The Features</h3>
			<div class="testfloat to-right">Here is a right float test box.</div>
			<p>Any column may be longest. All the columns are floated.
			</p>
			<p>This is a <a href="/test/indext1.shtml">test link</a>. <!-- This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. -->

			</p>
		</div></div> <!-- end center div -->

		<div class="left"><div class="inleft">
			<h2>Second in source</h2>
			<div class="testfloat to-left">Here is a left float test box.</div>{LEFT}
			<p class="alignright">
{LEFT}

This col is floated and also negatively margined to the left, so it is pulled out of its container except for a single pixel that is kept within the container.
			</p>

			<div class="testfloat to-right">Here is a right float test box.</div>
			<p>This is here to make this column longer. This is a <a href="/test/indext1.shtml">test link</a>. This is here to make this column longer. This is a <a href="/test/indext1.shtml">test link</a>. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer.
			</p>
		</div></div> <!-- end left div -->

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

	<div class="right"><div class="inright">
		<h2>Third in source</h2>
		<div class="testfloat to-right">Here is a right float test box.</div>
		<p>This column is floated, and then negatively margined to the right, pulling it nearly outside its container just like the left column.
		</p>
		<div class="testfloat to-left">Here is a left float test box.</div>
		<p class="alignright">This layout works in: IE5+/Win, Opera 6+, Mozilla, IE5/Mac, Safari.
		</p>

		<p> This is a <a href="/test/indext1.shtml">test link</a>. This is a <a href="/test/indext1.shtml">test link</a>. <!-- This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. This is here to make this column longer. -->
		</p>
	</div></div> <!-- end right div -->

	<br class="clear" />
</div> <!-- end outer div -->

<div class="wide bottom">
	<p>bottom</p>
	<p><a href="./">CSS tests home</a></p>
	<div class="ap-test ap-left">
		<p>Here is an "absolute" box, which stays at the col bottom.</p>
	</div>
	<div class="ap-test ap-right">

		<p>AP. The side cols have bottom padding to avoid these boxes.</p>
	</div>
</div>

</div>

XING · Post by **markus s** » Tue 5. Jan 2010, 18:15

du dir das schon mal angesehen ?
DEIN WIKI
unter vorlagen wirst du fündig...
aber lese dir alles durch - ist die basis.

derelch · Post by **derelch** » Tue 5. Jan 2010, 19:59

Also,

so wie ich die Grafik hier verstehe bekomme mit {LEFT} und {RIGHT} gar nichts hin, da die Boxen bei dem eigenen Layout ohne Funktion sind.

Ich habe jetzt den Code dieser Boxen aber direkt in den "Haupt"-Teil mit eingebaut. Nun ist es so wie ich es haben wollte.

Ist dies nun der richtige Weg oder kann mit den Boxen doch noch irgendwie arbeiten? Ist nämlich schon bequemer wenn ich einfach den Text in der Box ändere und nicht erst im Code suchen muss wo das steht was ich suche.

Post by **flip-flop** » Wed 6. Jan 2010, 01:58

Bei einem Layout in "HAUPT" werden die Felder Kopfzeile, Fußzeile, links, rechts nicht mehr abgefragt.
Diese Felder können nun als Kommentarfelder genutzt werden.

- Oder denke sie dir einfach weg.

Wieso groß suchen, das Layout ist doch wirklich übersichtlich. Text steht im Normalfall keiner Im Layout..

Tip: Installiere dir die FF Erweiterung Resizeable Textarea

Knut

derelch · Post by **derelch** » Wed 6. Jan 2010, 08:33

flip-flop wrote: Wieso groß suchen, das Layout ist doch wirklich übersichtlich. Text steht im Normalfall keiner Im Layout..

Naja, ich hatte vorher in der rechten Spalte ein paar Banner drin. Den HTML Code dafür hatte ich in "rechts" eingetragen. Bei Änderungen an den Bannern konnte ich den Code einfach in einen Editor kopieren, ändern und dann wieder in alle Vorlagen in "rechts" einfügen. Jetzt muss ich halt erst immer den entsprechenden Code suchen.

Ich verstehe jetzt aber nicht wieso in der Grafik oben die Platzhalter für {HEADER} und {FOOTER} im Hauptteil drin sind. Woher wird der Inhalt dieser Platzhalter genommen?
So wie ich das verstehe muss ich nun für jeden Artikel einen extra Content Part {HEADER} etc. anlegen, so dass ich mit den Platzhalter arbeiten kann, oder?

Post by **flip-flop** » Wed 6. Jan 2010, 09:05

Die Banner würde ich in einem versteckten Bereich mit einem CP HTML anlegen und mit {SHOW_CONTENT:CP,ID} hineinholen.

Die Eingabefelder Kopfzeile, Fußzeile, links, rechts werden nicht mehr verwendet.

Der Inhalt dieser Platzhalter wird aus den CPs generiert, wenn man es denn überhaupt braucht.

So wie ich das verstehe muss ich nun für jeden Artikel einen extra Content Part {HEADER} etc. anlegen, so dass ich mit den Platzhalter arbeiten kann, oder?

Siehe oben {SHOW_CONTENT....}

Knut

XING · Post by **markus s** » Wed 6. Jan 2010, 11:09

du musst im kopf weg von dem tabellenbasiertem layout.

du erstellst in "Haupt:" deinen kompletten seitenaufbau.
dh hier drinnen soll ein container für oben, mitte unten stehen.
<div id="oben">{HEADER}</div>
<div id="mitte">{CONTENT}</div>
<div id="unten">{FOOTER}</div>

mache dir im ordner \template\inc_css eine neue .css datei.
hier definierst du nun wie groß, wo und evt. welche farbe diese container haben sollen.
zbsp:

Code: Select all

#oben {
	position:relative;
	width:950px;
	height:300px;
	background-color:#352b27;}

dann machst du unter "ADMIN" im backend deine seitenstrukur (deine navigationspunkte)
dann im artikel die artikelinformation erstellen, und dann im anschluss einen
CONTENT PART einfplgen - zb. WYSIWIG HTML - und hier siehst du nun das magische -

: CP Artikel

es gibt unter "Ausgabe:" die auswahl "HEADER" "CONTENT" und "FOOTER".
je nachdem was du auswählst wird der content part dort plaziert...

derelch · Post by **derelch** » Wed 6. Jan 2010, 22:05

Hallo Markus,

danke für deine ausführliche Erklärung.

Bisher ist es so, dass ich mir 8 Vorlagen gearbeite habe, denen ich die Artikel zugewiesen habe. Wollte ich jetzt z.B. die Linke Spalte von Vorlage1 ändern musste ich nur 1x den Code ändern, halt in der Vorlage.

Die Seite die ich umgestalte hat auch über 100 Artikel. Wenn ich jetzt alles richtig verstanden habe müsste ich jetzt für jeden Artikel einen Content Part LEFT,RIGHT,FOOTER anlegen und mit Inhalt füllen.

Will ich jetzt die linke Seite von Vorlage1 ändern, müsste ich bei alles Artikeln den Code ändern, die der Vorlage zugewiesen sind. Das ist für mich zu viel Aufwand.

Jetzt habe die den Code von LEFT,RIGHT,FOTTER und HEADER einfach in den Hauptteil geschrieben. Somit steht dieser alles Artikeln dieser Vorlage zur Verfügung.

Post by **update** » Thu 7. Jan 2010, 08:33

Will ich jetzt die linke Seite von Vorlage1 ändern, müsste ich bei alles Artikeln den Code ändern, die der Vorlage zugewiesen sind. Das ist für mich zu viel Aufwand.

Du scheinst das Geheimnis noch nicht verstanden zu haben:
Lege Dir eine Strukturebene an und verstecke sie.
Lege Dir dort dann einen Artikel an und verstecke ihn.
Lege in diesem Artikel die Teile, die Du wiederkehrend verwenden willst (zB ein Bild), als Content Part an und mache diese Content Parts sichtbar.
Nun schreibst Du in Deine Vorlage {SHOW_CONTENT:CP,ID1,ID2,ID3, IDusw}, wobei ID1... die ID des Content Parts ist.
Schwupps - nun liest die Vorlage diese Content Parts aus.

Wenn Du nun einen der betreffenden Content Parts editierst, wird das bei allen Vorlagen respektive Seiten, die dieses SHOW_CONT.... haben, sofort reflektiert....

derelch · Post by **derelch** » Thu 7. Jan 2010, 08:58

So, jetzt dürfte der Groschen gefallen sein. Hatte die letzten Tage irgendwie ein sehr dickes Brett vor dem Kopf. Mit wollte das einfach nicht in den Kopf rein.

Vielen Dank für Eure große Hilfe.

Post by **flip-flop** » Thu 7. Jan 2010, 19:19

Es gibt noch eine andere Möglichkeit, die nun nutzlosen Felder in der Vorlage wieder zu reaktivieren: http://www.phpwcms-howto.de/wiki/doku.p ... _einbinden

CSS DIV. Reihenfolge im Quelltext ändern

CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern

Re: CSS DIV. Reihenfolge im Quelltext ändern