Probleme beim Mouseover mit CSS - Paules-PC-Forum.de

24.09.2010, 01:26

Hey Leute,
bin Grade dabei eine Website zu erstellen und habe ein relativ eigenartiges Problem.
Die Site hat einige Buttons auf der linken Site, die aus jeweils aus einem Bild bestehen und beim Mouseover durch ein anderes Bild ersetzt werden, dann ist da noch ein Text auf der Hauptseite und vier Bilder auf der rechten Seite.
Probleme habe ich mit den vier Bildern, diese sind "klein" und sollen beim draufgehen mit der Maus links daneben "groß" angezeigt werden.
Dafür habe ich jeweils eine kleine und eine große Version der Bilder erstellt und einen Mouseover-Effekt genutzt, damit die Bilder halt Groß angezeigt werden.
Doch werden Sie nicht groß angezeigt, beim Draufgehen mit der Maus erscheint nur ein "Rand" in der Bildgröße mit einem roten Kreuz oben links (als sei das Bild nicht vorhanden). Offline funktioniert alles, sobald ich die Daten jedoch hochlade (genutzt wird 1und1.de) und die Site online teste, geht es nicht mehr.
Hab die Idee zum Mouseover von folgender Site: Homepage FAQs - bilder groesser bei mouseover
Nutze dafür den Punkt C)

Hier der Quellcode meiner Site:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Erhorns das Restaurant - Bilder</title>
<style type="text/css">
<!--
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    background-color: #e6e3d8;
    background-image: url(Background1.jpg);
    background-position: center top;
}
.oneColFixCtr #container {
    width: 1200px;
    height: 1600px; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
    background-color: #FFFFFF;
    background-image: url(Background-Site2.jpg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center -100px;

     margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
    #button1 { display:block;
             background-image:url(button1_inakt.png);
             width:200px; height:40px }
    #button1:hover { background-image:url(button1_akt.png); }
    
    #button2 { display:block;
             background-image:url(button2_inakt.png);
             width:200px; height:40px }
    #button2:hover { background-image:url(button2_akt.png); }
    
    #button3 { display:block;
             background-image:url(button3_inakt.png);
             width:200px; height:20px }
    #button3:hover { background-image:url(button3_akt.png); }

    #button4 { display:block;
             background-image:url(button4_akt.png);
             width:200px; height:20px }
    #button4:hover { background-image:url(button4_akt.png); }
    
    #button5 { display:block;
             background-image:url(button5_inakt.png);
             width:200px; height:20px }
    #button5:hover { background-image:url(button5_akt.png); }
    
    #button6 { display:block;
             background-image:url(button6_inakt.png);
             width:200px; height:20px }
    #button6:hover { background-image:url(button6_akt.png); }
    
    #button7 { display:block;
             background-image:url(button7_inakt.png);
             width:200px; height:20px }
    #button7:hover { background-image:url(button7_akt.png); }
    
    #button8 { display:block;
             background-image:url(button8_inakt.png);
             width:200px; height:20px }
    #button8:hover { background-image:url(button8_akt.png); }
    
    #button9 { display:block;
             background-image:url(button9_akt.png);
             width:180px; height:20px }
    #button9:hover { background-image:url(button9_akt.png); }
    
    #button10 { display:block;
             background-image:url(button10_inakt.png);
             width:180px; height:20px }
    #button10:hover { background-image:url(button10_akt.png); }
    
    #button11 { display:block;
             background-image:url(button11_inakt.png);
             width:180px; height:20px }
    #button11:hover { background-image:url(button11_akt.png); }
    
    img {border:none;}
    #box{height:150px; width:200px; padding:0px margin:20px;font:bold 14px verdana, sans-serif;}
    #box div{display:none;}
    #box:hover div{display:block; width:300px; position:relative; top:-615px; left:-850px; 

padding:0px; font:normal 14px verdana, sans-serif;}
-->

</style></head>

<body class="oneColFixCtr">

<div id="container">
   <div id="Logo" style="position:relative; top:180px; left:340px; border:0px; width: 600px; height: 

150px;">
    <a href="index.html"><img src="Logo.png" width="600" height="150" border="0px"/></a>
    </div>
  <div id="Erhorn" style="position:relative; top:300px; left:120px; border:0px; width: 200px; 

