mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 28.04.2024 21:45 Benutzername: Passwort: Auto-Login

Thema: Bild wackelt bei img:hover vom 02.05.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bild wackelt bei img:hover
Seite: 1, 2  Weiter
Autor Nachricht
Typo87
Threadersteller

Dabei seit: 16.07.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.05.2008 21:19
Titel

Bild wackelt bei img:hover

Antworten mit Zitat Zum Seitenanfang

Hallo erstmal *zwinker*

ich stehe vor folgendem Problem.
Und zwar habe ich ein Bild mit CSS als link definiert und möchte das beim
überfahren mit der Mauls ein Rahmen um dieses Bild erscheint.

Nun ist es so das das Bild immer leicht wackelt wenn der Rahmen erscheint.

Wie bekomm ich das am besten hin ?

Zurzeit habe ich eine Tabelle erstellt worin in jeder Zelle sich das Bild befindet.
Oder muss ich etwa für jedes Bild einen DIV Container anlegen ? * Keine Ahnung... *

MFG
Stephan


Zuletzt bearbeitet von Typo87 am Fr 02.05.2008 21:46, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Fr 02.05.2008 21:46
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
Und zwar habe ich ein Bild mit CSS als link definiert

Mit CSS kannst du keine Links setzen oder Bilder verlinken. Ich schätze, es handelt sich um einen Formulierungsfehler?

Zitat:
nd möchte das beim
überfahren mit der Mauls ein Rahmen um dieses Bild erscheint.

Die Pseudoklasse :hover ist das Richtige dafür.

Zitat:
Nun ist es so das das Bild immer leicht wackelt wenn der Rahmen erscheint.

Das verstehe ich nicht. Wie sollte das Bild wackeln?
Eventuell nimmt dein Rahmen ein wenig mehr Platz in Anspruch und dadurch wird das Bild dann leicht verschoben, wenn dieser Rahmen eingeblendet wird?

Zitat:
Wie bekomm ich das am besten hin ?

Du solltest schreiben, in welchem Browser (Browser, Betriebssystem, Versionsnummer) dein Problem auftritt und du solltest den entsprechenden, problematischen Code posten (Eventuell noch mit einem Link auf deine Site).

Zitat:
Zurzeit habe ich eine Tabelle erstellt worin in jeder Zelle sich das Bild befindet.

Tabellen sind für tabellarische Inhalte gedacht. In der heutigen Zeit ist es nicht mehr notwendig, Tabellen für Layoutzwecke zu mißbrauchen. Du kannst mit CSS arbeiten.

Zitat:
Oder muss ich etwa für jedes Bild einen DIV Container anlegen ?

Ich kann dir nicht sagen, ob das sinnvoll ist. Ich vermute aber mal nicht...
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Typo87
Threadersteller

Dabei seit: 16.07.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.05.2008 21:49
Titel

Antworten mit Zitat Zum Seitenanfang

Bitteschön :

Homepage

P.S Ja ^^ war ein formulierungsfehler *zwinker*


Zuletzt bearbeitet von Typo87 am Fr 02.05.2008 21:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Astro

Dabei seit: 14.04.2003
Ort: Lost Valley
Alter: 48
Geschlecht: Männlich
Verfasst Fr 02.05.2008 23:07
Titel

Antworten mit Zitat Zum Seitenanfang

Das Bild wackelt, weil der Rahmen das Bild größer macht. Das mutmaße ich jetzt einfach mal, ohne mir die Seite anzusehen. Durch den Rahmen wird das Bild je nach Ausrichtung beiseite geschoben.
  View user's profile Private Nachricht senden
Typo87
Threadersteller

Dabei seit: 16.07.2007
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.05.2008 23:45
Titel

Antworten mit Zitat Zum Seitenanfang

Die Zelle ist weit größer als das eigentlich Bild.

Aber sagt mir doch gleich mal wie man es besser machen sollte. Also nicht mit Tabellen
sondern mit CSS ?

Mit Hilfe von Containern ? Oder wie muss man da vorgehen ?
  View user's profile Private Nachricht senden
rob

Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht: Männlich
Verfasst Sa 03.05.2008 00:08
Titel

Antworten mit Zitat Zum Seitenanfang

Ja, das Wackeln kommt daher, daß wenn der Rahmen erscheint, alles um ein paar Pixel größer wird und sich damit deine Tabellen ein wenig auseinanderschieben.
Du mußt das mit dem Platz also so einrichten, daß das nichts ausmacht, wenn da noch ein paar Pixel hinzukommen.

Und dann solltest du mal einen Validator für deinen Code einsetzen.
Für das Element table gibt es kein Attribut height. Warum setzt du das überhaupt ein, wenn du ohnehin sonst alle Angaben mit CSS machst?
Das Element img erfordert zwingend das Attribut alt.
Und eine Menge an divs sind ziemlich unnötig (wenn auch nicht syntaktisch falsch).
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 03.05.2008 01:42
Titel

Antworten mit Zitat Zum Seitenanfang

Die Vorredner haben recht. ich möchte noch hinzufügen, dass du dich mal eingehend mit dem css-Boxmodell auseinander setzen solltest, dann verstehste auch, warum der Mist "wackelt". Denk' dir einfach, du würdest über diese dollen Ebenenproperties im Photoladen einen Rahmen hinzufügen. Dann hast du die Wahl, ob dieser außen, innen oder irgendwo zwischen deiner gewählten Ebene liegt. Nun, das CSS-Boxmodell erlaubt ausschließlich die Einstellung "außen", quasi drumrum. Dein Bild is 300 px breit, mit 1px Rahmen um alle Seiten aber dann plötzlich 302.
  View user's profile Private Nachricht senden
Astro

Dabei seit: 14.04.2003
Ort: Lost Valley
Alter: 48
Geschlecht: Männlich
Verfasst Sa 03.05.2008 03:18
Titel

Antworten mit Zitat Zum Seitenanfang

Als Alternative würde sich anbieten immer einen Rahmen zu haben und nur die Farbe zu ändern. Oder etwas mit margin zu basteln.

Zuletzt bearbeitet von Astro am Sa 03.05.2008 03:20, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen hover-Button/hover-Bild wird darunter eingefügt
CSS - Hover / Link / Bild - Bild verschwindet nach Klick
Kreiselement vor Bild bei Hover
Bild mit hover Textelementen
Bei Hover über Bild erscheint Div -> ie6 Problem...
Rahmen-hover-Effekt um verlinktes Bild im IE
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.