CSS Seitenaufbau funktioniert nicht ordentlich trotz Doctype

raven16 · 25. März 2009

Hi,

hab hier mal einen neuen Seitenaufbau angefangen für meine eigene Seite die ich nun anfange zu bauen....

Doch leider wird in FF die darstellung komplett anders...hatte das Problem schon mal bei einer alten Seite un nun wieder -.-
Könnt ihr euch vielleicht mal meine beiden Dateien anschauen? Vll. findet ihr ja etwas, was nicht stimmt und anders gemacht werden sollte.

index.php

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Home - www.cb.de.ki</title>
		<link rel="stylesheet" href="css/seitenaufbau.css" type="text/css" media="screen">
	</head>
	<body>
		<div class="gesamtbox">
			<div class="topbox">
				<div class="submenubox">
					Submenu
				</div>
			</div>
			<div class="leftbox">
				<div class="mainmenubox">
					Mainmenu
				</div>
				<div class="extraleftbox">
					Extraleft
				</div>
			</div>
			<div class="mittelbox">
				<div class="inhaltbox">
					Inhalt
				</div>
			</div>
			<div class="rightbox">
				<div class="extrarightbox">
					Extraright
				</div>
			</div>
		</div>
	</body>
</html>

CSS dazu:

Code:

div.gesamtbox{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	background: #000000;
}
/*-----------------------------------------------------------------------------*/
div.topox{
	margin-left: 5px;
	margin-right: 5px;
	width: 950px;
	height: 300px;
	background: #222222;
}
div.leftbox{
	float: left;
	margin-left: 5px;
	width: 150px;
	background: #333333;
}
div.mittelbox{
	float: left;
	width: 650px;
	background: #444444;
}
div.rightbox{
	float: left;
	margin-right: 5px;
	width: 150px;
	background: #555555;
}
/*-----------------------------------------------------------------------------*/
div.mainmenubox{
	width: 150px;
	background: #666666;
}
div.submenubox{
	float:left;
	margin-top: 270px;
	margin-left: 5px;
	width: 950px;
	height: 30px;
	background: #777777;
}
/*-----------------------------------------------------------------------------*/
div.extraleftbox{
	width: 150px;
	height: 300px;
	background: #888888;
}
div.extrarightbox{
	width: 150px;
	height: 600px;
	background: #999999;
}
/*-----------------------------------------------------------------------------*/
div.inhaltbox{
	width: 650px;
	height: 600px;
	background: #AAAAAA;
}

Hoffe ihr könnt mir evtl. ein paar Tipps geben...
schaut euch am besten mal die Seite mit FF und IE7 oder so an

Darii · 25. März 2009

Die Seite sieht im Safari und FF identisch aus(IE nicht vorhanden), tippe auf einen Darstellungfehler im IE.

raven16 · 25. März 2009

Aber wie kann ich das erreichen, dass das überall relativ identisch aussieht
Im FF zeigt der gar nicht den Dunklen hintergrund von der gesamtbox an, was wiederum in IE7 angezeigt wird

Ich möchte ja das alles so aussieht wie im IE7 das dargestellt ist

xD

Darii · 25. März 2009

besorg dir Firebug und guck dir an wie die Boxen aussehen, dein Problem sind die Floats, dadurch fliegt alles aus der gesamtbox raus

raven16 · 26. März 2009

Also ich hab mit dem Tool mal alle background farben ausgestellt außer die gesamt box und die topbox und der zeigt dann alles weiß an obwohl der eigentlich die beiden boxen nun einzeigen müsste...
also warum der die tobbox nicht anzeigt weiß ich nun... der packt die topbox einfach hinter die submenubox...

Um das zu verstehen:
Ich habe eine Topbox, die den ganzen oberen bereich darstellen soll...
in dieser Topbox liegt die Submenubox, wo ich aber nach oben hin nen margin von 270px festgelegt hab
so müsste sich die Submenübox eigentlich an dem unteren Rand der Topbox heften...

Kann man das irgendwie anders erreichen?

xkynet · 26. März 2009

