Hi Leute,
ich bin neu hier im Forum und würde euch gleich bitten mal meine Seite zu prüfen. Im FF2 und IE7 klappt alles wunderbar im Opera leider schon nichtmehr. Aber noch viel weniger im <=IE6!
Sie besteht aus einem großen Div fürs Hintergrundbild das optimal auf 100% läuft und das Bild auch dorthin zieht. Auf diesem Div soll dann der Wrapper usw folgen. Im <=IE6 werden zudem die Bilder der Navi verissen weil er einen Abstand zwischen diesen reinmacht. Aber seht bitte selbst:
j-haag
Ich bin dankbar für hegliche Hilfe und Kritik!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<html>
<head>
<title>j-haag</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="INDEX,FOLLOW" />
<meta name="Title" content="Kfz-Werkstatt P. Wieser" />
<meta name="Author" content="Sven Haag, www.sven-haag.de" />
<meta name="Publisher" content="Kfz-Werkstatt P. Wieser" />
<meta name="Revisit-after" content="14 days" />
<meta name="Keywords" content="KFZ-Instandsetzung, Reparatur, Wartung, Mechanik, Karosseriereparaturen, Unfallreparaturen, Karosseriearbeiten, Unfallinstandsetzung, Autoreparatur, Wintercheck, Frühjahrscheck, Ölwechsel, uvm." />
<meta name="Description" content="Kfz-Werkstatt P. Wieser" />
<meta name="page-topic" content="Dienstleistung" />
<meta name="audience" content="Alle" />
<meta name="Language" content="Deutsch" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="hintergrund">
<img src="bg.jpg" alt="" style="height:100%; width:100%; position: absolute; border:0; margin:0; padding:0; left:0px; top:0px;">
<div id="gesamtinhalt">
<div id="banner"><img src="http://xhtmlforum.de/images/top_jhaag.jpg" alt="Menuschild"></div>
<div id="menu">
<a href="index.html"><img src="http://xhtmlforum.de/images/Untitled-2_01.jpg" alt="Startseite"></a>
<a href="motorrad.html"><img src="http://xhtmlforum.de/images/Untitled-2_02.jpg" alt="Motorrad"></a>
<a href="mist.html"><img src="http://xhtmlforum.de/images/Untitled-2_03.jpg" alt="Mist"></a>
<a href="uebermich.html"><img src="http://xhtmlforum.de/images/Untitled-2_04.jpg" alt="Über mich"></a>
<a href="links.html"><img src="http://xhtmlforum.de/images/Untitled-2_05.jpg" alt="Links"></a>
<a href="impressum.html"><img src="http://xhtmlforum.de/images/Untitled-2_06.jpg" alt="Impressum"></a>
</div>
<div id="schatten"><img src="http://xhtmlforum.de/images/schatten.jpg" alt=""></div>
<div id="content">
<h1>Überschrift</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation
ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem veleum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<a href="test.html" class="klasse"></a>
</p>
</div>
<div id="clear"></div>
</div>
</div>
</body>
</html>
Code:
html, body {
font-family: Arial;
font-size: 1em;
margin: 0;
padding: 0;
background-color: #cccccc;
text-align: center;
height: 100%;
}
img { border:0; margin:0; padding:0; left:0px; top:0px; }
a {
border: 0 none;
float: left;
display: block;
}
p {
font-family: Arial;
font-size: 1em;
color: #ffffff;
}
h1 {
font-family: Arial;
font-size: 1.5em;
color: #ffffff;
text-decoration: underline;
letter-spacing: 0.2em;
}
#hintergrund { <!--NICHT-TRANSPARENTE:-->
position: relative;
min-width: 100%;
min-height: 100%;
border: 0 none;
z-index: 0;
/*background-image: url(images/bg.jpg);*/
}
#gesamtinhalt {
position: absolute;
width: 900px;
min-height: 100%;
height: auto !important;
height: 100%;
background-color: #6699cc;
margin: 0 auto;
padding: 0;
border: 0 none;
left: 50%;
margin-left: -450px;
}
#banner {
height: 122px;
padding: 0;
border: 0 none;
}
#menu {
height: 46px;
padding: 0;
border: 0 none;
}
#schatten {
height: 22px;
padding: 0;
border: 0 none;
}
#content {
position: relative;
border: 0 none;
background-color: #6699cc;
margin: 0 0;
padding: 20px;
text-align: justify;
}
#clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
}