09.02.2011, 19:51
|
|||
|
|||
Aufbau Webseite mit DIV-Containern und CSS
Hallo,
ich würde gerne eine Webseite nach folgendem Muster aufbauen - allerdings gibt es ein paar grundsätzliche Probleme (siehe Anlage): Der Header (rot) ist kein Problem. Darunter kommt ein vertikales Hauptmenü mit ca. 5 menüpunkten. Links steht das Submenü (grün), rechts stehen Infos (braun). In die Mitte kommt der Content (blau). Das ganze habe ich mit einzelnen DIV-Containern aufgebaut, die alle in einem Haupt-DIV liegen. Das Problem ist, dass der Content in der Mitte unterschiedlich groß ist und die Seite bei großem Content scrollen soll und die beiden DIVs rechts und links dann die gleiche Höhe haben sollen. Code:
body {
background-color:#D9E1FF;
}
#main {
background-color: #fff;
position:absolute;
margin-left: -475px;
left: 50%;
top: 0px;
width: 950px;
}
#logo_oben {
background-color: red;
position: absolute;
width: 950px;
height: 80px;
top: 0px;
}
#menu_oben {
background-color: #D9E1FF;
position:absolute;
width: 950px;
height: 40px;
top: 80px;
}
#menu_links {
background-color: green;
position:absolute;
width: 168px;
top: 120px;
}
#menu_rechts {
background-color: brown;
position:absolute;
width: 168px;
top: 120px;
left: 782px
}
#inhalt {
background-color: blue;
position:absolute;
width: 614px;
top: 120px;
left: 168px
}
Code:
<body>
<div id="main">
<div id="logo_oben">header</div>
<div id="menu_oben">menü oben - menü oben - menü oben - menü oben - menü oben - menü oben - menü oben - menü oben - menü oben - menü oben - menü oben - menü oben</div>
<div id="menu_rechts">info<br />
info<br />
info<br />
info<br />
info<br />
info<br />
info<br />
info<br />
info<br />
info
</div>
<div id="menu_links">menü1<br />
menü2<br />
menü3<br />
menü4<br />
menü5</div>
<div id="inhalt">
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content<br />
content
</div>
</div>
</body>
Ich freue mich auf eure Tips. 
|
| Sponsored Links |
|
09.02.2011, 19:56
|
||||
|
||||
|
Hi,
alles mit position:absolute; in den Viewport zu nageln ist eine ganz schlechte Idee. Das Web ist nämlich nicht aus Papier und die Bildschirme unterschiedlich groß. Da du wohl Anfänger bist empfehle ich dir Little Boxes durchzuarbeiten, um die Grundlagen zu erlernen. Da stößt du irgendwann auch auf die Lösung mit den gleichlangen Spalten (Faux Columns Technik!). 
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus
|
| Sponsored Links |
|
09.02.2011, 21:27
|
|||
|
|||
|
Ok, Du hast natürlich recht. Ein Profi bin ich nicht. Hab das Lesezeichen für den Link schon gesetzt - vielen Dank - und ich werde dann am Wochenende ein wenig lesen.
Trotzdem: die absolute Positionierung ist nicht notwendig. Das funktioniert auch ohne. Aber dieses Layout wird auf Firefox, IE 6,7,8, Safari und Opera perfekt angezeigt (jedenfalls bei browsershots.org). Es scheint doch eigentlich zu funktionieren... ?
|
|
09.02.2011, 22:50
|
|||
|
|||
|
Ja, es funktioniert auch - für deine gewählte Bildschirmgröße.
Wer das Browserfenster aber kleiner hat, muss seitlich scrollen. Wer ein Mobile verwendet, bekommt vielleicht ein Problem. So wie es jetzt ist, könnte man es fast lassen, aber eben nur fast  weil es einfach nicht flexibel ist. Immerhin hast Du vermieden, im Content-bereich fixe Höhen anzugeben Position:absolute ist nichts Schlechtes, aber man muss wissen was man da macht und die Folgen abschätzen können. Je nach gewählter Vergrößerungsart ( nur Text-Vergrößerung z.B.) bricht Dir dein Content aus den Boxen, aus der Navi z.B. Lies mal Little Boxes durch, für den Anfang gibt es nichts Besseres. So, jetzt wieder Fußball gucken
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
09.02.2011, 22:58
|
|||
|
|||
|
Genau!
Zitat:
Erst mal einen dicken Dank für die Infos.
|
|
10.02.2011, 09:13
|
||||
|
||||
|
Zitat:
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus
|
|
18.02.2011, 15:55
|
|||
|
|||
|
So ich habe alles gelesen und einiges dazugelernt, habe allerdings noch eine Frage zum grundsätzlichen Aufbau:
In den Beispielen ist immer auf jeder einzelnen Seite Header, Menü, Sidebar und Footer enthalten. Wenn ich z. B. das Menü ändern will muss ich das auf allen Seiten machen. Früher hat man sowas mit Framesets gelöst. Ich würde das ganze heutzutage mit php und content umsetzten. Ist das der richtige Weg oder geht das auch mit CSS?
|
|
18.02.2011, 16:30
|
|||
|
|||
|
Zitat:
__________________
Gruß Dani
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Jquery Load Div Problem / Css Style wird nicht erkannt | mastaa | Javascript & Ajax | 5 | 16.03.2011 18:50 |
| Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
| php Datei in css webseite einbinden | X5-599 | Serveradministration und serverseitige Scripte | 14 | 19.05.2008 10:52 |
| CSS div Größe anpassen anhand des inhaltes | Heavenfighter | (X)HTML | 3 | 07.07.2004 11:04 |
| einem Div mehrere CSS Klassen geben ?? | nice | CSS | 4 | 22.03.2004 17:27 |
Linear-Darstellung
