DerMilchmann
Mitglied
Hallo liebe tutorials.de community,
ich habe eine Image map erstellt die der Internet Explorer nicht richtig darstellen kann, wenn ich in der Navigationsleiste oben über einen link fahren soll, soll unten in dem Bild eine Grafik erscheinen! Wenn ihr die haus.html mit dem Firefox öffnet und das Ergebnis der .css mit der Darstellung des IEs vergleicht wird ihr mein Problem schnell erkennen können!
Bitte um schnelle hilfe!
Vielen lieben dank im Vorraus!
Mfg DERMILCHMANN
hier der link zu der datei!
http://schnipp Edit by Maik: existiert nicht mehr
Wenn das unter keinen Umständen im IE funktionieren sollte, dann schreibt mir das bitte!
Wär euch sehr verbunden!
Danke
Ich füge mal den Quelltext hinzu, der in der zip auch beinhaltet ist.
html
Schreibt ruhig wenn ihr nicht verstehen solltet was ich meine!
[editpost by mod]
ich habe eine Image map erstellt die der Internet Explorer nicht richtig darstellen kann, wenn ich in der Navigationsleiste oben über einen link fahren soll, soll unten in dem Bild eine Grafik erscheinen! Wenn ihr die haus.html mit dem Firefox öffnet und das Ergebnis der .css mit der Darstellung des IEs vergleicht wird ihr mein Problem schnell erkennen können!
Bitte um schnelle hilfe!
Vielen lieben dank im Vorraus!
Mfg DERMILCHMANN
hier der link zu der datei!
http://schnipp Edit by Maik: existiert nicht mehr
Wenn das unter keinen Umständen im IE funktionieren sollte, dann schreibt mir das bitte!
Wär euch sehr verbunden!
Danke
Ich füge mal den Quelltext hinzu, der in der zip auch beinhaltet ist.
Code:
/* CSS Document */
* {
font-family:Verdana, Arial, Helvetica, sans-serif; border:none
}
body {
margin:0; padding:0; font-size:small; color:#000000; background-color:#FFF1C0;
}
@font-face {
font-family:Lucida Calligraphy; src:url(img/LCALLIGf);
}
.nav_abstand {
margin-bottom:5px;
}
#container {
width:982px; height:604px; position:absolute; top:50%; left:50%; margin:-302px 0 0 -491px;
}
#container_left {
float:left; width:330px;
}
#header1 {
background-image:url(img/header1.gif); background-repeat:no-repeat; width:330px; height:341px;
}
#nav {
background-image:url(img/nav.gif); background-repeat:no-repeat; width:330px; height:263px;
}
ul {list-style-type: none; padding-left:50px; padding-top:20px; margin:0; font-weight:bold;
}
li a { font-size:large; text-decoration: none; color:#997948; background:transparent none; padding:0; margin:0;font-family:Lucida Calligraphy;
}
li a:hover {color:#A34D00; background:transparent none;
}
li a:active {color:#A34D00; background:transparent none;
}
#container_right {
float:right; width:652px;
}
#header2 {
background-image:url(img/header2.jpg); background-repeat:no-repeat; width:652px; height:279px;
}
#content {
background-image:url(img/content.gif); background-repeat:no-repeat; width:652px; height:325px;
}
#contentgrundriss {
background-image:url(img/contentclear.gif); background-repeat:no-repeat; width:652px; height:325px; padding-top:35px;
}
/* Home */
.haus {
padding-left:30px;padding-top:5px; padding-bottom:0px;
}
.text {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; width:220px; padding-left:40px; color:#4A341A; background:transparent none;
}
.text2 {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:small; color:#4A341A; background:transparent none;
}
/* Unser Haus */
#grundriss {
width:240px; height:249px; position:relative;
}
#grundriss ul {
margin:0; padding:0; list-style:none; display:block;
}
#grundriss .wohnen a .hotspot {
background-image:url(img/wohnen.gif); background-repeat:no-repeat; visibility:hidden;
top:80px;
left:1px;
position:absolute; width:65px; height:110px;
}
#grundriss .kueche a .hotspot {
background-image:url(img/kueche.gif); background-repeat:no-repeat; visibility:hidden;
top:118px;
left:-167px;
position:absolute; width:59px; height:72px;
}
#grundriss .bad a .hotspot {
background-image:url(img/bad.gif); background-repeat:no-repeat; visibility:hidden;
top:119px;
left:-155px;
position:absolute; width:38px; height:57px;
}
#grundriss .schlafen a .hotspot {
background-image:url(img/schlafen.gif); background-repeat:no-repeat; visibility:hidden;
top:22px;
left:-117px;
position:absolute; width:182px; height:70px;
}
#grundriss .flur a .hotspot {
background-image:url(img/flur.gif); background-repeat:no-repeat; visibility:hidden;
top:50px;
left:-137px;
position:absolute; width:89px; height:27px;
}
#grundriss .abstellraum a .hotspot {
background-image:url(img/abstellraum.gif); background-repeat:no-repeat; visibility:hidden;
top:77px;
left:-126px;
position:absolute; width:38px; height:22px;
}
#grundriss a {
position:absolute;
top:-29px;
margin-left:200px;
width: 120px;
left: 22px;
}
#grundriss .wohnen a {
top:-15px;
left:-195px;
}
#grundriss .schlafen a {
top:-15px;
left: -80px;
}
#grundriss .kueche a {
top:-15px;
left: 37px;px;
}
#grundriss .bad a {
top:-15px;
left: 98px;
}
#grundriss .abstellraum a {
top:-15px;
left: 143px;
}
#grundriss .flur a {
top:-15px;
left: 248px;
}
/* IE Problem*/
#grundriss a:hover { border:none; }
#grundriss a:hover .hotspot {
visibility:visible;
}
.clear {
clear:both;
}
html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href ="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Ferienhaus-Zieseniss</title>
</head>
<body>
<div id="container">
<div id="container_left">
<div id="header1"></div>
<div id="nav">
<ul>
<li class="nav_abstand"><a href="index.html" id="home">Home</a></li>
<li class="nav_abstand"><a href="haus.html" id="haus">Unser Haus</a></li>
<li class="nav_abstand"><a href="freizeit.html" id="freizeit">Freizeit</a></li>
<li class="nav_abstand"><a href="preise.html" id="preise">Preise</a></li>
<li class="nav_abstand"><a href="index.html" id="anfahrt" >Anfahrt</a></li>
<li class="nav_abstand"><a href="haus.html" id="kontakt" >Kontakt</a></li>
<li> <a href="freizeit.html" id="verfügbarkeit" >Verfügbarkeit</a></li>
</ul>
</div>
</div>
<div id="container_right">
<div id="header2"></div>
<div id="contentgrundriss">
<div id="grundriss">
<img src="img/grundriss.gif" height="249" width="240" alt="grundriss"/>
<ul>
<li class="wohnen">
<a class="text2" href="wohnen.hrml" title="Wohnzimmer">
<span class="hotspot"></span>
<img src="img/dot.gif" /> Wohnzimmer</a></li>
<li class="kueche">
<a class="text2" href="kueche.hrml" title="Küche">
<span class="hotspot"></span>
<img src="img/dot.gif" /> Küche</a></li>
<li class="bad">
<a class="text2" href="bad.hrml" title="Bad">
<span class="hotspot"></span>
<img src="img/dot.gif" /> Bad</a></li>
<li class="schlafen">
<a class="text2" href="schlafen.hrml" title="Schlafzimmer">
<span class="hotspot"></span>
<img src="img/dot.gif" /> Schlafzimmer</a></li>
<li class="flur">
<a class="text2" href="flur.hrml" title="Flur mit Einbauschränken">
<span class="hotspot"></span>
<img src="img/dot.gif" /> Flur</a></li>
<li class="abstellraum">
<a class="text2" href="abstellraum.hrml" title="Abstellraum mit Waschmaschine">
<span class="hotspot"></span>
<img src="img/dot.gif" /> Abstellraum</a></li>
<li class="abstellraum2">
<a href="abstellraum2.hrml" title="Abstellraum mit Gasheizung"></a>
</li>
<li class="aussenkamin">
<a href="aussenkamin.hrml" title="Aussenkamin"></a>
</li>
<li class="aussenbereich">
<a href="aussenbereich.hrml" title="Aussenbereich"></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Schreibt ruhig wenn ihr nicht verstehen solltet was ich meine!
[editpost by mod]
Zuletzt bearbeitet von einem Moderator: