nicht angemeldet
Hi Leute. Ich habe für unser Jugendbistro eine Homepage geschrieben. Sie ist so in php geschrieben, dass zur Navigation passender html-Code erzeugt wird. Für die Darstellung ist eine css-Datei zuständig. Die Seite wird in allen Browsern (Firefox, Opera, Iron/Chrome) vernünftig dargestellt. Nur der IE zeigt sie nicht richtig an. Ich weiß ja, dass sich MS nicht an die Standards hält, aber ich hab mich nicht in dem Maße damit beschäftigt, jetzt sofort sagen zu können, woran das liegt. Hier brauche ich eure Hilfe.
Anbei zwei Screenshots, einmal von der funktionierenden Seite, einmal vom IE. Außerdem der generierte html- und der css-Code.
http://www.abload.de/image.php?img=selfmade-diner_1289910cakx.png http://www.abload.de/img/selfmade-diner-iecldu.png
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Selfmade-Diner</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="head">
<div id="headerLogo"></div>
<div id="socialNetworks">
<a target="_blank" href="http://www.facebook.com" id="Facebook" class="navTop"></a>
<a target="_blank" href="http://www.myspace.com" id="MySpace" class="navTop"></a>
<a target="_blank" href="http://www.schuelervz.net" id="SchuelerVZ" class="navTop"></a>
<a target="_blank" href="http://www.meinvz.net" id="MeinVZ" class="navTop"></a>
</div>
</div>
<div id="abstandTop"></div>
<div id="navigation">
<div id="navigationContent">
<div id="navLinks">
<div id="navLinksTitle"></div>
<div class="Seperator"></div>
<a href="index.php?nav=news" id="NewsActivated" class="navLinks"></a>
<div class="Seperator"></div>
<a href="index.php?nav=angebote" id="Angebote" class="navLinks"></a>
<div class="Seperator"></div>
<a href="index.php?nav=events" id="Events" class="navLinks"></a>
<div class="Seperator"></div>
<a href="index.php?nav=presse" id="Presse" class="navLinks"></a>
<div class="Seperator"></div>
<a href="index.php?nav=uber" id="UeberUns" class="navLinks"></a>
<div class="Seperator"></div>
</div>
<div id="gallery">
<div id="galleryTitle"></div>
<!-- Gallerie!! -->
</div>
<div id="interactive">
<div id="interactiveTitle"></div>
<div class="Seperator"></div>
<a href="index.php?nav=gaestebuch" id="Gaestebuch" class="interactive"></a>
<div class="Seperator"></div>
<a href="index.php?nav=feedback" id="Feedback" class="interactive"></a>
<div class="Seperator"></div>
<a href="mailto:nina.deutschmann@gmx.de" id="Kontakt" class="interactive"></a>
<div class="Seperator"></div>
</div>
<div id="newsletter">
<div id="newsletterTitle"></div>
<div id="newsletterForm">
</div>
</div>
</div>
<div id="navigationAbstandRechts"></div>
</div>
<div id="content">
<div id="contentAbstandTop"></div>
<div id="contentMainArea">
<h1>Homepage eröffnet</h1>
<span class="datum">03.11.2010</span>
<p>
Heute wurde offiziell die Homepage des Selfmade-Diners, Lübbeckes Jugendbistro, eröffnet.
Hier könnt Ihr unsere Angebote, Events, Fotos von der letzten Party und vieles mehr sehen!
Viele liebe Grüße
Das Selfmade-Diner Team
P.S.: Da die Seite sich noch im Aufbau befindet, sind leider noch nicht alle Informationen und Inhalte vollständig.
Wir bitten das zu entschuldigen.
</p>
<hr><br>
<span class="contentLinks" style="float:left;"><a href="index.php?nav=news&page=0">jüngere</a></span><span class="contentLinks" style="float:right;"><a href="index.php?nav=news&page=2">ältere</a></span>
</div>
<div id="contentAbstandBottom"></div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: #470f02 url("images/bg.png") repeat-x;
}
p, h1, .datum, .contentLinks {
padding: 10px;
}
h1 {
display: inline;
}
hr {
width: 95%;
}
.datum {
float: right;
font-size: 0.9em;
}
div {
float: left;
}
a {
float: left;
}
a:link {
color:white;
text-decoration:none;
}
a:visited {
color:white;
text-decoration:none;
}
a:focus {
color:white;
text-decoration:underline;
}
a:hover {
color:white;
text-decoration:underline;
}
a:active {
color:white;
text-decoration:none;
}
#container {
width: 950px;
margin: 0px auto;
}
#head {
position: relative;
width: 950px;
height: 190px;
}
#headerLogo {
width: 503px;
height: 190px;
background: url("images/headerLogo.png");
}
#socialNetworks {
position: absolute;
right: 0;
bottom: 0;
}
.navTop {
width: 111px;
height: 27px;
}
#Facebook {
background: url("images/Facebook.png");
}
#Facebook:hover {
background: url("images/Facebook_Hover.png");
}
#MySpace {
background: url("images/MySpace.png");
}
#MySpace:hover {
background: url("images/MySpace_Hover.png");
}
#SchuelerVZ {
background: url("images/SchuelerVZ.png");
}
#SchuelerVZ:hover {
background: url("images/SchuelerVZ_Hover.png");
}
#MeinVZ {
background: url("images/MeinVZ.png");
}
#MeinVZ:hover {
background: url("images/MeinVZ_Hover.png");
}
#abstandTop {
width: 950px;
height: 50px;
}
#navigation {
width: 223px;
padding-left: 6px;
padding-right: 29px;
}
#navLinks {
width: 204px;
height: 240px;
padding-top: 17px;
padding-left: 19px;
margin-bottom: 40px;
background: #2f0803 url("images/navLinksBackground.png");
}
#navLinksTitle {
width: 101px;
height: 17px;
margin-bottom: 21px;
background: url("images/navLinksTitle.png");
}
.Seperator {
width: 182px;
height: 3px;
background: url("images/Seperator.png");
}
.navLinks {
width: 80px;
height: 31px;
}
#News {
background: url("images/News.png");
}
#Angebote {
background: url("images/Angebote.png");
}
#Events {
background: url("images/Events.png");
}
#Presse {
background: url("images/Presse.png");
}
#UeberUns {
background: url("images/UeberUns.png");
}
#NewsActivated {
background: url("images/News_Hover.png");
}
#AngeboteActivated {
background: url("images/Angebote_Hover.png");
}
#EventsActivated {
background: url("images/Events_Hover.png");
}
#PresseActivated {
background: url("images/Presse_Hover.png");
}
#UeberUnsActivated {
background: url("images/UeberUns_Hover.png");
}
#News:Hover {
background: url("images/News_Hover.png");
}
#Angebote:Hover {
background: url("images/Angebote_Hover.png");
}
#Events:Hover {
background: url("images/Events_Hover.png");
}
#Presse:Hover {
background: url("images/Presse_Hover.png");
}
#UeberUns:Hover {
background: url("images/UeberUns_Hover.png");
}
#gallery {
width: 203px;
height: 264px;
padding-left: 20px;
padding-top: 16px;
margin-bottom: 40px;
background: #2f0803 url("images/galleryBackground.png");
}
#galleryTitle {
width: 106px;
height: 18px;
background: url("images/galleryTitle.png");
}
#interactive {
width: 204px;
height: 172px;
padding-left: 19px;
padding-top: 18px;
margin-bottom: 39px;
background: #2f0803 url("images/interactiveBackground.png");
}
#interactiveTitle {
width: 82px;
height: 15px;
margin-bottom: 23px;
background: url("images/interactiveTitle.png");
}
.interactive {
width: 85px;
height: 31px;
}
#Gaestebuch {
background: url("images/Gaestebuch.png");
}
#Feedback {
background: url("images/Feedback.png");
}
#Kontakt {
background: url("images/Kontakt.png");
}
#GaestebuchActivated {
background: url("images/Gaestebuch_Hover.png");
}
#FeedbackActivated {
background: url("images/Feedback_Hover.png");
}
#Gaestebuch:Hover {
background: url("images/Gaestebuch_Hover.png");
}
#Feedback:Hover {
background: url("images/Feedback_Hover.png");
}
#Kontakt:Hover {
background: url("images/Kontakt_Hover.png");
}
#newsletter {
width: 202px;
height: 89px;
padding-left: 21px;
padding-top: 16px;
background: #2f0803 url("images/newsletterBackground.png");
}
#newsletterTitle {
width: 91px;
height: 15px;
margin-bottom: 23px;
background: url("images/newsletterTitle.png");
}
#content {
width: 684px;
min-height: 10px;
font-family: Arial, Verdana, sans-serif;
color: #ffffff;
background: #2f0803
}
#contentAbstandTop {
width: 684px;
height: 6px;
background: url("images/contentAbstandTop.png");
}
#contentAbstandBottom {
width: 684px;
height: 6px;
background: url("images/contentAbstandBottom.png");
}
#navigationContent {
width: 223px;
}
#Footer {
width: 950px;
height: 30px;
background: url("images/Footer.png");
}
Gunnar Bittersmann
