Hallo Zusammen,
ich habe vor kurzem mit dem Erstellen einer Homepage angefangen.
Dabei bin ich auf dieses Forum gestoßen und konnte mir auch einige gute Tipps holen.
Ich hoffe, dass diese Frage im richtigen Forum steht, da es um HTML und CSS geht.
Jedoch hab ich jetzt ein Problem, für das ich einfach keine Lösung finde.
Daher hoffe ich, dass mir jemand bei der Fehlereingrenzung und evtl. Lösung helfen kann.
Ich zeig Euch einfach mal ein Bild von der Seite:


Die Seite soll wie in dem ersten Bild dargestellt aussehen.
Im Internet Explorer 9, allen aktuelleren Firefox Versionen, sowie auf allen mir vorliegenden Smartphones wird die Seite auch so angezeigt.
Leider zeigt der IE8, und dessen Vorgänger, die Seite wie auf dem rechten Bild dargestellt, an.
Hier fehlt also die Hintergrundgrafik auf den Flächer der Navigation und des main-Bereichs.
Hier mal der Code dazu:
Und der CSS Code, der sich in einer separaten Datei befindet:
Leider bin ich bei diesem Problem an meine Grenzen gestoßen.
Daher hoffe ich, dass jemand die Zeit und Lust findet, den Code mal kurz durchzuschauen.
Schonmal im voraus besten Dank.
Viele Grüße
Stefan
ich habe vor kurzem mit dem Erstellen einer Homepage angefangen.
Dabei bin ich auf dieses Forum gestoßen und konnte mir auch einige gute Tipps holen.
Ich hoffe, dass diese Frage im richtigen Forum steht, da es um HTML und CSS geht.
Jedoch hab ich jetzt ein Problem, für das ich einfach keine Lösung finde.
Daher hoffe ich, dass mir jemand bei der Fehlereingrenzung und evtl. Lösung helfen kann.
Ich zeig Euch einfach mal ein Bild von der Seite:


