Hallo zusammen,
ich habe mich ein wenig in CSS eingearbeitet und versuche gerade eine Homepage zu erstellen. Diese Page besteht aus verschiedenen DIV-Boxen.
Dort ist eine Haupt-Div-Box und innerhalb dieser Box habe ich verschiedene Div-Container benutzt um grafische Elemente zu positionieren. Die Haupt-Box hat einen Hintergrundbild und die drüberliegenden DIV-Container, haben als Background-Bild eine png- Datei. Im Safari sehe ich auch noch etwas vom Hintergrund der Hauptbox. Allerdings im Internet Explorer sind die Div-Boxen, die oberhalb der Hauptdiv-Box liegen Grau hinterlegt.
Ich habe nichts gefunden, wie ich das beheben kann.
Hat jemand eine Ahnung, was ich falsch gemacht habe??
Homepage kann sich hier angeschaut werden:
Hier der Code in der HTML Datei:
Ein Auszug aus der CSS-Datei
ich habe mich ein wenig in CSS eingearbeitet und versuche gerade eine Homepage zu erstellen. Diese Page besteht aus verschiedenen DIV-Boxen.
Dort ist eine Haupt-Div-Box und innerhalb dieser Box habe ich verschiedene Div-Container benutzt um grafische Elemente zu positionieren. Die Haupt-Box hat einen Hintergrundbild und die drüberliegenden DIV-Container, haben als Background-Bild eine png- Datei. Im Safari sehe ich auch noch etwas vom Hintergrund der Hauptbox. Allerdings im Internet Explorer sind die Div-Boxen, die oberhalb der Hauptdiv-Box liegen Grau hinterlegt.
Ich habe nichts gefunden, wie ich das beheben kann.
Hat jemand eine Ahnung, was ich falsch gemacht habe??
Homepage kann sich hier angeschaut werden:
Hier der Code in der HTML Datei:
HTML:
<body>
<div id="main">
<div id="navi"><a id="button_home" href="http://www.tagesschau.de/"></a>
<a id="button_aktuelles"></a>
<a id="button_team"></a>
<a id="button_konzept"></a>
<a id="button_newsletter"></a>
<a id="button_kontakt"></a>
<a id="button_login"></a>
</div>
<div id="schirm"><a id="tooltip"><span><strong>KITA ZAUBERLAND</strong><br />Hier kommt der Text vom Zauberland. </span></a></div>
<div id="huegel"> </div>
<div id="hoehle">
<a id="tooltip2"><span><strong>KITA Räuberhöhle</strong><br />Hier kommt der Text vom Räuberhöhle</span></a> </div>
<div id="sonne"> </div>
<div id="flagge"> <marquee scrollamount="5" scrolldelay="5">
<b><img src="EinzelneBilder/Bilder/flagge_text.png" width="540" height="150" /></b>
</marquee>
</div>
</div>
</body>Ein Auszug aus der CSS-Datei
Code:
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body {
color:#09F;
background-color: #5790d7;
}
html, main { height: 100%;
margin: 0 auto;
}
/*Haupt-Box --> Box zum Inhalt darstellen. */
div#main {
position: absolute;
top: 0px;
right: auto;
left: 50%;
bottom: 5px;
/* zentrieren*/
margin-top:2px;
margin-left: -512px;
margin-right: auto;
margin-bottom: 0px;
/*zentrieren Ende*/
width: 1024px; /*Grösse des Bildes*/
height: 764px;
background:url(EinzelneBilder/Bilder/himmel_gross.jpg) no-repeat;
border: 5px #0FC;
border-style:ridge;
font-size: 12px;
padding-top: 0px;
text-align: center;
color: #cccccc;
z-index:1;
}
div#huegel {
position: absolute;
bottom: 0px;
left: 0px;
right:0px;
height:450px;
width:1024px;
/* border:4px solid #000;*/
background-image:url(EinzelneBilder/Bilder/huegel_schmetterlinge.png);
background-repeat:no-repeat;
z-index:2;
}
div#schirm {
position: absolute;
top: 0px;
left: 365px;
height:370px;
width:170px;
/*border:4px solid #000;*/
background-image:url(EinzelneBilder/Bilder/ballon.png);
background-repeat:no-repeat;
z-index:10;
}
Zuletzt bearbeitet von einem Moderator:
