nicht angemeldet
Mouseover-Effekt mit Grafiken
Hallo!
Ich bin Anfänger und kämpfe schon längere Zeit mit folgendem Problem:
Ich hab 3 Grafiken, die ich nahtlos nebeneinander darstellen will, allerdings schaff ich es nicht und er stellt mir die Grafiken immer nur untereinander dar.
Ich hoffe ihr könnt mir helfen.
Liebe Grüße
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<style>
a { display:block;
background-image:url(test.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover.jpg); }
</style>
</head>
<body>
<a href="test.htm" id="test"></a>
<a href="test.htm" id="test"></a>
<a href="test.htm" id="test"></a>
</body>
</html>
-
Hallo quasimodo,
Ich hab 3 Grafiken, die ich nahtlos nebeneinander darstellen will, allerdings schaff ich es nicht und er stellt mir die Grafiken immer nur untereinander dar.
Links sind von Haus aus eigentlich Inline-Elemente, d.h. sie erzeugen keinen Umbruch.
a { display:block; }
Hier sagst Du dem Link jedoch: "verhalte Dich wie ein Blockelement", und das macht der Link dann auch ganz brav ;-)
Ich schätze, der Link hat von Dir diese Eigenschaft erhalten, damit Du ihm Breite und Höhe zuweisen kannst - in diesem Fall kannst Du das künstliche Blockelement entweder http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=floaten lassen, oder Du läßt den Link inline und regelst die Abmessungen über die Eigenschaft http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding@title=padding, also den Innenabstand.
Gruß aus Köln-Ehrenfeld,
Elya
--
We are drowning in information but starved for knowledge. John Naisbitt-
Hallo!
Vielen vielen Dank für deine Hilfe.
Anfangs funktionierte noch alles... dann bin aber einen Schritt weitergegangen und habe es so gemacht, wie ich schlussendlich auch haben möchte.
Nun klappt gar nichts mehr. Der Overeffekt wird nicht mehr dargestellt.
Ich hoffe Ihr helft mir. Habt Geduld ;-(
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>test</title><style>
#test1
a { float:left;
background-image:url(test01.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover01.jpg); }#test2
a { float:left;
background-image:url(test02.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover02.jpg); }#test3
a { float:left;
background-image:url(test03.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover03.jpg); }#test4
a { float:left;
background-image:url(test04.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover04.jpg); }#test5
a { float:left;
background-image:url(test05.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover05.jpg); }#test6
a { float:left;
background-image:url(test06.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover06.jpg); }#test7
a { float:left;
background-image:url(test07.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover07.jpg); }#test8
a { float:left;
background-image:url(test08.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover08.jpg); }#test9
a { float:left;
background-image:url(test09.jpg);
width:65px; height:430px }
a:hover { background-image:url(testover09.jpg); }</style>
</head><body>
<div id="test1"><a href="test1.htm"></a></div>
<div id="test2"><a href="test2.htm"></a></div>
<div id="test3"><a href="test3.htm"></a></div>
<div id="test4"><a href="test4.htm"></a></div>
<div id="test5"><a href="test5.htm"></a></div>
<div id="test6"><a href="test6.htm"></a></div>
<div id="test7"><a href="test7.htm"></a></div>
<div id="test8"><a href="test8.htm"></a></div>
<div id="test9"><a href="test9.htm"></a></div></body>
</html>
Liebe Grüße
quasimodo-
Hallo quasimodo,
Anfangs funktionierte noch alles... dann bin aber einen Schritt weitergegangen und habe es so gemacht, wie ich schlussendlich auch haben möchte.
Beschreibe doch einmal mit Deinen Worten, was Du eigentlich erreichen möchtest, dann kann Dir besser geholfen werden. Wie sollen welche Elemente aneordnet werden und wie sollen sie gestaltet sein?
<div id="test1"><a href="test1.htm"></a></div>
<div id="test2"><a href="test2.htm"></a></div>Wozu die divs?
Gruß aus Köln-Ehrenfeld,
Elya
--
We are drowning in information but starved for knowledge. John Naisbitt-
Hallo Elya.
Danke!
Also ich habe insgesamt 9 verschiedene Bilder. Dazu 9 verschiedene "Hoverbilder". Also jedes Bild hat ein anderes Hover. Diese Bilder sollten nahtlos aneinander aufgereiht werden.
Ähnlich deiner Fotowand auf deiner Homepage, nur eben mit Hovereffekt und ohne Abstand.Das wars eigentlich schon.
Wozu die Divs?
Ich blamier mich hier wahrscheinlich gerade in Grund und Boden, aber ich weiß keine andere Lösung?!Liebe Grüße und danke für deine Geduld
quasimodo-
Hallo!
So ich habe nun alles nochmal überarbeitet... und habe mich dabei an folgendes Beispiel gehalten:
HIER (Variante 2)
BEISPIEL dieser Anleitung...
funktioniert auch alles wie ich es mir vorgestellt habe... ABER
nun habe ich noch ein letztes Problem...Ich würde gerne mein Menü bzw. diese Bilder zentriert auf der Seite darstellen.
Ich finde aber keine Möglichkeit ;(
Liebe Grüße
-
Hallo quasimodo,
funktioniert auch alles wie ich es mir vorgestellt habe... ABER
nun habe ich noch ein letztes Problem...prima :-)
Ich würde gerne mein Menü bzw. diese Bilder zentriert auf der Seite darstellen.
Dabei könnte Dir diese Anleitung aus unserer FAQ helfen: <http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte@title=Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?>
Gruß aus Köln-Ehrenfeld,
Elya
--
We are drowning in information but starved for knowledge. John Naisbitt
-
-
-
-
-