Die Seite soll wie in dem ersten Bild dargestellt aussehen.
Im Internet Explorer 9, allen aktuelleren Firefox Versionen, sowie auf allen mir vorliegenden Smartphones wird die Seite auch so angezeigt.
Leider zeigt der IE8, und dessen Vorgänger, die Seite wie auf dem rechten Bild dargestellt, an.
Hier fehlt also die Hintergrundgrafik auf den Flächer der Navigation und des main-Bereichs.
Hier mal der Code dazu:
Code:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="Schützenfreunde Emtmannsberg" name="Description" />
<meta content="schützen, schuetzen, freunde, emtmannsberg, schuetzenfreunde, schützenfreunde" name="Keywords" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="Global" name="Distribution" />
<meta content="xxx" name="Author" />
<meta content="index,follow" name="Robots" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Links</title>
<style type="text/css">
body, td, th {
color: #FFF;
background-color: #FFF;
}
a:link {
color: #F00000;
}
a:visited {
color: #F00000;
}
a:active {
color: #F00000;
}
body {
background-color: #FFF;
background-image: url(images/verwaltung/back.jpg);
background-repeat: repeat-x;
}
a:hover {
color: #F00000;
}
#apDiv1 {
position: absolute;
z-index: 1;
left: 31px;
top: 25px;
}
#apDiv2 {
position: absolute;
width: 193px;
height: 54px;
z-index: 1;
left: 24px;
top: 33px;
}
</style>
</head>
<body>
<div id="window">
<div id="head">
<a href="index.html">Home</a> | <a href="impressum.html">Impressum</a> |
<a href="kontakt.html">Kontakt </a></div>
<div id="menu">
<ul>
<li>Herzlich willkommen...</li>
</ul>
</div>
<div id="header">
<br />
<div style="text-align: right;">
<img alt="" src="http://www.html.de/images/wappen/wappen.gif" style="border: 0px solid; width: 185px; height: 230px;" />
</div>
<h1 id="logo" style="color: rgb(0, 0, 0);">Schützenfreunde</h1>
<h2 id="slogan" style="color: rgb(0, 0, 0);">Emtmannsberg...</h2>
</div>
<div id="content-window">
<div id="sidebar">
<h1>Menü</h1>
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="wirueberuns.html">Wir über uns</a></li>
<li><a href="vorstandschaft.html">Vorstandschaft</a></li>
<li><a href="schuetzenkoenige.html">Schützenkönige</a></li>
<li><a href="chronik.html">Chronik</a></li>
<li><a href="schiessbetrieb.html">Schießbetrieb</a></li>
<li><a href="rundenwettkampf.html">Rundenwettkampf</a></li>
<li><a href="jugendarbeit.html">Jugendarbeit</a></li>
<li><a href="schuetzenzeitung.html">Schützenzeitung</a></li>
<li><a href="bildergalerie.html">Bildergalerie</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li id="besetzt"><a href="links.html">Links</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<br />
</div>
<div id="main">
<h1>Links</h1>
<br />
<span style="color: rgb(0, 0, 0);"><br />
Hier...<br />
</span></div>
</div>
<div id="fusszeile">
<p>© <span style="font-weight: bold;">2012 Sch...<br />
</span></p>
<p></p>
</div>
</div>
</body>
</html>[/HTML]
Und der CSS Code, der sich in einer separaten Datei befindet:
Code:
* {
margin: 0;
padding: 0;
font-size: 12px;
}
body {
color: #000000;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #FFF;
background-image: none;
}
a {
background: inherit;
text-decoration: none;
color: #000000;
}
a:hover {
background: inherit;
color: #2C8195;
}
h1, h2, h3 {
font-family: Arial, Helvetica, sans-serif;
font-weight: Bold;
}
h1 { font-size: 140%; }
h2 { font-size: 110%; text-transform: uppercase; }
h3 { font-size: 110%; color: #007E80; }
h1, h2, h3 {
margin: 0;
padding: 10px;
}
p {
margin: 0;
padding: 10px;
line-height: 2em;
color: #808080;
}
ul, ol {
margin: 0px -5px;
padding: 0 30px;
}
img {
}
img.float-right {
margin: 5px 0px 5px 10px;
}
img.float-left {
margin: 5px 10px 5px 0px;
}
#window {
width: 1000px;
text-align: left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-repeat: repeat-x;
background-position: center top;
}
#content-window {
position: relative;
width: 1000px;
margin: 0 auto;
padding: 0;
background-color: #FFF;
}
#header {
position: relative;
width: 1000px;
height: auto;
padding: 0;
font-size: 14px;
color: #FFF;
background-image: none;
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header h1#logo {
position: absolute;
margin: 0;
padding: 0;
letter-spacing: normal;
color: #FFF;
text-transform: none;
top: 82px;
left: 43px;
width: auto;
height: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 38px;
font-weight: bold;
}
#head {
clear: both;
width: 1000px;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
font-weight: bolder;
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-position: center top;
background-color: #28353e;
text-align: right;
}
#menu {
clear: both;
width: 1000px;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
font-weight: bolder;
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-position: center top;
background-color: #005000;
}
/* Punke wie z.B. "#menu ul{}" aus Zeichengründen entfernt */
#main {
float: right;
width: 760px;
padding: 0;
margin: 0;
}
#main h1 {
color: #000000;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#sidebar {
float: left;
width: 200px;
padding: 0;
margin: 0;
line-height: 2em;
}
#sidebar h1 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bold;
border: 1px none #EFF0F1;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
background-color: #005000;
}
#sidebar ul.sidemenu {
color: red;
text-align: left;
margin: 5px -100px 10px 0; padding: 10;
text-decoration: none;
}
#sidebar ul.sidemenu li {
list-style: square;
padding: 3px 0px 3px 0px;
margin: 0px 2px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
#sidebar ul.sidemenu ul li{
list-style: disc;
padding: 3px 0px 3px 0px;
margin: 0 2px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
#sidebar ul.sidemenu a {
font-weight: bold;
background: none;
padding-top: 2px;
padding-right: 0;
padding-bottom: 2px;
padding-left: 0;
}
#sidebar ul li#besetzt a {
color: #000000;
}
#sidebar ul li#frei a {
color: #F00000;
}
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
Leider bin ich bei diesem Problem an meine Grenzen gestoßen.
Daher hoffe ich, dass jemand die Zeit und Lust findet, den Code mal kurz durchzuschauen.
Schonmal im voraus besten Dank.
Viele Grüße
Stefan