kostenloser Webspace werbefrei: lima-city

Zentrierungsproblem mit <a> Element

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   melonenfans

   melonenfans hat kostenlosen Webspace.

   10:32, 8.2.2010

   Eigentlich ganz einfach, aber ich bekomms einfach nicht hin. Hier seht ihr im Quelltext alle meine Angaben, hier funktioniert der Bilderwechsel wenn man mit der Maus drüber fährt:
   
   http://melonenfans.de/ggg/bebe.php
   
   Ich will die <a> Dinger aber zenriert haben, aber sobald ich das float:left; rausnehme wird es zwar zentriert, aber der Bilderwechsel klappt nicht mehr, aber warum?
   
   http://melonenfans.de/ggg/pepe.php
   
   Beitrag zuletzt geändert: 8.2.2010 10:49:25 von melonenfans

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. t*****b

   11:02, 8.2.2010

   1. entferne bei diaryimg das Float-Atribute
   2. verwende bei ".diaryimg:hover img" beim Display-Atribut nicht "none", denn das zeigt das komplette Element nicht an, sondern ändere das Background-Image-Atribut von diaryimg.
4. Autor dieses Themas

   melonenfans

   melonenfans hat kostenlosen Webspace.

   11:11, 8.2.2010

   1. Hab ich doch, das Ergebnis siehst du im zweiten Link ;)
   
   2. Geht nicht weil das Hintergrundbild ja bleiben soll und nur das eingefügte im Vordergrund ausgeblendet werden soll.

5. simuliertes

   

   simuliertes hat kostenlosen Webspace.

   14:33, 8.2.2010

   melonenfans schrieb:
   
   Ich will die <a> Dinger aber zenriert haben, aber sobald ich das float:left; rausnehme wird es zwar zentriert, aber der Bilderwechsel klappt nicht mehr, aber warum?
   
   

   
   
   Also eine komplette Lösung habe ich nicht , ist mir momentan auch ein Rätsel..
   Aber:
   benutze mal visibility: visible/hidden anstatt display:inline/none.
   Damit bekomst Du schon einmal das "Flackern" weg.
   Der Grund dafür ist nämlich das display: none bewirkt das das Element ganz verschwindet und keinen Raum mehr einnimt.
   Visibility: hidden; verbirgt es zwar aber es nimmt noch Platz weg.
   
   Fakt ist jedenfalls das das <a>-Element nur eine Höhe von 19 px einnimmt und ich weiß nicht warum
   
   Sollte ich doch noch zu einer Lösung kommen (bevor jemand anderes schreibt) editiere ich sie hier rein

6. programtools

   programtools hat kostenlosen Webspace.

   15:34, 8.2.2010

   sry aber nimm entweder immer 2 Bilder (hell und dunkel) und tausche die per DOM aus
   
   

   *************************
   *pic1_n -> normal       *
   *pic1_h -> hover          *
   *************************
   
   <img src="../pic1_n.png" onmouseover="this.src='../pic_h.png';" onmouseout="this.src='../pic_n.png';"

   
   
   oder sonst was aber das ist viel zu instabil mit dem Link und dem Bild im Link... da lohnt es sich meiner Meinung nach mehr 2 Bilder zu erstellen.
   
   MVG

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?