✔ Problem mit mouseover

Status
Nicht offen für weitere Antworten.
coral hat gesagt.:
Also hier mal ein einfaches Komplett-Beispiel:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
a#thumb {
    display: block;
    width: 100px;
    height: 80px;
    border: solid 1px red;
}

a#thumb:hover {
    background-position: -100px 0;
}

.bild1 {
    background: url(test.jpg) 0 0 no-repeat;
}

-->
</style>
</head>
<body>
<a id="thumb" href="http://" class="bild1" align="center"></a>
<br />
<a id="thumb" href="http://" class="bild1" align="center"></a>
</body>
</html>
Den Pfad zu Deinem Bild musst Du entsprechend anpassen, kommt halt darauf an, ob Du mit absoluten oder relativen Pfaden arbeitest.
Zum Testen würde ich einfach mal das Testbild in das selbe Verzeichnis wie die HTML-Datei kopieren. Dann kannst Du den Code hier genauso übernehmen.

@michaelsinterface:
Es funkt - in allen Browsern, die ich hier zum Testen habe. Und das ist entscheidend für mich. Auch mit mehreren Thumbs. Ich vergebe die ID ja eigentlich auch nur einmal.
Zum Vergrößern anklicken....
So funktioniert das. :)

Besten Dank !
Und auch danke an alle anderen !!

Das ist jetzt die Testseite:
http://maexxdesign.de/test.htm

Jetzt muss ich nur noch rausbekommen wie ich die Bilder anordnen kann.
Genau so wie sie in der jetzigen Gallerie angeordnet sind.
(http://www.maexxdesign.de/
Dort auf "actors", "Anna Paquin" und "Fotogallerie".
Vielleicht ist das auch kein Problem mehr, wenn ich mal eben was ausprobiere.)

Und streitet euch hier nicht. ;)
 
Zuletzt bearbeitet:
Ich hoffe, du hast die rege Diskussion verfolgt, Maexx. Denn aus der folgt unter anderem, dass eine ID einmalig innerhalb eines Dokuments ist beziehungsweise sein muss. Klassen hingegen können beliebig oft und sogar in beliebiger Kombination verteilt werden.
 
Und was bedeutet das nun ?
Es funktioniert doch.

Nun zu einem anderen Problem:
Der Anordnung der Bilder.
Der Link zur Gallerie:
http://www.maexxdesign.de/Actors/Gallerie/Paquin_Gallery.htm
Das ist der Quellcode der Gallerie-Seite:
HTML: 
<html>
<head>
<title>Inhalt</title>
<base target="_self">
<style type="text/css"> <!-- a#thumb { display: block; width: 100px; height: 80px; border: solid 1px red; } a#thumb:hover { background-position: -100px 0; } .bild1 { background: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/1a.jpg) 0 0 no-repeat; } --> </style>
<style type="text/css"> <!-- a#thumb { display: block; width: 100px; height: 80px; border: solid 1px red; } a#thumb:hover { background-position: -100px 0; } .bild2 { background: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/2a.jpg) 0 0 no-repeat; } --> </style>
</head>

<body bgColor="#000000" link="#0000FF" vlink="#C0C0C0" alink="#FF0000">
<img border="0" src="../../Bilder/Logo.jpg" width="727" height="128"><br>
<a id="thumb" href="http://www.maexxdesign.de/Bilder/Actors/Paquin/1.jpg" class="bild1" align="center"></a>
<a id="thumb" href="http://www.maexxdesign.de/Bilder/Actors/Paquin/2.jpg" class="bild2" align="center"></a>
</body>
</html>
Wie man sieht, sind die beiden Bilder untereinander angeordnet.
So soll das aber nicht sein.
Ich möchte sie in Reihe anordnen.
Was muss ich da tun ?
 
Zuletzt bearbeitet:
Verwende hierfür die float-Eigenschaft, um die Links mit Block-Level-Charakter horizontal anzuordnen.

HTML: 
<html>
<head>
<title>Inhalt</title>
<base target="_self">
<style type="text/css"> 
<!-- 
a:link, a:visited { 
display: block; 
float: left;
width: 100px; 
height: 80px; 
border: solid 1px red; 
} 

a:hover { 
background-position: -100px 0; 
} 

.bild1 { background: url(Bilder/Actors/Paquin/1a.jpg) 0 0 no-repeat; } 
.bild2 { background: url(Bilder/Actors/Paquin/2a.jpg) 0 0 no-repeat; } 
/* Hier folgen die weiteren Klassen .bild3, .bild4, usw. */
--> 
</style>
</head>

<body bgColor="#000000" link="#0000FF" vlink="#C0C0C0" alink="#FF0000">
<img border="0" src="../../Bilder/Logo.jpg" width="727" height="128"><br>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/1.jpg" class="bild1" align="center"></a>
<a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/2.jpg" class="bild2" align="center"></a>
</body>
</html>
Also nochmal: eine ID darf in einer Seite nur einmal verwendet / vergeben werden. Deine ID-Card (Personalausweis) gibt es ja auch nur einmal. ;)
 
Erstmal: Valides HTML/CSS ist nicht unwichtig. Denn dieses stellt einigermassen sicher, dass in allen Browsern – ausser IE – die Seite vernuenftig dargestellt wird.
Welche Browser nutzt Du eigentlich zum testen? Und baust Du Deine Seite nur fuer Dich selbst? :confused:
<br /> ist uebrigens XHTML, moeglicherweise wurde das Dokument vom Validator auch als solches behandelt.
Und wie MaexxDesign schon sagte, zanken is hier nich! Sonst geht ihr mal alle ganz drastisch ohne Sesamstrasse in's Bett. Und wer quaengelt kriegt keine Kekse.
 
Ich benutze Firefox und die Seite ist in erster Linie für mich.
Es werden aber noch Inhalte folgen von denen andere auch was haben.
Aber das ist egal.

So sieht es momentan aus:
http://maexxdesign.de/test.htm
Die Bilder sind horizontal angeordnet.
Nur möchte ich, dass sie einen bestimmten Abstand zueinander haben.
Hier sind die alle nebeneinander angeklatscht. ;)
 
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict. dtd">
<html>
<head>
	<title>Inhalt</title>
	<style type="text/css"><!--
		body {
			background-color: #000;
		}
		ul#gallery {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		ul#gallery li {
			float: left;
			margin: .5em;
		}
		ul#gallery a {
			display: block;
			width: 100px;
			height: 80px;
			border: solid 1px blue;
		}
		ul#gallery a:hover {
			background-position: -100px 0;
		}

		.bild1 {
			background-image: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/1a.jpg);
		}
		.bild2 {
			background-image: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/2a.jpg);
		}
		.bild3 {
			background-image: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/3a.jpg);
		}
		.bild4 {
			background-image: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/4a.jpg);
		}
		.bild5 {
			background-image: url(http://www.maexxdesign.de/Bilder/Actors/Paquin/5a.jpg);
		}
		-->
	</style>
</head>

<body>
	<p><img src="Bilder/Logo.jpg" width="727" height="128"></p>
	<ul id="gallery">
		<li><a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/1.jpg" class="bild1"></a></li>
		<li><a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/2.jpg" class="bild2"></a></li>
		<li><a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/3.jpg" class="bild3"></a></li>
		<li><a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/4.jpg" class="bild4"></a></li>
		<li><a href="http://www.maexxdesign.de/Bilder/Actors/Paquin/5.jpg" class="bild5"></a></li>
	</ul>
</body>
</html>
Mit der margin-Eigenschaft des ul#gallery li-Selektors lässt sich nun der Abstand zum nächsten Element bestimmen.
 
Danke, das funktioniert auch ! :)

Nochmal wegen ID und class.
Ich muss mehrere ID vergeben, aber nur eine class.
Wie z.B.:
ID Bild1
ID Bild2
usw.

class GalleriePaquin
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück