Logo positionierung .. IE-Problem

Status
Nicht offen für weitere Antworten.
S

Spontan

Erfahrenes Mitglied
Wunderschönen Sonntag,

ich bastel grad an einem Layout, hab mich mal von Tabellen wegbewegt.
Klappte auch alles ganz gut .. bis ich den IE aufgemacht habe. (Mozilla/Netscape funktioniert)

Das Logo oben und den Banner schickt es nach Rechts in die Wüste...
Vieleicht kann mir jemand nen Tipp geben, wie ich das im IE zum laufen bring.

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<link href="media_css.css" rel="stylesheet" type="text/css"/>
		<title>testsite</title>
  </head>

<body>
<br>
<div id="box">

	<div id="logo"><img src="img/logo.jpg" border="0" height="74" width="197"></div>
	<div id="banner"><img src="img/banner_1.jpg" border="0" height="74" width="436""></div>

	
	
	<div id="links"><br><br><br><br><br><br><br><br>
		<h1>MENU Links</h1>
    Ms. Men&uuml;Links
 	</div>

	<div id="inhalt"><br><br><br><br><br><br>
		<h1>INHALT</h1>
    Darf ich mich vostellen, Herr Inhalt.<br><br><br><br><br><br>
  </div>

	<div id="rechts">
		<br><br><br><br><h1>MENU rechts</h1>
    Ms. Men&uuml;-Rechts
	</div>
	<br clear="all">
    
	<div id="footer"><img src="img/footer.jpg" border="0" height="128" width="640"></div> 
</div>
<br>
</body></html>

CSS:
Code: 
html { 
  padding:0px;
  margin:0px;
}

body {
  background-color: #ffffff;
  font-size: 12px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color:#000000;  
  text-align:center;
	margin:0px;
	padding:0px;
}



p,pre, h1 {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
	}

a { 
color: #ff66cc;
font-size: 11px;
background-color:transparent;
text-decoration: none; 
}



/*  positioning-layers statisch und absolut */

#box {
width:780px;
margin: 0px auto;
padding:0px;
text-align:left;
background-color:#FAEDB6;
}

#links {
width:120px;
padding:0px;
float:left;
background-color:#FAEDB6;
}

#inhalt {
width:520px;
padding:0px;
float:left;
background-color:#fff;
overflow: auto;
}

#rechts {
width:120px;
padding:0px;
float:left;
background-color:#FAEDB6;
}
#logo {
width:520px;
padding-top:10px;
padding-left:10px;
background-color:transparent;
position: absolute;
}
#logo {
width:197px;
padding-top:8px;
padding-left:8px;
background-color:transparent;
position: absolute;
}
#banner {
width:436px;
padding-top:8px;
padding-left:204px;
background-color:transparent;
position: absolute;
}
#footer {
width:780px;
margin: 0px auto;
text-align:left;
background-color:#FAEDB6;
}
 
Probier mal folgendes Markup:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>testsite</title>
	<link href="media_css.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="box">

	<div id="logo"><img src="img/logo.jpg" width="197" height="74" /></div>
	<div id="banner"><img src="img/banner_1.jpg" width="436" height="74" /></div>
	
	<div id="links">
		<h1>MENU Links</h1>
		<p>Ms. Men&uuml;Links</p>
	</div>

	<div id="inhalt">
		<h1>INHALT</h1>
		<p>Darf ich mich vostellen, Herr Inhalt.</p>
	</div>

	<div id="rechts">
		<h1>MENU rechts</h1>
		<p>Ms. Men&uuml;-Rechts</p>
	</div>
	<br clear="all" />
    
	<div id="footer"><img src="img/footer.jpg" width="640" height="128" /></div>
</div>
</body>
</html>
mit folgendem CSS:
Code: 
* {
	margin:			0;
	padding:		0;
	line-height:		1;
	border-style:		none;
}
body {
	margin:			1em 0;
	color:			#000;
	font-size:		12px;
	font-family:		Verdana, Arial, SunSans-Regular, Sans-Serif;
	text-align:		center;
	background-color:	#ffffff;
}
p, pre, h1 {
	margin:			0 10px 10px 10px;
}
h1 {
	font-size:14px;
	padding-top:10px;
	text-transform:uppercase;
	color: #564b47;
	background-color: transparent;
}
a { 
	color: #ff66cc;
	font-size: 11px;
	background-color:transparent;
	text-decoration: none; 
}
#box {
	position:		relative;
	width:			780px;
	margin:			0 auto;
	text-align:		left;
	background-color:	#FAEDB6;
}
#logo {
	content:		"Logo";
	float:			left;
	width:			197px;
	height:			74px;
	background-color:	#f80;
}
#banner {
	content:		"Banner";
	width:			436px;
	margin-left:		197px;
	height:			74px;
	background-color:	#08f;
}
#links {
	float:			left;
	width:			120px;
	background-color:	#FAEDB6;
}
#inhalt {
	float:			left;
	overflow:		auto;
	width:			520px;
	background-color:	#fff;
}
#rechts {
	float:			left;
	width:			120px;
	background-color:	#FAEDB6;
}
#footer {
	margin:			0 auto;
	width:			780px;
	height:			128px;
	background-color:	#FAEDB6;
}
 
Danke klappt eigendlich,
nur das Logo und der Banner sollten noch 8px von oben Abstand haben und hinter dem Logo Banner sollte es weiß bleiben.. siehe Screen.

Ich habe es hiermit versucht, aber der BG ist immernoch gelb...
Code: 
#logo {
	content:		"Logo";
	float:			left;
	width:			197px;
	height:			74px;
	background-color: transparent;
	padding-left: 8px;
	padding-top: 8px;
}
#banner {
	content:		"Banner";
	width:			436px;
	margin-left:		197px;
	height:			74px;
	background-color: transparent;
	padding-left: 8px;
	padding-top: 8px;
}
 

Anhänge

  • bild.jpg
    bild.jpg
    23,4 KB · Aufrufe: 26
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück