Einen eigenen Stil erstellen? // .content bearbeiten? // Wie auf Bereiche zugreifen?

Sehr geehrte WoltLab-Community,

ich versuche mich derzeit daran einen eigenen Stil zu entwickeln, habe aber nur ein wenig Erfahrung in CSS, mehr in HTML oder anderen Programmiersprachen wie VB.NET usw.

Ich versuche auf meinen Homepage http://ethyron.net/ (Vorlage vom Standard-Stil), den ".content" Bereich zu Umrahmen.
Und mein derzeitiger Versuch sieht so aus:
http://i.imgur.com/lunhPVk.png

body, .tabularBox, .dialogTitlebar {
	background-image: url(../../images/light/background.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% 100% cover;
}




/* Ethyron Header all 1201 */
@media all and (min-width: 1201px) {
	#pageHeader {
		margin-bottom: 20px;
	}
}




/* Ethyron menu all 1201 */
@media all and (min-width: 1201px) {
	#main {
		background-color: transparent;
		&.sidebarOrientationRight {
			background-color: transparent;
		}
	}
	#main::before {
		content: "";
		display: block;
		width: 100%;
		background: transparent url('../../images/testhp/content-top-bg.png') no-repeat center top;
		height: 64px;
	}
	#main::after {
		content: "";
		display: block;
		width: 100%;
		background: transparent url('../../images/testhp/content-bottom-bg.png') no-repeat center top;
		height: 64px;
	}
}

Mein Problem ist jetzt einerseits die Seiten richtig hinzubekommen,
dabei hatte ich es hiermit versucht, was aber im Endeffekt rein gar nichts gemacht hat:

@media all and (min-width: 1201px) {
	#main > div {
		background-color: transparent;
		background: transparent url('../../images/testhp/content-middle-bg.png') repeat-y center top;
		> div {
			background-color: transparent;
			background: transparent url('../../images/testhp/content-middle-bg.png') repeat-y center top;
			background-color: rgb(252,252,252);
			border: 1px none rgb(226,226,226);
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			-khtml-border-radius: 0;
			border-radius: 0;
			padding: 42px;
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

Andererseits würde ich gerne den ".content" etwas über/in den "::before" Bereich rein schieben lassen, damit nicht so viel Platz verloren geht. Dies geht doch eigentlich mit z.B. "margin -11px" oder nicht?

Was mich verwundert ist, wie man z.B. die ersten beiden "divs" von #main ansprechen kann und ihnen Ids geben kann.
Dann würde ich das ganze nämlich nicht über "::before" und "::after" realisieren, sondern über den ersten (bereits vorhanden) "div" und den "pageHeight" nennen und irgendwie da die Grafik oben und unten einbinden.
Und den zweiten "div" würde ich "pageWidht"/"pageContent" nennen und dort die Grafik Links/Rechts einbauen. (Die Grafik ist im Versuch oben enthalten)

Ich verstehe noch nicht das ganze Zusammenspiel von den Elementen und wie man, in meinem Beispiel explizit, die "divs" verändern könnte. Wenn man es braucht?
http://i.imgur.com/nUdtdyh.png

Vielen Dank schon mal im Voraus! Und ich freue mich auf eure Ideen, so wie ihr es machen würdet!

Mit freundlichen Grüßen
Jan aka. Sonorpearl

Quote from norse

Du könntest die divs mit Selektoren wie :first-of-type, :nth-of-type(xx) oder auch :last-of-type ansprechen.

Gruß norse

Sei gegrüßt @norse,

vielen Dank für deine Antwort, könntest du mir noch eine Starthilfe geben?
Also sprich ist mein Ansatz richtig oder sollte ich was verändert?
Und wie mache ich am besten weiter, damit nachher alles zueinander passt?

Mit freundlichen Grüßen
Jan aka. Sonorpearl

Quote from norse

Da ich kein Designer bin, sondern mich lediglich für den Hausgebrauch mit CSS beschäftige, möchte ich mich zur Vorgehensweise und dem weiteren Procedere nicht äußern. Da gibt es hier wesentlich versiertere Köpfe als mich.

Gruß norse

Display More

Ich hoffe das jemand helfen kann. Ich weiß ja, dass hier einige Spezialisten rumlaufen.
Trotzdem Vielen Dank @norse.

Mit freundlichen Grüßen
Jan aka. Sonorpearl