CSS-Imagemap und diverse Probleme

BasicSix · #1 (**permalink**) 15.05.2007, 18:59

Hallo,

ich erstelle eine Website die eigentlich nur aus einem Bild besteht und wo der Text dann halt darüberliegt.
Oben links ist eine Navigation, oben rechts ein Textfeld und unten nochmal eine andere Navigation die mit einer Art CSS Imagemap umgesetzt werden soll.

Problem eins ist das der untere Bereich im IE richtig angezeigt wird aber im Mozilla am Seitenanfang also ganz oben klebt.

Problem zwei ist das sich der Mauszeiger bei einigen Feldern der "ImageMap" nicht verändert und auch der Link nicht funktioniert.

An dieser Stelle poste ich mal den Code und ein Bild da es so denke ich besser vorstellbar ist. Vielleicht hat ja jemand eine Idee was der Fehler sein könnte. Die angewandte CSS Imagemap stammt übrigends von Webstandards-Projekt - CSS Imagemap... dort geht das Beispiel übrigends ohne Probleme...

HTML

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"> 
<head> 

<link rel="stylesheet" type="text/css" 

href="styles/Startseite1.css" media="screen, projection" /> 
</head> 

<body> 
<div id="eingang"> 

<div id="oberteil"> 
<div id="Textfeld1"> 
</div> 
<div id="Navigation1"> 
</div> 
</div> 

<div id="unterteil"> 
<ul id="navi"> 
<li id="button1"><a href="#">Umwelt</a></li> 
<li id="button2"><a href="#">Bauen</a></li> 
<li id="button3"><a href="#">Hauser</a></li> 
</ul> 
</div> 

<!-- inhalt --></div> 
</body> 
</html>

CSS

Code:

* { 
margin: 0; 
padding: 0; 
} 
body { 
background: #3D3D3D; 
text-align: center; 
} 
#eingang { 
text-align: left; 
margin-top: 120px; 
position: relative; 
background: #FFFFFF url(../gfx/Eingang.jpg) no-repeat; 
width: 765px; 
height: 520px; 
border: 1px solid #000000; 
} 
#Navigation1 { 
width: 137px; 
height: 347px; 
float: left; 
text-align: left; 
padding-left: 131px; 
padding-top: 20px; 
margin: 0px; 
color: #000000; 
font-family: Tahoma, Arial, sans-serif; 
font-size: 1.1em; 
background: orange; 
} 
} 
#Textfeld1 { 
width: 236px; 
height: 347px; 
text-align: left; 
margin: 0px; 
padding-top: 20px; 
padding-left: 10px; 
padding-right: 10px; 
float: right; 
color: #000000; 
overflow: auto; 
background: green; 

scrollbar-arrow-color: #FFFFFF; 
scrollbarBaseColor: #C6E38B; 
scrollbar-track-color: #000000; 
scrollbar-face-color: #4D7400; 
scrollbar-highlight-color: #669900; 
scrollbar-3dlight-color: #C6E38B; 
scrollbar-darkshadow-color: #2F4600; 
scrollbar-shadow-color: #2F4600; 
} 
#navi { 
position: relative; 
list-style:none; 
width:765px; 
height:130px; 
background: yellow; 
filter: alpha(opacity=60); 
} 
#navi li a{ 
position: absolute; 
list-style: none; 
cursor: pointer; 
border:1px solid black; 
display:block; 
text-indent:-9999px; 
} 
#button3 a{ 
top: 5px; 
height: 27px; 
left: 327px; 
width: 124px; 
} 
#button1 a{ 
top: 59px; 
height: 34px; 
left: 44px; 
width: 106px; 
} 
#button2 a{ 
top: 32px; 
height: 45px; 
left: 202px; 
width: 90px; 
}

Habe das ganze jetzt nochmal online gestellt:
HaGa Haus - KfW40 Niedrigenergiehäuser von HaGa Haus

BasicSix · #2 (**permalink**) 15.05.2007, 20:59

Also das Problem mit der ImageMap habe ich gelöst.
Habe noch folgendes eingefügt:

Code:

#navi li { 
list-style: none; 
width: 0px;
height: 0px;
text-indent:-9999px; 
}

Scheinbar zeigt der IE die li Elemente 2mal an. Einmal als Link und einmal die normalen. Scheinbar habe die normalen die Links überlagert.

Jetzt bleibt nur noch ein Problem:
Ich habe ein Div als Container mit dem Hintergrundbild.
Darin ist ein DIV mit float:left und einer mit float:right.
Soweit kein Problem... diese sollen ja gleich als erstes Links und Rechts stehen.
Nun möchte ich das unter den beiden Div's meine Imagemap kommt.
Funktioniert derzeit im IE ohne Probleme... aber halt im Mozilla nicht.
Habe unten einfach eine UL eingefügt... aber selbst wenn ich die in ein extra DIV packe ist sie im Mozilla immer ganz oben... Warum?

BasicSix · #3 (**permalink**) 15.05.2007, 21:22

Problem gelöst.... Habe einfach für die UL ein Position:absolute eingefügt und left:0 und top:367 eingesetzt... funktioniert wunderbar.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS und IE - Link als Block macht Probleme	Morjo	CSS	4	25.06.2008 13:28
2 Probleme mit meinem CSS Design	leibnitz	CSS	15	08.05.2008 10:01
Probleme mit CSS	heiska	CSS	1	13.03.2008 12:49
CSS Probleme mit Imageflow	Toe	CSS	3	06.03.2008 11:59
CSS Design Probleme	Hawklan	CSS	5	12.08.2004 11:45