Frage stellen

5 Spalten Div Layout

2.4k Aufrufe
Gefragt in Webseiten HTML von
Hallo Zusammen!

Ich stehe vor folgender Aufgabe.
Es soll ein 5 Spaltiges Divlayout erstellt werden.
In der Mitte der Page-Bereich mit Header, Content, und Sidebar.
und Rechts und Links davon jeweils ein Div für Werbebanner.

Zur besseren Veranschaulichung:

-----------------BODY-----------------------
| |
| ### ############## ### |
| #W# ############## #W# |
| #E# ## HEADER #### #E# |
| #R# ############## #R# |
| #B# #CONTENT##S# #B# |
| #U# # ##I # #U# |
| #N# # ##D# #N# |
| #G# # ##E# #G# |
| # # # ##B# ### |
| # # # ##A# ### |
| # # # ##R# ### |
| ### ############# ### |
| |
------------------BODYEnde----------------

Ich habe dieses auch umsetzen können via HTML/CSS, allerdings verschiebt sich das komplette Layout bei Skalierung des Browserfensters.
Die Beiden Werbung-Bereiche stellen sich quasi auf den Header vom Page-Bereich drauf.

Wie kann ich das Problem lösen?

Gruß

2 Antworten

0 Punkte
Beantwortet von
Warum auch immer sich das jetzt so darstellt... naja
dann halt einfach gesagt:

Body-Anfang
Werbung -- PAGE mit HEADER, CONTENT, SIDEBAR -- WERBUNG
Body-Ende
0 Punkte
Beantwortet von son_quatsch Experte (5.3k Punkte)
Ähem... du wunderst dich, warum HTML standardmäßig Leerzeichen schluckt? Das nächste mal machst du einen Editor (z.B. Notepad) auf, stellst eine Schriftart mit fester Breite (z.B. FixedSys) ein, malst dort deine ASCII-Skizzen, kopierst das, fügst das hier ein, markierst den ganzen Text und klickst auf den "Code"-Button:

---------------BODY---------------
| |
| ### ############## ### |
| #W# ############## #W# |
| #E# ## HEADER #### #E# |
| #R# ############## #R# |
| #B# # CONTENT ##S# #B# |
| #U# # ##I# #U# |
| #N# # ##D# #N# |
| #G# # ##E# #G# |
| # # # ##B# ### |
| # # # ##A# ### |
| # # # ##R# ### |
| ### ############## ### |
| |
--------------BODYEnde------------


Deine restlichen Angaben sind zu schwammig. Wie sieht dein bisher umgesetzter HTML- und CSS-Code aus? (bitte einen Auszug posten und ebenfalls in "Code" einschließen) Achtest du auf Browser-Unterschiede? In welchem Browser zeigt sich das von dir beschriebene Verhalten? Sollen Breiten variabel sein? Welche DIVs haben eine strikte Breite?
...