zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit dynamischer Höhe + Footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.10.2008, 10:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 2
sunshadow befindet sich auf einem aufstrebenden Ast
Standard Problem mit dynamischer Höhe + Footer

Hi!

Ich bin gerade dabei, mir ein Grundlayout für meine Webseiten mit CSS zu bauen:

Zentrierter Bereich, Header mit Grafik, darunter Content-Bereich und unten ein Footer. Der gesamte Bereich soll mit einem Rahmen und abgerundeten Kanten dargestellt werden. Der Footer soll grundsätzlich unten bündig abschließen. Nur der Content-Bereich soll eine dynamische Höhe abhängig vom Inhalt erhalten. Die Seite soll im FF und IE fehlerfrei dargestellt werden.

Bei meinem angehängten Prototyp habe ich folgende Probleme:
- Ich bekomme den Footer nicht so hin, dass er grundsätzlich bündig unten abschließt.
- richtige Positionierung der unteren Eck-Grafiken
- die linken divs (sollen einfarbigen Hintergrund erhalten und Eck-Grafiken verbinden) haben nicht immer 100% der Höhe (FF und IE-Problem)

Für ein paar Tipps wäre ich sehr dankbar!

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>



<style type="text/css">


* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #mainContainer horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 96%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
}


body {
background-image: url('grafik/verlauf.jpg');
background-repeat: repeat-x;
}

#mainContainer {
position: relative;
margin: 20 auto;
width: 800px;
min-height: 96%; /* Mindesthöhe in modernen Browsern */
height: auto !important; /* !important-Regel für moderne Browser */
height: 96%; /* Mindesthöhe in IE (<7) */
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

#cornerTopLeft {
top: 0;
margin: 0;
padding: 0;
width:10px;
height: 10px;
border: 1px solid blue;
}

#leftContainer {
float:left;
width: 10px;
height: 100%;
border: 1px solid red;
margin: 0;
padding: 0;
}

#cornerBottomLeft {
margin-top: 100%;
padding: 0;
width:10px;
height: 10px;
border: 1px solid blue;
}

#cornerTopRight {
margin: 0;
padding: 0;
width:10px;
height: 10px;
border: 1px solid blue;
}

#rightContainer {
float: right;
width: 10px;
border: 1px solid red;
margin: 0;
padding: 0;
height: 100%;
}

#cornerBottomRight {
margin-top: 100%;
padding: 0;
width:10px;
height: 10px;
border: 1px solid blue;
}

#headerContainer {
border: 1px solid pink;
margin: 0;
padding: 0;
width:100%; /* Eigentlich 780px wenn Border ausgeschaltet 768*/
height: 100px;
/*margin-left: 10px;*/
/* == Höhe vom Footer! */
/*margin-bottom: 50px;*/
}

#contentContainer {
border: 1px solid yellow;
margin: 0;
padding: 0;
width:100%; /* Eigentlich 780px wenn Border ausgeschaltet 768*/
/*margin-left: 10px;*/
/* == Höhe vom Footer! */
/*margin-bottom: 50px;*/
}


#footerContainer {
position: relative;
margin-bottom: 0;
border: 1px solid green;
margin: 0;
padding: 0;
width:100%; /* Eigentlich 780px wenn Border ausgeschaltet 768*/
/*margin-left: 10px;*/
/* == Höhe vom Footer! */
}

/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


</style>

</head>
<body>

<div id="mainContainer" class="clearfix">

<div id="leftContainer"><div id="cornerTopLeft"></div>l<div id="cornerBottomLeft"></div></div>
<div id="rightContainer"><div id="cornerTopRight"></div>r<div id="cornerBottomRight"></div></div>
<div id="headerContainer"><p>HEADER</p>Fixe Höhe</div>
<div id="contentContainer">Pink = Header mit fixer Höhe<br>Blau = abgerundete Grafiken<br>Rot = div mit Hintergrundfarbe der Ecken => benötigt 100% Höhe<br>Gelb = Dynamisch hoher Content-Bereich<br>Grün = Footer mit fixer Höhe, soll immer mit unterer Eck-Grafik bündig abschließen<p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p><p>CONTENT</p> Sollte dynamische Höhe haben</div>
<div id="footerContainer"><p>FOOTER</p><p>FOOTER</p><p>FOOTER</p>Fixe Höhe, aber immer unten abschließen</div>


</div>

</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.10.2008, 10:21
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Erst einmal ein Hallo.


Da hilft, ganz ehrlich, ein Blick in die Faq:

Immer 100% Höhe

Dort ist genau das verwirklicht, was Du Dir vorstellst. Lies es Dir gut durch und du wirst verstehen. Ist nicht schwer wenn man es einmal verstanden hat.
__________________
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 29.10.2008, 10:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 2
sunshadow befindet sich auf einem aufstrebenden Ast
Standard

Die FAQs sind sehr gut,
allerdings gibt es zu meinem Beispiel einen Unterschied.
In den Beispielen ist der Footer durchgängig. Bei mir soll er allerdings INNERHALB der umgebenden DIVS (= Rahmen und Eckgrafik) liegen. Vielleicht geht das ja aber auch garnicht.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Mitwachsender Content und Footer Problem Bentham CSS 5 19.09.2010 12:49
fixed footer - problem mit absolut positioniertem div AudioX CSS 2 02.03.2009 08:38
Kniffliges Problem mit prozentualer Höhe und pixelbasiertem Abstand maikmuellers CSS 0 14.05.2007 17:28
Kleiner problem miut der höhe des div elements Griborim CSS 0 15.10.2006 20:45
problem mit dem footer johnpatcher CSS 4 30.11.2004 14:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:58 Uhr.