mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 12:18 Benutzername: Passwort: Auto-Login

Thema: Problem bei CSS-Layout vom 27.02.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Problem bei CSS-Layout
Autor Nachricht
sidewayZ
Threadersteller

Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht: Männlich
Verfasst Mi 27.02.2013 17:11
Titel

Problem bei CSS-Layout

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Mac

Dabei seit: 26.08.2005
Ort: Köln
Alter: 62
Geschlecht: Männlich
Verfasst Mi 27.02.2013 18:11
Titel

Antworten mit Zitat Zum Seitenanfang

sowas ?

http://www.intensivstation.ch/templates/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
FloKu

Dabei seit: 05.02.2009
Ort: Schenefeld
Alter: 37
Geschlecht: Männlich
Verfasst Mi 27.02.2013 22:44
Titel

Antworten mit Zitat Zum Seitenanfang

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 Au weia!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sidewayZ
Threadersteller

Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht: Männlich
Verfasst Mi 13.03.2013 15:38
Titel

Antworten mit Zitat Zum Seitenanfang

@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
  View user's profile Private Nachricht senden
escaPe

Dabei seit: 10.09.2007
Ort: <? include("home.htm") ?>
Alter: 112
Geschlecht: Männlich
Verfasst Mi 13.03.2013 16:28
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
sidewayZ
Threadersteller

Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht: Männlich
Verfasst Mi 13.03.2013 21:12
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
sidewayZ
Threadersteller

Dabei seit: 24.03.2006
Ort: Sprockhövel
Alter: 41
Geschlecht: Männlich
Verfasst Mi 13.03.2013 21:21
Titel

Antworten mit Zitat Zum Seitenanfang

Kann mein Problem etwas hiermit zu tun haben:

http://blog.cssguru.de/css-clearfix/

Hab das aber schon ausprobiert, keine Änderung...

Cya
  View user's profile Private Nachricht senden
 
Ä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.
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.