zuerst mal machst du den tippfehler beim das erste Element in deinem CSS raus.
Dann kannst du wenn du schon jedem Div-Container eine feste Höhe zuordnerst auch der Gesamtbox eine feste Höhe (musst halt ausrechnen) zuordnen und dein Problem verschwindet.

P.S. du solltest dir deine Seite auch noch mal im IE 6 anschauen, da macht er nämlich lustige sachen mit der rechten Box. IE6 ist leider immernoch sehr verbreitet.

raven16 · 26. März 2009

Danke für die tipps...
für die variablen elemente (gesamtbox,inhaltbox) möchte ich keine höhe festlegen, weil sich die sich automatisch an dem inhalt auf der seite anpassen soll

Aber hab das nochmal auf ein neues versucht...hab dieses mal auch ein bisschen mit den positions relative und static rumgespielt...

HTML:

	<body>
		<div class="gesamtbox">
			<div class="submenubox">
				Submenu
			</div>
			<div class="mainmenubox">
				Mainmenu
			</div>
			<div class="extraleftbox">
				Extraleft
			</div>
			<div class="inhaltbox">
				Inhalt
			</div>
			<div class="extrarightbox">
				Extraright
			</div>
		</div>
	</body>

Code:

div.gesamtbox{
    position: static;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background: #EEEEEE;
}
/*-----------------------------------------------------------------------------*/
div.mainmenubox{
    position: static;
    margin-top: 270px;
    margin-left: 5px;
    width: 150px;
    height: 300px;
    background: #DDDDDD;

}
div.submenubox{
    position: relative;
    left: 5px;
    top: 270px;
    width: 950px;
    height: 30px;
    background: #CCCCCC;
}
/*-----------------------------------------------------------------------------*/
div.extraleftbox{
    position: relative;
    left: 5px;
    background: #BBBBBB;
    width: 150px;
    height: 300px;
}
div.extrarightbox{
    position: static;
    margin-left: 805px;
    width: 150px;
    height: 600px;
    background: #999999;
}
/*-----------------------------------------------------------------------------*/
div.inhaltbox{
    position: relative;
    left: 155px;
    width: 650px;
    height: 600px;
    background: #AAAAAA;
}

bitte mal anschauen

wie kann ich nun Inhalt(inhaltbox) und Extraright(extrarightbox) am besten so wie es ist senkrecht hochschieben zum Submenu?
Könnte zwar bei der inhaltsbox top: -600px; und die extrabox -1200px machen aber das problem ist, dass die gesamtbox trotzdem die größe behält wie vorher weil ohne die verschiebung die boxen genau an dieser stelle wie vorher sitzen...

mfg

PW-toXic · 26. März 2009

hier in pseudo code was du tun must:

HTML:

<header> </header>
<submenu></submenu>
<contentWrapper>
    <leftWrapper # float: left; width: ???>
        <mainmenu></mainmenu>
        <extraLeft></extraLeft>
    </leftWrapper>
    <extraRight # float: right; width: ???></extraRight>
    <inhalt # width: ???></inhalt>
    <div style="clear:both"></div>
</contentWrapper>

<extraRight # float: left></extraRight> steht zb für
<div id="extraRight" style="float: left;"></div>

wichtig ist das <div style="clear:both"></div> damit die 3 spalten nicht aus dem content wrapper rausfloaten

wenn du möchtest, dass alle 3 spalten automatisch gleich hoch sind, dann könntest du dir überlegen, eine Tabelle mit Drei Spalten zu machen.
https://www.computerbase.de/forum/threads/warum-tabellen-zum-layouten-besser-sind.554996/

xkynet · 26. März 2009

