✔ Bild/Div bei MouseOver einblenden

Status
Nicht offen für weitere Antworten.
hallo,
ich habe mir hier die inspiration geholt eben diese art der bildpräsentation für meine hp zu übernehmen... aber ich kriege es einfach nicht hin -- *doofistundauchnochblond* - dass die bilder im IE nicht verrutschen... mennooooo :suspekt:

bitte helft einem hier doch ausnahmsweise mal hilflosem wesen ... :confused:

hier mal meine dazugehörige CSS datei:

Code: 
<html>

<head>
<meta name="generator" content="Namo WebEditor v4.0">
<style type="text/css">
body {scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#cccccc;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-track-color:#ffffff;}

body {
margin-top: 0;
}

td, th,p
{font-family: Verdana,sans-serif;
font-size: 8pt;
line-height: 150%;
margin-top: 0px;
margin-bottom:0px;
color: #000000;}
body {background-color: #ffffff;}


#p1 { padding-top:60px; padding-left:30px; font-size:8pt; }
#p2 { padding-top:0px; padding-left:30px; padding-right: 15px; font-size:8pt; }
#p3 { padding-top:0px; padding-right:13px; padding-left:13px; font-size:8pt; }
#p4 { padding-top: 10px; padding-right:0px; padding-left:0px; font-size:8pt; }
#p5 { padding-top:60px; padding-left:0px; font-size:8pt; }
#p6 { padding-top:0px; padding-left:100px; padding-right: 200px; font-size:8pt;  }
#p7 { padding-top:0px; font-size:7pt;  }


a 
{font-family: Verdana, sans-serif;
color: #000000;
text-decoration: none;
}
a:link 
{color: #000000;
text-decoration: none;}
a:visited 
{color: #000000;
text-decoration: none;}
a:hover 
{color: #000000;
text-decoration: none;
background-color: #ffffff;}
a:active 
{color: #000000;
text-decoration: none;
background-color: #ffffff;}


#gallery {
position:absolute;
top: 10px;
right: 15px;
width: 120px;
height:350px;}
#thumbs {width:130px;}
#thumbs a {display:block; float:left; margin:0 0 5px 5px; width:50px; height:35px; border:1px solid #000000;}
#thumbs a img {width:50px; height:35px; border:0px; }
#thumbs a:hover {border-color:#000000; background-color:#cccccc;}
#thumbs a:hover img {position:absolute; width:auto; height:auto; top:0px; right:125px; border:1px solid #000000; margin-top:0;}


</style>
</head>
<p>&nbsp;</p>
</body>

</html>

und hier noch eine beispielgalerie - zu sehen unter:
www.mybeloved.de - galerie - 04.06.2007


Code: 
<html>

<head>
<title>.:::. unisee</title>
<meta name="generator" content="Namo WebEditor v4.0">
<link rel="stylesheet" type="text/css" href="css/white_pix.css">
</head>

<body bgcolor="#CCCCCC" text="black" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<div align="left">
    <table cellpadding="0" cellspacing="0" width="600" height="350" style="border-width:1; border-color:black; border-style:solid; background-color:#CCCCCC;" background="neu/galerie_07_06_04_a.jpg">
        <tr>
            <td width="1091" valign="top">
                <table width="592" height="100%" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="442" height="290" valign="top">                        
            	        <p id="p1">... wir waren schwimmen!</p>
                            <p>&nbsp;</p>
                            <p id="p2" align="justify">heute waren wir am unisee in bremen. paul liebt 
                            diesen see und pai hat sich im letzten jahr auch 
                            recht gut dort am&uuml;siert. <br>
                            paul ist ja eher kein freund des wassers - zumindest regen und pf&uuml;tzen sowei wasser aus schl&auml;uchen oder 
			    in der dusche findet er eher &uuml;berfl&uuml;ssig - aber sobald er das ufer des sees erblickt ist er nicht mehr zu halten<br>
			    da d&uuml;st er schnurstraks an den strand und wartet auch den menschen der da kommen mag um einen ball zu werfen. und dann schwimmt er 
			    und er schwimmt... und er will immer wieder &quot;noch einmal&quot;. es ist schon ein ph&auml;nomen - schwimmen ist toll aber wasser ist bl&ouml;d!<br>
                            paul w&uuml;rde 
                            niemals im bzw. ins wasser laufen wenn es keinen guten grund - 
                            wie einen ball - gibt. w&auml;hrend f&uuml;r pai 
                            der tollste ball der welt im k&uuml;hlen nass liegen 
                            k&ouml;nnte... schwimmen w&uuml;rde sie nicht.
                            </p>
			<td width="150" height="316" rowspan="2" >
			<div id="gallery">
           <em id="thumbs"><a href="#nogo"><img src="PIX/2007/06/04/see_01.jpg" title="" alt="" / width="440" height="328"></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_02.jpg" title="" alt="" /></a>
	   <a href="#nogo"><img src="PIX/2007/06/04/see_03.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_04.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_05.jpg" title="" alt="" /></a>   
           <a href="#nogo"><img src="PIX/2007/06/04/see_06.jpg" title="" alt="" /></a>
	   <a href="#nogo"><img src="PIX/2007/06/04/see_07.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_08.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_09.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_10.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_11.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_12.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_13.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_14.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_15.jpg" title="" alt="" /></a>
           <a href="#nogo"><img src="PIX/2007/06/04/see_16.jpg" title="" alt="" /></a>
	   </em>
	   </div>
	   </td>
	      </tr>
                    <tr>
                        <td width="442" height="26" valign="top">                         
                            <table align="center" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="185">
                                        <p id="p7" align="left"><a href="back_galerie.htm">&uuml;bersicht 2007</a></p>
                                    </td>
                                    <td width="185">
                                        <p id="p7" align="right"><a href="galerie_07_06_04_b.htm">unisee II</a></p>
                                    </td>
                                </tr>
                            </table>
	      </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
</body>

</html>

für den der es bisher noch nicht erahnen kann ;-) -- bin wirklich noch blutiger anfänger

vielen dank schon mal ...
 
Hi,

entferne zunächst mal die rotmarkierten Zeilen in der CSS-Datei, denn dort haben sie nichts zu suchen:

Code: 
<html>

<head>
<meta name="generator" content="Namo WebEditor v4.0">
<style type="text/css">
body {scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#cccccc;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-track-color:#ffffff;}

body {
margin-top: 0;
}

td, th,p
{font-family: Verdana,sans-serif;
font-size: 8pt;
line-height: 150%;
margin-top: 0px;
margin-bottom:0px;
color: #000000;}
body {background-color: #ffffff;}


#p1 { padding-top:60px; padding-left:30px; font-size:8pt; }
#p2 { padding-top:0px; padding-left:30px; padding-right: 15px; font-size:8pt; }
#p3 { padding-top:0px; padding-right:13px; padding-left:13px; font-size:8pt; }
#p4 { padding-top: 10px; padding-right:0px; padding-left:0px; font-size:8pt; }
#p5 { padding-top:60px; padding-left:0px; font-size:8pt; }
#p6 { padding-top:0px; padding-left:100px; padding-right: 200px; font-size:8pt;  }
#p7 { padding-top:0px; font-size:7pt;  }


a 
{font-family: Verdana, sans-serif;
color: #000000;
text-decoration: none;
}
a:link 
{color: #000000;
text-decoration: none;}
a:visited 
{color: #000000;
text-decoration: none;}
a:hover 
{color: #000000;
text-decoration: none;
background-color: #ffffff;}
a:active 
{color: #000000;
text-decoration: none;
background-color: #ffffff;}


#gallery {
position:absolute;
top: 10px;
right: 15px;
width: 120px;
height:350px;}
#thumbs {width:130px;}
#thumbs a {display:block; float:left; margin:0 0 5px 5px; width:50px; height:35px; border:1px solid #000000;}
#thumbs a img {width:50px; height:35px; border:0px; }
#thumbs a:hover {border-color:#000000; background-color:#cccccc;}
#thumbs a:hover img {position:absolute; width:auto; height:auto; top:0px; right:125px; border:1px solid #000000; margin-top:0;}


</style>
</head>
<p>&nbsp;</p>
</body>

</html>
Im nächsten Schritt erweiterst du den Selektor #thumbs folgendermaßen:

Code: 
#thumbs {width:130px;float:right;}
und deklarierst für das HTML-Dokument einen Dokumenttyp, der den IE nicht in den "Quirksmodus" versetzt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>.:::. unisee</title>

Achja, bitte beachte die Netiquette bzgl. deiner durchgängigen Kleinschreibung. Vielen Dank! ;)
 
Sorry, im Bezug auf die Kleinschreibung! ;o)

Vielen lieben Dank für Deine Hilfe!

Das hätte ich auch wirklich selber sehen können, dass das nicht dorthin gehört... aber nun ja... ;o)

Änderungen vorgenommen... und nun habe ich einen dicken schwarzen Rahmen um den IFrame... wie kommt denn das?

Vielen Dank

// EDIT

AH!

Ich glaube ich hab's.... ;o)

Ich habe nun den Rahmen der Tabelle auf 1px gesetzt und es sieht perfekt aus! ;o)

Falls ich da jetzt nur für den Moment die Lösung gefunden habe - bin ich natürlich dankbar über jeden Verbesserungsvorschlag.

Vielen Dank im voraus
 
Der Hinweis mit den falsch gesezten HTML-Tags in der CSS-Datei gilt im übrigen auch für das Stylesheet white_haupt.css. ;)
 
VIELEN DANK!

Na, dann werde ich die Tags mal aus sämtlichen CSS Dateien entfernen... Ich Leuchte!!

Dankeschön!!

Jetzt werde ich erst einmal alle Galerien überholen...

Erst einmal vielen Dank und ein schönes WE!
 
Hallo nochmal...
ist mir ja schon fast unangenehm, aber ich habe schon wieder ein kleines Problem mit dem IE.
In Mozilla funktioniert es aber im IE mal wieder nicht

http://www.mybeloved.de

und dann unter Webdesign.
Im IE ist das untere Bild nicht in dem Rahmen bzw. auf der Position die ich eigentlich definiert habe!


Code: 
#gallery {
position:absolute;
top: 15px;
right: 5px;
width: 120px;
height:350px;}
#thumbs {width:130px;float:right;}
#thumbs a {display:block; float:left; margin:0 0 10px 5px; width:120px; height:70px; border:1px solid #000000;}
#thumbs a img {width:120px; height:70px; border:0px; }
#thumbs a:hover {border-color:#000000; background-color:#cccccc;}
#thumbs a:hover img {position:absolute; width:auto; height:auto; top:48px; right:135px; border:1px solid #000000; margin-top:0;}

Ich habe sicher wieder etwas furchtbar simples übersehen....
Vielen Dank schon mal im voraus
 
Hi,

wie es scheint, stört sich der IE an der float:left-Angabe im Selektor #thumbs a, die meines Erachtens auch garnicht erforderlich ist, da die Thumbs eh untereinander angeordnet werden sollen, und nicht, wie im Original-Beispiel, mehrspaltig daherkommen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück