• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Design mit CSS

S

Soeren

New member
Hi, ich bastel gerade an einer kleinen Website,
hab früher meine Seiten zu Beginn mit Frames erstellt. Bin dann auf Tabellen umgestiegen und nun versuche ich mich an Design per CSS/DIV
Doch irgendwie hab ich ein Problem.
Mein HTML- und CSS-Code wurden per W3.org validiert und sind in Ordnung.
Doch zeigt mir der IE ein ganz anderes Bild als Firefox, wo die Darstellung 100%ig so ist, wie ich sie haben möchte.

Hier mal die codes:
CSS:
HTML: 
body {
	font-family: Arial, Helvetica, sans-serif;
}

td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}

div.Tabelle_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}
div.menu {
	position: absolute;
	top: 70px;
	left: 10px;
	bottom: 70px;
	z-index: 2;
	text-align: center;
	border-color: #9999FF;
	border-style: dashed;
	width: 150px
}

div.inhalt {
	position: absolute;
	top: 70px;
	left: 200px;
	right: 30px;
	z-index: 2;
	bottom: 70px;
	text-align: center;
	border-color: #9999FF;
	border-style: dashed;

}

div.center {
	background-color: #CCCCFF;
	position: absolute;
	top: 61px;
	left: 0px;
	bottom: 61px;
	width: 100%;

	z-index:1
}
div.head_bg {
	background-color: #9999FF;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 61px;
	z-index:1
}
div.foot_bg {
	background-color: #9999FF;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 61px;
	z-index:1
}
div.oben_1 {
	position:absolute;
	left:0px;
	top:0px;
	width:250px;
	height:61px;
	z-index:2
}

div.oben_2 {
	position:absolute;
	right:0px;
	top:0px;
	width:273px;
	height:61px;
	z-index:3
}
div.bottom {
	position:absolute;
	bottom:0px;
	width:100%;
	height:60px;
	z-index:2
}

HTML:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WEBSITE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="mein.css">
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div class="Tabelle_01">
	<div class="oben_1">
		<img src="Bilder/top_eye.gif" width="250" height="61" alt="Augen">
	</div>
	<div class="head_bg"> </div>
	<div class="oben_2">
		<img src="Bilder/top_text.gif" width="273" height="61" alt="Fritscheweb.de">
	</div>
	<div class="center"> </div>
	<div class="foot_bg"> </div>
	<div class="menu"><br>DAS MENU</div>
	<div class="inhalt"> </div>
	
	<div class="bottom" align="center">
		<img src="Bilder/bottom.gif" width="700" height="60" alt="Pictures">
	</div>
</div>

</body>
</html>

Fehler im IE:
Die Class "Div.center" füllt nich den kompletten innenbereich aus.

Die Class "Div.bottom" wird gar nicht angezeigt

Die Class "Div.Menu" der von mir gewählte Rahmen wird nicht bis unten durchgezogen, genau wie bei "Div.Inhalt"

Vielleicht kann das ja mal jemand checken und mir helfen, wäre super
 
Hab noch ein wenig gebastelt, das Einzige was nun noch nicht geht ist die Class "Div.Menu"

denn, der von mir gewählte Rahmen wird nicht bis unten durchgezogen, genau wie bei "Div.Inhalt"

CSS:
Code: 
body {
	background-color: #CCCCFF;
	font-size: 12px;
   font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
   padding:0px;
   margin:0px;
   height: 100%;
}


td {
	font-family: Arial, Helvetica, sans-serif;
}

th {
	font-family: Arial, Helvetica, sans-serif;
}

div.Tabelle_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}
div.menu {
	position: absolute;
	top: 70px;
	left: 10px;
	bottom: 70px;
	z-index: 2;
	background-color: #CCCCFF;
	text-align: center;
	border-color: #9999FF;
	border-style: dashed;
	width: 150px;
	margin: 5Px
}

div.inhalt {
	position: absolute;
	top: 70px;
	left: 200px;
	right: 30px;
	z-index: 2;
	bottom: 70px;
	text-align: center;
	border-color: #9999FF;
	border-style: dashed;
	background-color: #CCCCFF;
	margin: 5Px
}

div.center {
	position: absolute;
	top: 61px;
	left: 0px;
	bottom: 61px;
	width: 100%;
	height: 100%;
	background-color: #CCCCFF;
	z-index:1
}
div.head_bg {
	background-color: #9999FF;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 61px;
	z-index:1
}
div.foot_bg {
	background-color: #9999FF;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 63px;
	z-index:1
}
div.oben_1 {
	position:absolute;
	left:0px;
	top:0px;
	width:250px;
	height:61px;
	z-index:2
}

div.oben_2 {
	position:absolute;
	right:0px;
	top:0px;
	width:273px;
	height:61px;
	z-index:3
}
div.bottom {
	position:absolute;
	bottom:0px;
	width:100%;
	height:60px;
	z-index:2
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben