Brauche kurze Hilfe bei CSS (HTML, CSS und Javascript)

[thread]10673[/thread]

Brauche kurze Hilfe bei CSS

olruebe01

2007-10-27 12:38

User since
2006-01-19
192 Artikel
BenutzerIn
[default_avatar]

Hallo zusammen.

Kann mir jemand helfen? Ich habe eine CSS-Bildergalerie gefunden und möchte etwas ändern, steige aber nicht durch...

Hier der Quelltext

Code: (dl )

<p><style type="text/css">

#gallery {width:750px;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#ddd;}
#gallery ul li a:hover img {position:absolute; right:185px; top:0; width:auto; height:auto; border:1px solid #000;}</style></p>
<div id="gallery">
<ul>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/1XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/1.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/2XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/2.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/3XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/3.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/4XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/4.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/5XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/5.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/6XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/6.jpg" /></a></li>
</ul>
</div>

Das ganze funzt super aber ich möchte, dass wenn die Maus über keinem Thumbnail ist (also mouseout), dann Bild1 erscheint.

Ich wäre Euch dankbar, wenn Ihr mir dabei helfen könntet... Ich habe nicht einmal einen Ansatz, wo ich was angeben müsste.

Danke und Gruß,
Oliver

GwenDragon

2007-10-27 14:16

User since
2005-01-17
14761 Artikel
Admin1

Wenn die Maus über keinem Thumbnail der Gallerie ist, kann nichts angezeigt werden.
Es gibt bei CSS kein Mouseout.

Das muss du dann mit Javascript erledigen.

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

olruebe01

2007-10-27 14:27

User since
2006-01-19
192 Artikel
BenutzerIn
[default_avatar]

kann ich denn nicht ein Standartbild definieren?
Oder ein Standartbild in den Hintergrund legen, über da sich dann die anderen Bilder legen würden oder sowas?

GwenDragon

2007-10-27 14:56

User since
2005-01-17
14761 Artikel
Admin1

Übrigens: Das was du oben gepostet hats, funktioniert niemals.
CSS gehört nicht in den body eines HTML sondern in den head!
http://de.selfhtml.org/css/formate/einbinden.htm

So gehts:

Code: (dl )

<html>
    <head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Gallerie</title>
    <style type="text/css">
#gallery {width:750px;}
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#ddd;}
#gallery ul li a:hover img {position:absolute; right:185px; top:0; width:auto; height:auto; border:1px solid #000;}
#gallery ul li#dn {position:absolute; right:185px; top:0; width:auto; height:auto; border:1px solid #000; display:block; border:0;}
#gallery ul li#dn :hover {display:none}
</style>
    </head>
    <body>
<div id="gallery">
<ul>
    <li id="dn"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/1.jpg" /></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/1XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/1.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/2XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/2.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/3XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/3.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/4XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/4.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/5XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/5.jpg" /></a></li>
    <li><a href="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/6XXL.jpg" target="_blank"><img title="" alt="" src="http://www.resultado4.de/ebay/userdaten/o/olruebe/Meine_erste_Galerie/6.jpg" /></a></li>
</ul>
</div>
    </body>

</html>

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

olruebe01

2007-10-27 15:04

User since
2006-01-19
192 Artikel
BenutzerIn
[default_avatar]

Super GwenDragon, VIELEN DANK!!!

Aber ich muss Dir widersprechen. Es funktioniert sehr wohl auch dann, wenn das css im Body steht...

GwenDragon

2007-10-27 15:05

User since
2005-01-17
14761 Artikel
Admin1

CSS gehört nicht in den Body! Das ist ungültiges HTML!

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

olruebe01

2007-10-27 15:08

User since
2006-01-19
192 Artikel
BenutzerIn
[default_avatar]

ich will das ganze bei eBay nutzen.
JavaScript ist (mir) nicht erlaubt und an den head komme ich nicht ran...

Was kann passieren, wenn ich es doch mache???
Ich habe einige Seiten gefunden, die es nach dem gleichen Prinzip für ebay so anbieten, also im Body meine ich

GwenDragon

2007-10-27 15:12

User since
2005-01-17
14761 Artikel
Admin1

olruebe01+2007-10-27 13:08:55--

Was kann passieren, wenn ich es doch mache???
Ich habe einige Seiten gefunden, die es nach dem gleichen Prinzip für ebay so anbieten, also im Body meine ich

Dann wird es eben nicht richtig in jedem Browser angezeigt. Willst du das?

PDAs, Mobiltelefone werden es vielleicht nicht korrekt anzeigen. Manch Browser wird das CSS, weil es eben an falscher Stelle steht, ignorieren und dann nichts richtig anzeigen.

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

olruebe01

2007-10-27 15:16

User since
2006-01-19
192 Artikel
BenutzerIn
[default_avatar]

Nein, natürlich nicht...

Wie können es dann andere anbieten???

Und: Gibt es eine Lösung zu diesem Problem? Dann kann ich die Idee CSS für eBay ja auch vergessen. Dann geht ja eigentlich GAR KEIN CSS bei eBay, oder?

Könnte man die CSS-Anweisungen so ändern, dass sie doch im Body stehen können? Ist nur ne Idee aber einen Link kann ich zum Beispiel im Head einen Style geben oder direkt im entsprechenden Tag, oder?

GwenDragon

2007-10-27 15:20

User since
2005-01-17
14761 Artikel
Admin1

Warum es andere machen?
Das ist wie Pfusch (im Handwerk o. ä.) überall. Es wird gemacht, weil es irgendwie funktioniert, bis es nicht mehr geht.

Kannst du keine eigenen Seiten auf eBay hochladen?

die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten

View all threads created 2007-10-27 12:38.