Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.11.2007, 16:22
Thuroc Thuroc ist offline
Beginner Level 2
neuer user
Thread-Ersteller
 
Registriert seit: 14.09.2007
Ort: Köln
Beiträge: 72
Thuroc befindet sich auf einem aufstrebenden Ast
Standard So langsam bekomme ich die Krise mit den DIVs

Hi,

wenn das so weitergeht, geb ich wirklich irgendwann noch auf...

Meine Page hat im FF noch 2 Probleme und der IE will einfach rein garnichts so darstellen, wie geplant. Valide ist alles.

Die grauen Bereiche im Header sind mit einem DIV umschlossen und sollten eigentlich wie im IE eine Zeile Höher rücken (wischen die beiden äußeren Punkte).

Die gelben Eckpunkte (im Moment 25px breit und schätzungsweise 1em hoch) sollten eigentlich 100% hoch sein und somit die gleiche Höhe besitzen wie der gesamte graue Headerbereich.

Im Footer genau das selbe, die beiden Borderelemente bleiben bei 1em stehen und breiten sich nicht auf 100% Höhe aus.

IM IE wird es dann ganz schlimm. Auch wenn hier der graue Headerbereich an der richtigen Stelle sitzt, erscheint nun einfach eine weitere undefinierbare Zeile unter dem grauen Bereich sowie unter dem Footer. Dann auch noch die ganz kleinen Abstände von den rechten und linken Borderelementen zu den Inhalten...

Ich bekomm noch die Kriese... vielleicht könnt ihr mir ja (nochmals) helfen.

main.css
Code:
* { 
	padding: 0; 
    	margin: 0;
    	border: 0;     
    	font-family: Verdana, sans-serif;                           
    	list-style-type: none; 
}
layout.css
Code:
/* --- Layout erstellen --------------------------------------------- */

/*====================================================================*/
/* Dauerhafte Scrollbalken im FF                                      */
/*====================================================================*/

html {
	height: 100%;
}

body {
  height: 100.1%; 	
  background: black; 		
}

/*====================================================================*/
/* Layout x% Breite + zentrieren                                      */
/*====================================================================*/

#centerPage {
  position: relative;
  height: 100%;
  width: 90%;
  margin: 0em auto;
  background: white;		  									
}

/*====================================================================*/
/* Footer fest am unteren Rand positionieren                          */
/*====================================================================*/

#nonFooter { /* Den nonFooter-Bereich auf 100% skallieren */
	position: relative;
	min-height: 100%;
}

* html #nonFooter { /* min-height fuer IE 5+6 */
	height: 100%;
}

#layoutFooter	{ /* footer ueber den nonFooter-Bereich schieben */
	position: relative;
	margin: -1em auto 0 auto; /* Hier Hoehe des Footer eintragen */
}

* html #layoutFooter { /* Anpassung fuer IE 5+6 */
	margin-top: -1em;
}

hr.contentClear { /* Abstand Contentinhalt zum Footer inkl. clear */
  clear: both;
  height: 1em; /* Hier die benötigte Hoehe eintragen */
  visibility: hidden;
}

* html hr.contentClear { /* Anpassung fuer IE 5+6 */
  clear: both;
  height: 1em;
}

* html div.addlayout { /* -Layout- in IE 5+6 aktivieren */
  height:     0;
}

/*====================================================================*/
/* Header DIVs                                                        */
/*====================================================================*/

#layoutHeader { /* Container DIV ohne eigenen Inhalt */
  clear: both;
  float: left;
  width: 100%;
}

#headerMarginTop {
  clear: both;
  float: left;
  width: 100%;
  height: 1em;
  background: black;
}

#headerBorderTop {
  clear: both;
  float: left;
  width: 100%;
  height: 25px;
  background: yellow;
}

#headerMid { /* Container DIV ohne eigenen Inhalt */
  clear: both;
  float: left;
  width: 100%;
}

#headerBorderLeft {
  clear: both;
  float: left;
  width: 25px;
  height: 100%;
  background: yellow;
}

#headerBorderRight {
  float: right;
  width: 25px;
  height: 100%;
  background: yellow;
}

#headerContent { /* Container DIV ohne eigenen Inhalt */
  height: 100%;
  margin: 0 25px 0 25px;
}

#banner { /* Container DIV ohne eigenen Inhalt */
  clear: both;
  float: left;
  width: 100%;
}

#bannerText {
  clear: both;
  float: left;
  width: 30em;
  height: 100%;
  background: #D3D3D3;
}

#bannerLogo {
  height: 100%;
  margin-left: 30em;
  background: silver;
}

#mainmenu { /* Container DIV ohne eigenen Inhalt */
  clear: both;
  float: left;
  width: 100%;
}

#mainmenuLeftContent {
  clear: both;
  float: left;
  width: 12em;
  height: 100%;
  background: silver;
}

#mainmenuRightContent {
  height: 100%;
  margin-left: 12em;
  background: #D3D3D3;
}

#navi {
  clear: both;
  float: left;
  width: 100%;
  background: silver;
}

#register {
  clear: both;
  float: left;
  width: 100%;
  background: #D3D3D3;
}

#headerBorderBottom {
  clear: both;
  float: left;
  width: 100%;
  height: 25px;
  background: yellow;
}

/*====================================================================*/
/* Mid DIVs                                                           */
/*====================================================================*/

#layoutMid { /* Container DIV ohne eigenen Inhalt */
  clear: both;
  float: left;
  width: 100%;
}

#midBorderLeft {
  clear: both;
  float: left;
  width: 25px;
  height: 100%;
  background: yellow;
}

#midBorderRight {
  float: right;
  width: 25px;
  height: 100%;
  background: yellow;
}

#midMaincontent { /* Container DIV ohne eigenen Inhalt */
  height: 100%;
  background: #FEF3A5;
  margin: 0 25px 0 25px;
}

/*====================================================================*/
/* Footer DIVs                                                        */
/*====================================================================*/

#footerBorderTop {
  clear: both;
  float: left;
  width: 100%;
  height: 25px;
  background: yellow;
}

#footerBorderBottom {
  float: left;
  width: 100%;
  height: 25px;
  background: yellow;
}

#footerMarginBottom {
  float: left;
  width: 100%;
  height: 1em;
  background: black;
}

#footerMid { /* Container DIV ohne eigenen Inhalt */
  float: left;
  width: 100%;
}

#footerBorderLeft {
  clear: both;
  float: left;
  width: 25px;
  height: 100%;
  background: yellow;
}

#footerBorderRight {
  float: right;
  width: 25px;
  height: 100%;
  background: yellow;
}

#footerContent {
  height: 100%;
  margin: 0 25px 0 25px;
  background: silver;
}
//EDIT

Bevor ich es vergesse. Die 2 Borderelemte, rechts und links vom Contentbereich, fliegen noch raus, da diese ja maximal so lang werden können, wie der Contentbereich und somit, durch den festen Footer, nicht immer bis zum unteren Rand reichen.

//EDIT 2

Und bevor ihr euch erst Stunden mit dem DIV-Gerüst auseinander setzten müsst, hier eine Übersicht wie alles verschachtelt ist:
http://download.thuroc.de/images/DIV-Geruest.JPG

Geändert von Thuroc (09.11.2007 um 16:33 Uhr)
Mit Zitat antworten
Sponsored Links