Div-Container in einen anderen Container integrieren. Problem mit CSS

[MrL0vee]

Hey,

mir müsste in Sachen CSS und Div-Containern ein wenig unter die Arme gegriffen werden.
Bin ein blutiger Anfänger in CSS und kriege gerade so die einfachsten Sachen hin. Habe einen kleinen „Auftrag" bekommen, ein Layout (das wurde vorher mit einem Grafikprogramm erstellt) in CSS zu coden.

Was ich bisher habe: http://rappersrecords.de/Habbopoint/

Was es am Ende mal werden soll: http://rappersrecords.de/habbp.png

Ich habe ein Problem, was die Boxen in der Mitte angeht. ((TITEL)) und so weiter.
Das was hier http://rappersrecords.de/Habbopoint/ in der Mitte ist, ist in einem Div-Container #content umgesetzt worden.
Jetzt weiß ich aber nicht, wie ich in diesen Div-Container - Content - die weiteren sieben Div-Container reinbekomme. Oder kann ich das letztendlich auch anders lösen?

Wenn ihr mein Problem nicht verstanden habt , dann fragt gerne, aber es ist wirklich dringend.

Liebe Grüße

 

[Bender86]

Ich bin nun kein Webdesign Experte, aber ich würde mal sagen du packst dir die 7 Container die auf dem Bild zu sehen sind in deinen Content-Container und positionierst sie mittels CSS. ( http://www.drweb.de/magazin/css-container-grundlagen/ ) Verstehe nicht so ganz was du mit "Jetzt weiß ich aber nicht, wie ich in diesen Div-Container - Content - die weiteren sieben Div-Container reinbekomme" meinst. DOM Elemente kannst du doch ganz einfach verschachteln und so aufbauen:

<div id="content">
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <div id="container4"></div>
    <div id="container5"></div>
    <div id="container6"></div>
    <div id="container7"></div>
</div>

/edit
Hab grad grob das Tutorial überflogen und gesehen das der da nur absolute Positionierungen verwendet, relative machen natürlich mehr Sinn um mit verschiedenen Auflösungen der Besucher umzugehen.

 

[MrL0vee]

Wie kann ich das denn im Content-Container ausrichten? Das es zum Beispiel in der Mitte von diesem ist? Wenn ich das mit margin-top versuche, dann wird der Content-Container von dem drüberliegenden heruntergesetzt.

PS: Habe jetzt für "Container1" ne eigene Klasse erstellt #container 1 { }

 

[Kagee]

ich würde es folgendermaßen aufbauen:

<div id="content">
	<div id="links">
		<div class="contentBox"></div>
		<div class="contentBox"></div>
		<div class="contentBox"></div>
	</div>
	<div id="rechts">
		<div class="contentBox"></div>
		<div class="contentBox"></div>
		<div class="contentBox"></div>
	</div>
	<div id="mitte">
		<div id="centerContent"><div>
	</div>
</div>

der Layer "links" bekommt ein float:left; und "rechts" ein float:Right; per CSS. Innerhalb dieses Layers werden dann die Einzelnen grafischen Boxen (hier: "contentBox") definiert.
"centerContent" ist dann die große Box in der Mitte. Mit Margins und Paddings musste dann ein wenig spielen, bis die Abstände passen

 

[MrL0vee]

Wie definiere ich den die Content-Boxen?

Mein CSS sieht jetzt, was den Content angeht so aus:

#content {
width:1108px;
 background:url(../images/content_mitte.png);
  font: 80% Verdana, Arial, Verdana, Helvetica, sans-serif;
  color: transparent;
height:400px; 

}



#links {

float:left;

}

#rechts {
float:right;
}

#mitte {

}

Wie muss der am Ende aussehen? Wie gesagt, ich bin ein blutiger Anfänger!

 

[PEASANT KING]

Benutze einen Div als Body und die Divs innerhalb des mainbodys relativ ausrichten mit Positionsangaben.
z.B. #left {position: relative; left: "Hier die Pixel"; top: "Hier die Pixel"; usw

 

[MrL0vee]

Ich krieg das nicht gebacken, sorry. Kann mir villeicht einer den Code so anpassen, das es letztlich funzt? Ich bin da zu blöd für!

 

[Discjoggy]

Also da waren doch jetz so gute Lösungen bei! Ein bisschen was tun musst du selbst da auch mal.
Container verschateln geht ganz einfach:

1. "Skizziere" dir auf einem Blatt erst mal dein Layout mit "ungefähren" größen und anderen groben informationen und bennene sie und NICHT "CodeLikeHell" einfach losschreiben.

2. gehe jetz der größe nach innen vor. Also beispielsweise "größter container", "zweitgrößter", "box_L", "box_R"

3. schreibe als allererses das in deinen Style-Sheet

#größter container {
}
#zweitgrößter {
}
#box_L {
}
#box_R {
}

Und dort hinein dann die größen usw. und bedenke das du immer eine # (Raute) für einen Container nutzen solltest und ein . (Punkt) für eine Klasse...

Grob gesagt... Punkt für Schriften oder ähnliches, Raute für dein Layout
Also versuch es doch jetzt mal.