nicht angemeldet
Bilder übereinander positionieren
0 0 0 
Gunnar Bittersmann
Bilder übereinander positionieren
Hallo Forum,
ich möchte auf einer Website mehrere Bilder mit Bildunterschrift nebeneinander positionieren. Jedes Bild soll mit einem transparenten png überlagert werden, welches bei rollover gegen ein anderes farbiges getauscht wird.
[URL=http://img189.imageshack.us/i/demoi.jpg/][IMG]http://img189.imageshack.us/img189/8570/demoi.jpg[/IMG][/URL]
Uploaded with [URL=http://imageshack.us]ImageShack.us[/URL]
Ich habe das nun mit css hover versucht. Doch sobald ich das transparente png-Bild relativ positioniere, muss ich eine Breite für dieses Bild angeben. Die Pixel werden dann aber unter dem Hauptbild addiert, so dass dort ein Abstand zwischen Bild und Text entsteht.
Wo liegt mein Fehler? Könnte mir bitte jemand einen Rat geben??
K.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css" media="screen">
<!--#galerie .play { background: url(images/video-play.png) no-repeat; margin-bottom: -190px; position: relative; top: -230px; left: 5px; width:160px; height:120px; }
#galerie .play:hover { background: url(images/video-play_over.png) no-repeat; margin-bottom: -190px; position: relative; top: -230px; left: 5px; width:160px; height:120px;}--></style>
</head>
<body bgcolor="#ffffff">
<a href="link1.html" target="_blank"><img src="media/public/thumbs-index/img3.jpg" /><img class="play" src="images/trans.gif" height="160" width="120" title="play" alt="play" /><strong>Text</strong></a>
</body>
</html>
-
-
Grüße,
div-wrapper
drin bild, drunter p oder span mit text
bild überlagerst du mit absolutpostioniertem gleichroßem - dann brauchst du nix zu zentrieren. absolut epositionierung wird von der linken oberen eke des ersten nicht static-positionierten
MFG
bleicher-
drin bild, drunter p oder span mit text
bild überlagerst du mit absolutpostioniertem gleichroßem - dann brauchst du nix zu zentrieren. absolut epositionierung wird von der linken oberen eke des ersten nicht static-positioniertenDanke!
Habe es so probiert. Leider wird das Bild darüber bei absolut an der Fensterecke oben links positioniert.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <style type="text/css" media="screen"> <!--/*#galerie .play { background: url(images/video-play.png) no-repeat; margin-bottom: -190px; position: relative; top: -230px; left: 5px; width:160px; height:120px; } #galerie .play:hover { background: url(images/video-play_over.png) no-repeat; margin-bottom: -190px; position: relative; top: -230px; left: 5px; width:160px; height:120px;} #galerie {margin-bottom: 20px; } #galerie li{ list-style-type: none; margin-right: 15px; margin-bottom: 20px; width: 160px; float: left } #galerie li span { color: #7b8c94; padding-left: 4px } #galerie li a { color: #7b8c94; text-decoration: none; background-image: none; padding-left: 2px } #galerie li a strong { text-decoration: none; background-image: url(images/dreieck_doppelt.gif); background-repeat: no-repeat; background-position: right center; padding-right: 15px }*/ #galerie { } #galerie .play { background: url(images/video-play.png) no-repeat; position: absolute; top: 0px; left: 0px; width: 160px; height: 120px } #galerie .play:hover { background: url(images/video-play_over.png) no-repeat; } #galerie li{ list-style-type: none; } #galerie li a { text-decoration: none; background-image: none;} --></style> </head> <body bgcolor="#ffffff"> <div id="galerie"> <ul> <li><a href="link1.html" target="_blank"> <img src="media/public/thumbs-index/img1.jpg" /> <img class="play" src="images/trans.gif" title="play" alt="play" /> <span>Text</span></a></li> <li><a href="link2.html" target="_blank"> <img src="media/public/thumbs-index/img2.jpg" /> <img class="play" src="images/trans.gif" title="play" alt="play" /> <span>Text</span></a></li> <li><a href="link3.html" target="_blank"> <img src="media/public/thumbs-index/img3.jpg" /> <img class="play" src="images/trans.gif" title="play" alt="play" /> <span>Text</span></a></li> </ul> </ul> </ul> </div> </body> </html>-
Grüße,
absolut epositionierung wird von der linken oberen eke des ersten nicht static-positionierten
elternelemntes aus berechnet
du hast sicher nicht die selfhtml kapitel uz css-positionierung gelesen
MFG
bleicher-
Om nah hoo pez nyeetz, kikko!
absolut epositionierung wird von der linken oberen eke des ersten nicht static-positionierten elternelemntes aus berechnet
du hast sicher nicht die selfhtml kapitel uz css-positionierung gelesen
zusätzlich könnte dieses Tutorial helfen, vielleicht sind auch http://selfhtml.apsel-mv.de/verweise/verweise.html sinnvoll.
PS. Dein Code ist invalide, sicher nur ein Versehen beim Kopieren.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
@@bleicher:
nuqneH
div-wrapper
drin bild, drunter p oder span mit textOh je, div-Suppe.
HTML5 bietet die Elementtypen figure und figcapture.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
1 <img>
1 <p>zusammengefasst durch 1 <div>
Wo ist das Problem? Dafür ist das <div> da.
"Mit <div> leiten Sie ein allgemeines Block-Element ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert."
Klar wenn es eine bessere Lösung ohne gibt, ist diese u. U. vorzuziehen.
Aber ich sehe die Suppe nicht wenn ein <div> das tut wozu es gedacht ist.
-
-
-
@@kikko:
nuqneH
[code lang=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Oh je, Quirksmodus. Bevor du dich um Darstellung im Browser kümmerst, solltest du dafür sorgen, dass diese im Standard-compliant-Modus rendern.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