das ganze ghet so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Home - www.cb.de.ki</title>
	</head>
	<style>
		div.gesamtbox {
			position: relative;
			width: 960px;
			margin: 0 auto;
			background: #000;
		}
		#left{
			margin-left: 5px;
		}
		div.mainmenubox {
			width: 150px;
			height: 300px;
			background: #ddd;
		}
		div.submenubox{
			left: 5px;
			height: 30px;
			background: #ccc;
		}
		div.header{
			height: 270px;
			background: #fcc;
		}
		div.extraleftbox{
			background: #bbb;
			width: 150px;
			height: 300px;
		}
		div.extrarightbox{
			position: absolute;
			top: 300px;
			right: 5px;
			width: 150px;
			height: 600px;
			background: #999;
		}
		div.inhaltbox{
			top: 300px;
			position: absolute;
			left: 155px;
			width: 650px;
			height: 600px;
			background: #aaa;
		}
	</style>
	<body>
		<div class="gesamtbox">
			<div class="header">
				Header
			</div>
			<div class="submenubox">
				Submenu
			</div>
			<div id="left">
				<div class="mainmenubox">
					Mainmenu
				</div>
				<div class="extraleftbox">
					Extraleft
				</div>
			</div>
			<div class="inhaltbox">
				Inhalt
			</div>
			<div class="extrarightbox">
				Extraright
			</div>
		</div>
	</body>
</html>

Du solltest alldings wissen, dass sich jetzt alles nach der gröé des Elements "left" richtet. Das geht leider bei einem Div-basierten Layout nicht anders. Das wurde soch in unzähligen weisen versucht zu lösen aber man ist nicht auf eine Lösung gekommen, es sei denn man setzt JS ein und das ist nun wirklich keine gute Lösung. Wenn du wirklich volle Flexibilität haben willst, hilft leider nur eine Tabelle

EDIT da war wohl einer schneller! Was ich im letzten meinte wurde im oberen Post schon gesagt (das mit den gleich hohen Spalten)
Stimmt mit clear: both ist auch eine Methode.

PW-toXic · 26. März 2009

Wenn du wirklich volle Flexibilität haben willst, hilft leider nur eine Tabelle

Das ist nicht ganz richtig - siehe mein Thread den ich oben verlinkt habe.

Dennoch ist in diesem Fall möglicherweise eine Tabelle die bessere Wahl.

xkynet · 26. März 2009

Das ist nicht ganz richtig - siehe mein Thread den ich oben verlinkt habe.

ich meinte damit die gleich hohe Spalten wie im edit angemerkt

PW-toXic · 26. März 2009

Ich doch auch

xkynet · 26. März 2009

schon klar aber ich hab dein post zu spät bemerkt.

Darii · 26. März 2009

@raven16: Ich hab dir doch gesagt, dass es an den floats liegt, da hilft es nicht, wenn du den Fehler woanders suchst.

raven16 · 26. März 2009

Ja du das weiß ich ja...

Ich hab aber immerhin versucht irgendwie den aufbau etwas anders zustande zu bringen wie vorher

Und ich hab nicht vor für meine Seite eine Tabelle zu benutzen...Tabellen sind für Datenausgaben gemacht und nicht zum zweck, eine Seite zu designen finde ich
Hab früher immer Tabellen benutzt aber darüber bin ich hinweg und will auf die nächste Ebene springen xD
Sowas muss doch irgendwie mit divs zu realisieren sein xD
Ich glaub ich probier das morgen wenn ich zeit hab nochmal gaaanz anders

Ich glaub wenn das weiter so geht dann lad ich mir einfach nen Template herunter wo der aufbau passt und änder alles einfach ^^

Aber der Anreiz bei mir liegt ja schon darin das selbst zu strukturieren

PW-toXic · 27. März 2009

raven ich kann dir nur allerherzlichst meinen Thread empfehlen den ich in meiner Signatur verlinkt habe oder auch ein paar posts weiter oben. Denn dort wird das Thema Tables & CSS umfangreich behandelt.. unter anderem gibt es auch ein sehr gutes Beispiel, wie man das Table Problem auch mit CSS umsetzen kann. (falls es sinnvoll ist...)
Aber wenn du wirklich unbedingt keine Layout Tables nutzen willst, dann halt ich davon sicher nicht auf

Der Grund wäre allerdings interessant ^^

Crizzo · 27. März 2009

