Mehrere Ebenen in eine Ebene plazieren?

[MichaelM]

Hallo, ich versuche seit längerem eine Ebene zu zentrieren. Das klappt ja auch.
Was nicht klappt, ist die Plazierung weiterer Ebenen in dieser Hauptebene.
die verschieben sich dann, obwohl ich die absolut an der hauptebene ausgerichtet habe. Entweder überhalb oder unterhalb der Hauptebene.
Was mache ich falsch?

[MichaelM]

Hallo, das klappt irgendwie nicht.
Habe das Häkchen bei den Anordnungen weggemacht.

[rednug]

Wie wäre es denn mit sowas wie zum gucken oder so?

Gunder

[Torsten]

Hallo Micha,

hast Du die Ebenen wieder mit DW aufgezogen, oder mehr oder weniger von Hand gecoded

Zeig doch bitte mal den Source-Code, dann wirds leichter.

Vermutlich sind die verschachtelten Ebenen absolut Poritioniert, das wird dann meistens nix

[MichaelM]

Ich habe diw Hauptebene relativ und die inneren Ebenen absolut versucht auszurichten.
Ja, die Ebenen habe ich mit DW aufgezogen.

[emiglio]

Eine neu aufgezogene Ebene richtet sich in der Regel nach dem Dokument, sprich von Links und von Oben des Browserfensters. Um eine Ebene an einer anderen auszurichten kannst du, sofern du über Voreinstellungen > Unsichtbare Elemente das Häkchen bei "Ankerpunkte für Ebenen" gesetzt hast, einfach das Ebenen-Symbol der neuen Ebene auf die "Haupt-Ebene" ziehen. Damit verschachtelt sich die Ebene und richtet sich neu an der Hauptebene aus.

[Torsten]

Moin Micha,

diese Vorgehensweise ist auf dauer einfach Kontraproduktiv.

Ebenen aufziehen in DW kann man bestenfalls machen um ein Seitenlayout quasi aufzumalen, wenn man noch nicht völlig in DIV-Dimensionen denkt

Also nehmen wir einmal an, man möchte eine Seite zentrieren, einen Header, einen Contentbereich und einen Footer darstellen:

Erstell eine CSS-Datei im Editor deiner Wahl, ich bevorzuge Top Style, weil man in der deutschen DW-Version meschugge wird, wenn man die ganzen CSS-Auszeichnungen ebenfalls ins deutsche Übersetzt vor sich hat

Hier der Bsp-Code der CSS-Datei:

body{
	border: 0;
	background-color: #99FFFF;
	font-size: 100.01%;
	margin: 20px 0 10px 0;
	padding: 0;
	text-align: center;
}

#wrap{
	background-color: #CC6600;
	margin : 0 auto;
	text-align : left;
	width : 744px;
}

#header{
	background-color: #CC3300;
	height: 150px;
}

#content{	 
	background-color: #FFFFFF;
}

#footer{
	background-color: #006699;
	height: 50px;
}

Dies CSS Datei speichern, dann eine neue HTML Datei erstellen und gleich mit der CSS-Datei verknüpfen und speichern.

Nun wechsle in DW in der Einfügenleiste auf den Reiter Layout und geh uaf den 2. Button von links "DIV Tag einfügen"

daraufhin öffnet sich ein Fenster in dem Du bequem die DIVs aus Deiner CSS Datei auswählen, einfügen, verschachteln kannst

Dort mußt Du das Klappmenue bei ID öffnen und zuerst die ID#wrap auswählen.

Danach in der Reihenfolge: Header, Content, Footer

Beim einfügen des #wrap-DIVs wählst Du bei Einfügen: am Einfügepunkt, den Header: nach Beginn des Tags: <div id="wrap"> bei den anderen stellst Du ein nach dem Tag...

Alles klar? DW merkt sogar welche ID-Tags schon vergeben sind und stellt die in der Auswahl garnicht mehr zur Verfügung

[MichaelM]

Hallo noch einmal,

eure Tipps haben mir schon sehr geholfen.
Und noch einmal Danke dafür.

Noch eine Frage:

Wie bekomme ich es hin, wenn ich nun Text in den Container schreibe,
dass der Text nicht so nah am linken Rand klebt?
Mit Leertaste ist da nicht zu machen. Wäre für dir Formatierung auch nicht so Klasse.!

[Torsten]

Definiere für den betreffenden Container ein Padding-Left
Hier ein Bsp:

#inhalt-container {
padding-left:10px;
}

Wenn Du nach allen Seiten den selben Abstand haben möchtest, dann so:

#inhalt-container {
padding:10px;
}

Für Unterschiedliche Abstände musst Du jeden einzeln definieren:

#inhalt-container {
padding-top:20px;
padding-right:30px;
padding-bottom:15px;
padding-left:10px;
}

oder in Kurzschrift, so:

 #inhalt-container {
 padding:20px 30px 15px 10px;
 }

LG, Floh

[MichaelM]

Jau, das wars. Ich habe es jetzt so langsam begriffen.
Also das mit den Div's...!!
Mit Tabellen komme ich ja klar.
Will aber meine Seiten alle in CSS und DIV's umstellen.

Vielen Dank noch einmal Floh..!!

Ist das in etwa so richtig wie ich es gemacht habe?

Hier der Link: http://www.sanitaerladen.de/test3cont.html

Muß jetzt nur noch hozizontal oder vertikal eine entsprechende Navigationsleiste
einbringen.
Natürlich möchte ich das Gesamtdesign noch einmal verändern.

[Torsten]

Sieht doch ganz gut aus

Ich persönlich finde die Schrift ein wenig klein, aber das ist Geschmackssache.
Deine CSS-Datei ist ein wenig groß geraten, da scheint mir auch noch sehr viel experimentelles drin zu sein.
Schau Dir einfach die Seiten der großen Vorbilder an und deren CSS, dann lernst Du noch einiges z.B. über Kurzschrift und Vererbung.

Ein Bsp. möchte ich ier mal nennen: EfA

LG, Floh

[MichaelM]

Ja, Danke für den Tipp, werde ich mir mal reinziehen..!!

Achaja ich vergaß, die CSS ist wie Du schon sagst, ein experimentelles Vergnügen.
Muß ich noch einiges rausschmeißen, bzw. neu gestalten,

[MichaelM]

Hallo,

ich hätte da noch eine Frage:

Wie bekomme ich jetzt den Navidiv Links neben den Contentbereich plaziert.
Egal was ich mache, entweder verschiebt sich der Contentbereich nach unten, oder der Navidiv ist im Contentbereich.

Oder wenn ich Buttons nebeneinander anordnen will bekomme ich die in einem extra Div nur untereinander und nicht nebeneinander.
Was mache ich falsch?
Irgendwie komme ich da nicht klar.

Achso, hier noch einmal der Link: http://www.sanitaerladen.de/test3cont.html

[MichaelM]

Hallo, kann mir da noch einer helfen?

[hero-master]

Hi Michhael
floaten musst du das Ganze: Beispiel