height: 40px;">
  <a id="button1" href="index.html"></a>
   </div>
   <div id="site" style="position:relative; top:330px; left:120px; border:0px; width: 200px; 

height: 40px;">
    <a id="button2" href="site1.html"></a>
  </div>
   <div id="site" style="position:relative; top:360px; left:120px; border:0px; width: 200px; 

height: 20px;">
    <a id="button3" href="site2.html"></a>
  </div>
     <div id="site" style="position:relative; top:390px; left:120px; border:0px; width: 200px; 

height: 20px;">
    <a id="button4"></a>
  </div>
      <div id="site" style="position:relative; top:410px; left:150px; border:0px; width: 

180px; height: 20px; z-index: 2;">
    <a id="button9"></a>
  </div>
      <div id="site" style="position:relative; top:430px; left:150px; border:0px; width: 180px; 

height: 20px; z-index: 2;">
    <a id="button10" href="bilder_feste.html"></a>
</div>
      <div id="site" style="position:relative; top:450px; left:150px; border:0px; width: 180px; 

height: 20px; z-index: 2;">
    <a id="button11" href="bilder_dorfleben.html"></a>
</div>
     <div id="site" style="position:relative; top:480px; left:120px; border:0px; width: 200px; 

height: 20px;">
    <a id="button5" href="hofladen.html"></a>
</div>
     <div id="site" style="position:relative; top:510px; left:120px; border:0px; width: 200px; 

height: 20px;">
    <a id="button6" href="anfahrt.html"></a>
  </div>
     <div id="site" style="position:relative; top:540px; left:120px; border:0px; width: 200px; 

height: 20px;">
    <a id="button7" href="kontakt.html"></a>
  </div>
     <div id="site" style="position:relative; top:570px; left:120px; border:0px; width: 200px; 

height: 20px;">
    <a id="button8" href="impressum.html"></a>
  </div>
  <div id="site" style="position:relative; top:258px; left:112px; border:0px; width: 214px; 

height: 130px; z-index: 1;">
    <img src="untermenue_verziehrung.png" width="214" height="130" border="0px"/>
  </div>
  <div style="position:relative; top:-170px; left:360px; border:0px; width: 600px; height: 100px; 

text-align: left; font-family: 'Trajan Pro'; font-size: 48px; color: #b4a797;">
  <p>site</p>
  </div>
  <div id="Text2" style="position:relative; top:-130px; left:400px; border:0px; width: 400px; 

height: 600px; text-align: left; font-family: 'Minion Pro'; font-size: 20px; color: #4d4108;">
    <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</p>
  </div>
    <div id="box" style="position:relative; top:-760px; left:850px; z-index: 2;"><a 

href="#"><img src="bild1_klein.jpg" width="200" height="150" alt="bild"></a>
    <div><p><img src="bild1_groß.jpg" width="800" height="600" alt=""></p>
    </div>
   </div>
       <div id="box" style="position:relative; top:-740px; left:850px; z-index: 2;"><a 

href="#"><img src="bild2_klein.jpg" width="200" height="150" alt="bild"></a>
    <div><p><img src="bild2_groß.jpg" width="800" height="600" alt=""></p>
    </div>
   </div>
       <div id="box" style="position:relative; top:-720px; left:850px; z-index: 2;"><a 

href="#"><img src="bild3_klein.jpg" width="200" height="150" alt="bild"></a>
    <div><p><img src="bild3_groß.jpg" width="800" height="600" alt=""></p>
    </div>
   </div>
       <div id="box" style="position:relative; top:-700px; left:850px; z-index: 2;"><a 

href="#"><img src="bild4_klein.jpg" width="200" height="150" alt="bild"></a>
    <div><p><img src="bild4_groß.jpg" width="800" height="600" alt=""></p>
    </div>
   </div>
 </div>
</body>
</html>

Natürlich sind alle Bilder hochgeladen, habe extra drauf geachtet.
Ich hoffe jemand kann mir hierbei helfen :S

**Desert_Igel** · 24.09.2010, 01:53

Ein Thread reicht.
Den anderen habe ich in den Papierkorb verschoben.