@PW-toXic: Sry, aber Tabellen fürs Layout sind grober Unfug. Scheinbar bist du dir der Vorteile durch CSS in keinsterweise bewusst, was auch dein Thema zeigt. Aber das hat man dir ja schon gesagt: https://www.computerbase.de/forum/t...youten-besser-sind.554996/page-2#post-5670651

@raven16: Dein Link funktioniert leider nicht. Wie sieht der aktuell Code aus?
Sollte für dich interessant sein:
http://www.vorsprungdurchwebstandards.de/theory/retro-coding/
http://www.vorsprungdurchwebstandards.de/theory/semantischer-code/

Es sollte dir einfacher fallen, wenn du nicht mit solch vielen <div> beginnst, sondern für deine Inhalte passende Elemente nutzt, die du dann mit CSS positionieren und gestalten kannst.
Als Anfänger solltest du zu Beginn des Layoutprozesse ersteinmal "position" außen vor lassen. D.h. keine Elemente mit "left, top, right, bottom" usw. zu verschieben.
Versuche dich an "float" und "clear", um deine Element zu platzieren.

Wie hast du CSS gelernt? Vielleicht wäre ein strukturiertes Buch: http://little-boxes.de/ nicht schlecht oder eine Online-Einführung: http://jendryschik.de/wsdev/einfuehrung/

PW-toXic · 27. März 2009

Black.Hawk schrieb:
@PW-toXic: Sry, aber Tabellen fürs Layout sind grober Unfug. Scheinbar bist du dir der Vorteile durch CSS in keinsterweise bewusst, was auch dein Thema zeigt. Aber das hat man dir ja schon gesagt: https://www.computerbase.de/forum/t...youten-besser-sind.554996/page-2#post-5670651

Es ist grober Unfug Layout-Tabellen systematisch zu verteufeln, solange es kein zufriedenstellendes Aquivalent in CSS gibt, das praktikabel ist, und auf allen Browsern funktioniert.

Solange du mir hier kein ordentliches Beispiel geben kannst, oder einen Grund warum hier Tabellen nicht erlaubt sind, und der Grund auf das Problem anwendbar ist, dannhaben hier Tabellen sehr wohl etwas verloren.

xkynet · 27. März 2009

Ich mach seit Jahren eine gute Mischung vom beiden und fahre damit eigentlich ganz gut. Für das ganz grobe Layout benutze ich eine Tabelle, da das meist mit CSS zu kompliziert ist und man ständig probleme mit floats und ähnlichem bekommt.
Aber ansonsten alles mit divs. Ich benutze manchmal dennoch p-Tags (also grad in Blogtexten) und formatiere sie per CSS. auf h1 etc. verzichte ich aber komplett.

PW-toXic · 27. März 2009

Und genau darum geht es. Das erstellend er Seite soll möglichst einfach sein, und nicht künstlich durch irgendeine sinnlose Dogmatik verschlimmert werden.

Ich benutze keine Tabellen, weil ich mich gut genug und sehr ausführlich mit CSS beschäftigt habe, aber ich finde es lächerlich, das von hobby CSSlern zu warten, da es schlicht und einfach ehrheblich schwieriger ist die Eigenschaften einer Tabelle mit CSS umzusetzen.

Es gibt zwar ein Äquivalent in CSS (display: table-cell usw.) aber das funktioniert nicht auf allen Browsern.

Zu h1:
Es gibt nichts was in irgendeiner weise einfacher und besser ist als ein h1 Tag zu benutzen. Benutze dieses also bitte für überschrift (z.b. bei einem blog)
Es spricht rein überhaupt garnix gegen, sondern nur etwas dafür, da Suchmaschinen diesen Teil aus Überschrift erkennen können.

CSS Seitenaufbau funktioniert nicht ordentlich trotz Doctype

Lieutenant

Lt. Junior Grade

Lieutenant

Lt. Junior Grade

Lieutenant

Lieutenant

Lieutenant

Lieutenant

Lieutenant

Lieutenant

Lieutenant

Lieutenant

Lieutenant

Lt. Junior Grade

Lieutenant

Lieutenant

Redakteur

Lieutenant

Lieutenant

Lieutenant

Ähnliche Themen