[HTML]Relative DIV-Boxen

Homepage selbermachen 7.852 Themen, 35.619 Beiträge

[HTML]Relative DIV-Boxen

Piranha2 am 16.09.2007, 22:53 / 2 Antworten / Baumansicht

Hallo, ich habe folgendes Problem:

Auf meiner Homepage möchte ich gerne mein Layout mit DIV-Boxes machen. Dazu Möchte ich gerne eine Spalte für den COntent und eine Spalte rechts daneben eine Spalte für das Menü.
Allerdings ist die Seite in der mitte Zentriert also die Ränder sind immer relativ groß, wie kann ich dann eine 2 Spaltige Seite entwerfen?

Ich hab das Ganze mal auf meinen Webserver geladen um es verständlich zu machen: http://piranha.exp-space.com/protected/
Benutzername: nickles
Passwort: computerwissen

Wie man sehen kann ist das Menü immer unter dem Contentbereich, leider kann ich keine Absoluten angaben verwenden, da diese sich immer auf die linke obere Ecke beziehen.

Alles ist über CSS gesteuert, die CSS Datei befindet sich hier:
http://piranha.exp-space.com/protected/styles/style01.css

Was muss ich machen damit die Box neben der anderen ist?
Wäre toll wenn ihr eine Lösung hättet.

Borlander

Piranha2 „[HTML]Relative DIV-Boxen“

17.09.2007, 00:13 Optionen

Die Zugangsdaten zu Deiner Seite funktionieren nicht :-(

Ansonsten: Mehrspaltenlösungen basieren i.d.R. auf ein Float-Layout.
Wenn die Seite nicht die volle Breite ausfüllen soll, dann mach einfach noch ein Div drumherum.

xafford

Piranha2 „[HTML]Relative DIV-Boxen“

17.09.2007, 10:57 Optionen

Zuerst musst Du dich um einen zentrierten Container innerhalb des Dokumentes kümmern. Das funktioniert, indem Du für den body folgendes angibst:

body {
text-align:center;
}

Dann brauchst Du den Container, geben wir ihm mal die ID page_container, dann brauchst Du folgende Angabe wenn die Breite z.B: 780 Pixel betragen soll:

div#page_container {
margin:0 auto;
text-align:left;
width:780px;
}

Jetzt packst Du deine floatenden Inhaltsdivs (navigation_container und content_container) dort hinein und machst die entsprechenden Angaben:

div#navigation_container {
width:150px;
float:left;
}
div#content_container {
margin-left:150px;
}

Hier wurde angenommen, dass die Navigation 150 Pixel breit sein soll, Du kannst auch mit Prozent arbeiten, dann ersetzt Du sowohl die Breite des navigation_containers mit der Prozentangabe, als auch die Angabe von margin-left für den contant_container.