Ich würde das ganz anders machen. Schau dir das mal an:
Webstandards-Projekt - Grafischer Hover Effekt mit CSS

24.09.2010, 01:59

Danke für die schnelle Antwort und sorry für den Doppelpost, hatte nicht gelesen, dass der Beitrag nicht sofort eingestellt wird.
Hab den Fehler durch einen plötzlichen Geistesblitz nacht 3 Stunden gefunden, der im Namen der Bilder lag. Wie es aussieht hat 1und1.de Probleme mit dem Buchstaben "ß". Dadurch wurden die Bilder in der Tat einfach nicht gefunden.
Sonst hätte ich es wohl umgeschrieben, wie in deinem Link, doch dazu habe ich ehrlichgesagt jetzt keine Lust, es funzt ja auch nun so

Zwirni · 24.09.2010, 09:22

"ß" ist genau wie "ä", "ö" und "ü" ein Umlaut welcher nicht auf Webservern in Dateinamen und Verzeichnisnamen verwendet werden sollte. Dein Hoster hat damit nichts zu tun. Das ist Vorgabe der Software. Leerzeichen sollte man übrigens auch meiden.

24.09.2010, 01:53	#2 (Direktlink)
Desert_Igel Super-Moderator Registriert seit: 22.05.2005 Ort: c:\DE\NDS\SHG\Rinteln Alter: 21 Beiträge: 5.808	Ein Thread reicht. Den anderen habe ich in den Papierkorb verschoben. Ich würde das ganz anders machen. Schau dir das mal an: Webstandards-Projekt - Grafischer Hover Effekt mit CSS __________________ Hauptrechner: Intel Q6600 \| Gigabyte P35-DQ6 \| ATi Radeon 2900XT \| 4 GB OCZ RAM \| Corsair HX520W \| 31 TB Festplattenkapazität \| 120 GB OCZ Vertex II SSD \| Wasserkühlung LAN-Rechner: Intel Xeon UP W3520 \| nVidia Geforce 8800 GTS \| 4 GB TeamGroup RAM \| LC Power LC6550 \| 640 GB Platte HTPC: AMD Athlon II X2 250 \| Foxconn A88GM Deluxe \| 4 GB TeamGroup RAM \| 3 TB Hitachi Platte Gesamte Partitionen bzw Ordner spiegeln Linux ist nicht gleich Windows Dein neuer Linux Server

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mouseover Übersetzung	Aneurysm	Browser, eMail und Messenger	2	24.06.2011 09:39
mouseover, aber keine Ahnung	Unregistriert	Homepagegestaltung	3	27.04.2010 17:56
Probleme beim E-Mails abholen beim Thunderbird	vkstner	Browser, eMail und Messenger	3	15.05.2008 07:51
Ein Bild bei Mouseover über Link ändern	zapperr	Homepagegestaltung	2	14.10.2007 23:31
Mouseover geht nicht im IE	Sempervivum	Homepagegestaltung	1	09.05.2007 21:42

24.09.2010, 01:59	#3 (Direktlink)
Unregistriert Gast Beiträge: n/a	Danke für die schnelle Antwort und sorry für den Doppelpost, hatte nicht gelesen, dass der Beitrag nicht sofort eingestellt wird. Hab den Fehler durch einen plötzlichen Geistesblitz nacht 3 Stunden gefunden, der im Namen der Bilder lag. Wie es aussieht hat 1und1.de Probleme mit dem Buchstaben "ß". Dadurch wurden die Bilder in der Tat einfach nicht gefunden. Sonst hätte ich es wohl umgeschrieben, wie in deinem Link, doch dazu habe ich ehrlichgesagt jetzt keine Lust, es funzt ja auch nun so

24.09.2010, 09:22	#4 (Direktlink)
Zwirni Dauergast Registriert seit: 04.07.2004 Ort: Leipzig Beiträge: 1.085	"ß" ist genau wie "ä", "ö" und "ü" ein Umlaut welcher nicht auf Webservern in Dateinamen und Verzeichnisnamen verwendet werden sollte. Dein Hoster hat damit nichts zu tun. Das ist Vorgabe der Software. Leerzeichen sollte man übrigens auch meiden.