Autor |
Nachricht |
sidewayZ
Threadersteller
Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht:
|
Verfasst Mi 27.02.2013 17:11
Titel Problem bei CSS-Layout |
|
|
Hallo zusammen,
ich bin gerade dabei, ein gestaltetes Layout in HTML umzusetzen. Es will bei aber absolut nicht gelingen, dieses fehlerfrei zu programmieren.
Ich habe euch mal eine kleine Grafik erstellt, um mein Problem zu verdeutlichen:
Mein Hauptproblem ist, dass ich zwar den Wrapper auf 100% Höhe bekomme, die beiden anderen divs für Menü und Content aber immer nur so hoch sind wie der Inhalt es benötigt. Das ist der Code für den Wrapper:
Code: | #main_wrapper{
width: 990px;
position: relative;
height: auto !important;
min-height: 100%;
height:100%;
} |
Ich habe schon alles probiert, aber auch mit top:0 und bottom:0 für die beiden divs, zerhauts mit das Layout wenn man das Browserfenster verkleinert.
Mein zweites Problem ist der Footer in der Menüleiste. Ich möchte das er sich immer am unteren Seitenende befindet, das habe ich mit position:absolute und bottom:0 gelöst. Problem ist nur, das wenn das Fenster nun zu klein ist, er sich über die darüberliegenden Menüleisten schiebt. Das liegt logischerweise an position:absolute, aber mit relative bleibt der Footer nicht unten...
Ich will von euch keinen fertigen Code haben, aber evtl. mal ein paar Denkanstöße wie ich das Problem lösen kann.
Danke!
Cya
|
|
|
|
|
Mac
Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
FloKu
Dabei seit: 05.02.2009
Ort: Schenefeld
Alter: 37
Geschlecht:
|
Verfasst Mi 27.02.2013 22:44
Titel
|
|
|
Warum gibts du dann den beiden Divs für Menü und Inhalt nicht auch einfach height:100% ?
Danach nen clear und dann außerhalb des Wrappers den footer plazieren, dann sollte es auch mit relative funktionieren und nichts verrutscht mehr beim verkleinern.
Zumindest in meinem Kopf gerade
|
|
|
|
|
sidewayZ
Threadersteller
Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht:
|
Verfasst Mi 13.03.2013 15:38
Titel
|
|
|
@Mac: Da ist leider nix dabei was meinem Layout ähnlich ist.
@FloKu: Klappt leider auch nicht. Wenn ich die beiden Bereiche auf 100% Höhe habe, verringert sich diese bei kleineren Fenstern. Der weiße Hintergrund geht dann nur bis zur Hälfte der Seite.
Jemand anders keine Idee?
Cya
|
|
|
|
|
escaPe
Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht:
|
Verfasst Mi 13.03.2013 16:28
Titel
|
|
|
Also ich kann dein Problem hier nicht nachstellen.
Wenn ich html und body ein: 100% height gebe und dann divs ineinander schachtel, nehmen diese die height angabe korrekt an.
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0; height:100%;">
<head>
<title>Unbenanntes Dokument</title>
</head>
<body style="margin:0; height:100%;">
<!--Wrapper -->
<div style="height:100%; background-color:#0F0; width:960px;">
<!-- Navi wrapper -->
<div style="height:100%; background-color:#F00; width:270px; float:left; position:relative;">
<!-- Navigation -->
<div style="position:absolute; top:0px; height:400px; margin:10px; background-color:#0FF; width:250px; z-index:100;">
<a href="link">LINK</a>
<a href="link">LINK</a>
<a href="link">LINK</a>
<a href="link">LINK</a>
</div>
<!-- Footer -->
<div style="position:absolute; bottom:0px; height:100px; margin:10px; background-color:#00C; width:250px; z-index:1;">
Dein Footer
</div>
</div>
<!-- Content -->
<div style="height:100%; background-color:#0FF; width:670px; float:left; margin-left:20px;">
</div>
</div>
</body>
</html>
|
Wie sieht den dein Doctype aus?
Hier nochmal Live:
http://auf-den-deckel.de/test.html
Zuletzt bearbeitet von escaPe am Mi 13.03.2013 16:47, insgesamt 3-mal bearbeitet
|
|
|
|
|
sidewayZ
Threadersteller
Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht:
|
Verfasst Mi 13.03.2013 21:12
Titel
|
|
|
Danke für den Code escaPe, doch dort hat man das gleiche Problem. Füge mal einen langen Text in den Contentbereich ein und verkleinere dann mal die Höhe vom Browser so, dass der Text unten verschwindet. Wenn du jetzt runterscrollst, ist in dem Bereich kein Hintergrund mehr vorhanden!
Cya
|
|
|
|
|
sidewayZ
Threadersteller
Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht:
|
|
|
|
|
|
|
|
Ähnliche Themen |
Hab da ein Problem - Layout
layout problem
css layout problem
CSS-Problem mit 3-spaltigem Layout
[CSS] Problem mit 3-Spalten Layout
iframe als layout - problem.
|
|