✔ Über ein Hintergrund Bild ein Bild legen

Maik · 24. März 2005

Ähm Maik, Du machst mir irgendwie Angst mit diesen komischen Tricks, von wegen absolut positionieren und jetzt auch noch margin-top und so. Der Layer #logo ist bereits im Layer #head enthalten, da brauchts sowas nicht

Stimmt, ... habe im HTML-Source falsch hingeschaut und übersehen, dass das Logo-DIV ja schon im Header-DIV eingebettet ist, thanx @c2uk.

Orphelina · 31. März 2005

Sorry, ich habs voll verpeilt nochmal zu posten... Hier der Code mit dem es einwandfrei in allen Browsern funktioniert:

Code:

body {
background:#CCCCCC;
margin:0px;
padding:0px;
font-family: Arial,Verdana, Tahoma;
font-size: 12px;
color:#666666;
}
h1 {
font-family: Arial,Verdana, Tahoma;
font-size: 12px;
color:#666666;
font-weight:bold;
text-transform: uppercase;
}
#MainContainer {
left: 0px;
top: 0px;
background:#FFFFFF;
width:1020px;
height:550px;
}
#HeadContainer {
height:140px;
width:1020px;
}
#HeadGraphic {
background-image: url(bg_blue.png);
background-repeat:repeat-y;
height:100px;
width:1020px;
}
#HeadLogo {
position:absolute;
left: 818px;
top: 25px;
width:172px;
height:60px;
}
#HeadTopicImage {
position:absolute;
left:0px;
top:0px;
}
#HeadTopicTheme{
position:absolute;
left:170px;
top:0px;
}
#HeadNavi {
background:#FFFFFF;
height:40px;
width:1020px;
}
#HeadNaviContent {
padding:5px 0px 5px 200px;
font-family: Arial,Verdana, Tahoma;
font-size: 12px;
font-weight:bold;
text-transform: uppercase;
}
#MiddleContainer {
width:1020px;
height:385px;
}
#MiddleNavi {
float:left;
width:160px;
padding: 20px 0px 40px 20px;
}
#MiddleContentLeft {
float:left;
width:310px;
padding: 5px 0px 40px 20px;
}
#MiddleContentRight {
float:left;
width:310px;
padding: 5px 0px 40px 20px;
}
#MiddleNews {
float:left;
width:140px;
padding: 5px 20px 40px 20px;
}
#News { 
background:#66799C;
color:#FFFFFF;
font-weight:bold;
width:140px;
text-align:center;
}
#Footer {
height:20px;
background:#CCCCCC;
font-family: Arial,Verdana, Tahoma;
font-size: 12px;
font-weight:bold;
text-transform: uppercase;
color:#FFFFFF;
padding: 5px 0px 0px 730px;
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style_neu.css">
</head>
<body >
<div id="MainContainer">
	<!-- HEADER -->
	<div id="HeadContainer">
		<!-- Logo -->
		
    <div id="HeadLogo"><img src="logo_w.gif" width="172" height="60" /></div>
		<!-- Logo END -->
		<!-- According Topic-Image -->
    	
    <div id="HeadTopicTheme"><img src="img/platzhalter_mitte.gif" width="620" height="100"></div>	
		
    <div id="HeadTopicImage"><img src="img/platzhalter_links.gif" width="140"  height="150"></div>
    	<!-- According Topic-Image END -->
    	<!-- Upper Header Section - 100x1020 Pixel -->
    	<div id="HeadGraphic"></div>
		<!-- Upper Header Section END -->
		<div id="HeadNavi">
			<div id="HeadNaviContent">
				<a href="">Bla1</a> |
				<a href="">Bla2</a> |
				<a href="">Bla3</a> |
				<a href="">Bla4</a>
			</div>
		</div>
	</div>
	<!-- HEADER END -->
	
	<!-- MIDDLE-SECTION -->
	<div id="MiddleContainer">
		<div id="MiddleNavi">Navi</div>
		<div id="MiddleContentLeft"><h1>Überschrift</h1></div>
		<div id="MiddleContentRight">Normaler Text</div>
		
    <div id="MiddleNews">
	<div id="News">Aktuelles</div>
	</div>
  </div>
	<!-- MIDDLE-SECTION END -->
	
	<!-- FOOTER -->
	<div id="Footer">
		<a href="">Bla5</a> |
		<a href="">Bla6</a> |
		<a href="">Bla7</a> |
		<a href="">Bla8</a>
	</div>
	<!-- FOOTER END -->
</div>
</body>
</html>

✔ Über ein Hintergrund Bild ein Bild legen

Maik

Orphelina

Erfahrenes Mitglied

Neue Beiträge