zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden So langsam bekomme ich die Krise mit den DIVs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.11.2007, 16:22
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
  #2 (permalink)  
Alt 09.11.2007, 17:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Zitat:
Zitat von Thuroc Beitrag anzeigen
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.
Höhenangaben in Prozent funktionieren nur wenn das Eltenelement auch eine Höhenangabe haben.

Zitat:
Zitat von Thuroc Beitrag anzeigen
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
Das ist eines der Probleme: Die Struktur ist viel zu komplex. Solche Extra-DIVs für Ränder und Absände sind in der Regel unnötig. Stattdessen sollten Margin, Border und Hintergrundbilder auf den dahinterliegenden, umfassenden Elemente gesetzt werden.

Was soll genau in die die "Border"-DIVs rein?

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.11.2007, 17:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Thuroc, bereits in einem anderen deiner Threads sprachen wir über unnötige Elemente -- und jetzt machst du alles noch viel schlimmer.
Sorry, aber dein Ansatz ist zum Scheitern verurteilt.
Was du zuerst brauchst, ist semantisch sinnvoller Code. Zeichne also deine Inhalte aus -- und denke dabei überhaupt nicht an dein Layout.
Erst wenn du das hast, kannst du dir Gedanken darüber machen, welche Elemente welche Aufgabe bei der Gestaltung übernehmen können. Eines wirst du ganz sicher nicht brauchen: massenhaft zusätzliche Elemente, die mit einem einzelnen Punkt gefüllt durch die Gegend floaten. Wirf die alle raus!

Dein Umgang mit Float und Clear zeigt, dass du beides noch nicht verstanden hast. Arbeite die ersten beiden Artikel unter FAQ Punkt 2 durch -- dieses Grundverständnis musst du haben. Mit "Raten" kommst du nicht weiter.
Wenn ich dich richtig verstehe, dann möchtest du, dass #banner nach oben wandert? Warum hat das Element dann Clear?
Mit Zitat antworten
  #4 (permalink)  
Alt 12.11.2007, 10:39
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

In die Border DIVs sollten jeweils 3 Bilder rein. 2 fest positionierte in den Ecken und eine Grafik für den restlichen Hintergrund, entweder mittig zentriert oder wiederholend auf einer Achse. Die Grafiken selber sollten dabei wie die Schiebetüren-Technik für Buttons funktionieren.

Das Problem an der ganzen Sache ist einfach, das ich ein grafikbasierendes Layout haben möchte, welches trotzdem noch frei skallierbar bleibt. Und da ich nicht auf ein Tabellenlayout zurückgreifen wollte, habe ich die nötigen Tabellenelemente mit DIVs nachgestellt. Wie sollte ich denn am besten an diese Problemstellung ran gehen? Funktioniert hätte es so auf jeden Fall, nur hättet ihr es gerne einfacher. Aber wie? Mit einem Mix-Layout wo Tabellen innerhalb der DIVs liegen? Danach würde ich noch ganze 3 DIVs benötigen, für Header, Content und Footer...

Übrigens wollte ich den Banner nicht nach oben wandern lassen, sondern den Footer nach unten. Alle NonFooter-Bereiche sind immer 100% hoch, somit sollte der Footer mit negativem margin nach oben über den NonFooter-Bereich geschoben werden. Das was dort jetzt überblendet wurde, wird mit einem hr Element besetzt damit es nicht zu überlappungen kommt. Clear hat somit sichergestellt, das hr immer volle Breite hat und nicht evtl. doch irgend etwas nach unten durchrutschen lässt.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.11.2007, 10:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Thuroc Beitrag anzeigen
Und da ich nicht auf ein Tabellenlayout zurückgreifen wollte, habe ich die nötigen Tabellenelemente mit DIVs nachgestellt.
Genau das ist der Fehler.

Grundregel: Nie leere Elemente verwenden, um Hintergrundgrafiken darin unterzubringen. Nutze für Deine Grafiken alle Elemente, die Du hast (und das sind nicht nur divs, sondern können auch h1-6, p und ul etc.) sein, und wenn Dir am Ende trotzdem noch Elemente fehlen, mußt Du halt verschachteln.
Mit Zitat antworten
  #6 (permalink)  
Alt 12.11.2007, 10:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Thuroc Beitrag anzeigen
Wie sollte ich denn am besten an diese Problemstellung ran gehen?
Das habe ich dir bereits beschrieben: vergiss zuerst dein Layout und zeichne deinen Code semantisch sinnvoll aus.
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design
Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel
Für dich heißt das: du musst deine Denkweise komplett umstellen.
A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards

Zitat:
Übrigens wollte ich den Banner nicht nach oben wandern lassen, sondern den Footer nach unten.
Aha. Was hat bitte der Footer mit dem Banner zu tun?
Wolltest du nicht #banner um "eine Zeile" nach oben gerutscht haben?

Ich muss es leider ganz deutlich sagen: was du oben zeigst kannst du nur wegwerfen. Das wird nichts.
Du kannst auch nicht mit der Kür beginnen -- erst musst du die Pflicht lernen. D.h. übe dich als erstes an einem Layout mit fester Breite und ohne 100% Mindesthöhe. Und kauf dir bitte ein Buch.

Geändert von fricca (12.11.2007 um 10:56 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 12.11.2007, 11:14
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

Mit dem Banner hatten wir jetzt aneinander vorbei geredet, entschuldige. Das sollte jetzt aber auch egal sein, da es so eh nicht funktioniert.

Als erstes werde ich mir deine geposteten Artikel zu Gemüte führen und dann nochmals einen Anfang suchen.

Bücher sind bei mir leider im Moment nicht drin, die werden aber mit Sicherheit folgen sobald es wieder für mich möglich ist.
Mit Zitat antworten
  #8 (permalink)  
Alt 12.11.2007, 11:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Vielleicht kannst du wenigstens den Zeldman günstig bekommen.
Glaub mir: Ohne Buch wirst du CSS nicht erlernen können.
Mit Zitat antworten
  #9 (permalink)  
Alt 12.11.2007, 12:00
Benutzerbild von Scheppertreiber
Chaot und Nonkonformist.
XHTMLforum-Kenner
 
Registriert seit: 13.03.2007
Ort: Steinmark im Spessart
Beiträge: 7.458
Scheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein LichtblickScheppertreiber ist ein Lichtblick
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Genau das ist der Fehler.

Grundregel: Nie leere Elemente verwenden, um Hintergrundgrafiken darin unterzubringen. Nutze für Deine Grafiken alle Elemente, die Du hast (und das sind nicht nur divs, sondern können auch h1-6, p und ul etc.) sein, und wenn Dir am Ende trotzdem noch Elemente fehlen, mußt Du halt verschachteln.
Servus Heiko,

gilt eine div als leer wenn sie ein   enthält ?
__________________
Grüße aus dem Spessart, Joe

{ table-layout: biertischistbesser; }
Der Mausinator
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.11.2007, 12:32
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Aber sowas von leer - ist ja dasselbe in grün
Mit Zitat antworten
Sponsored Links
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
Fullscreen Container mit internen divs purewhite (X)HTML 1 02.11.2009 16:24
n Div's in eine Zeile Mustangore CSS 9 20.08.2009 16:19
Höhenanpassung von divs localex CSS 1 21.11.2007 12:25
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32
div bereich nach anderen divs ausrichten pixel CSS 0 04.02.2007 00:49


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