webEdition - Forum

Hallo,

bei <div>- Boxen hab ich ein Problem mit dem Hover.
Wenn ich über den Link in der Box fahre, verändert sich beim Überfahren die Boxgröße - sie verkleinert sich...

CSS des Hovers: CSS der DIV-Box: .

Das Problem tritt aber nur auf, wenn das Bild, das sich auch in der Box befindet, eine bestimmte Höhe überschreitet. Wird "Padding" auf ein <we:field type="img"> nicht oder falsch angewendet ?

Für einen Tip bin ich dankbar!

Dank und Gruß

Thomas

Wie sieht denn das CSS deines normalen Links, also a:link aus? In dem Zustand hat doch alles noch die richtige Größe, oder?

Wenn du den Link schon mal besucht hast verwendet er auch nicht mehr

Code: Alles auswählen

a:hover

sondern

Code: Alles auswählen

a:visited

, er führt den hover also nicht mehr aus. Lässt sich aber durch

Code: Alles auswählen

a:visited:hover

umgehen, funktioniert auch in allen aktuellen Browsern...

Hallo Pixeljockey

Hallo Pixeljockey

das Problem entsteht auch bei unbesuchten Links. a:link, a:visited und a:hover unterscheiden sich lediglich in der Farbangabe. Sonst ist alles gleich.

Außerdem passiert es nur, wenn das eingefügte Bild eine Höhe von xxPixel überschreitet. Ist es "kleiner" als der Text neben dem Bild, dann funktioniert alles einwandfrei. Und genau das versteh ich nicht.

Der Wert für den unteren Innenabstand der Box ist mit 10px definiert. Aber dieser wird nur auf den Text angewendet. Nicht auf das automatisch eingefügte Bild der Listview..

Viele Grüße

Thomas

Du hast also einen div in den du ein Bild lädst und daneben Text, wenn ich dich richtig verstanden habe. Und wenn jetzt das Bild mehr vertikalen Raum als der Text einnimmt schrumpft der div?

Der Wert für den unteren Innenabstand der Box ist mit 10px definiert. Aber dieser wird nur auf den Text angewendet. Nicht auf das automatisch eingefügte Bild der Listview..

Also, wenn dein Bild eine größere Höhe hat als ihm eigentlich zur Verfügung steht wird das padding nicht gemacht.

Außerdem passiert es nur, wenn das eingefügte Bild eine Höhe von xxPixel überschreitet. Ist es "kleiner" als der Text neben dem Bild, dann funktioniert alles einwandfrei. Und genau das versteh ich nicht.

Benutzt du für Text oder Bild floats?

das Problem entsteht auch bei unbesuchten Links. a:link, a:visited und a:hover unterscheiden sich lediglich in der Farbangabe. Sonst ist alles gleich.

Dann liegts wahrscheinlich nicht am Link sondern an Text oder Bild. Ich kann's mir nicht zufällig irgendwo anschauen? Poste doch ansonsten grade mal den resultierenden Code, dann kann ich's bei mir mal reproduzieren...

Dann liegts wahrscheinlich nicht am Link sondern an Text oder Bild. Ich kann's mir nicht zufällig irgendwo anschauen? Poste doch ansonsten grade mal den resultierenden Code, dann kann ich's bei mir mal reproduzieren...

Aber klar doch...

<p class="break">aktuelle Meldungen</p>
<we:listview type="document" name="news" doctype="rd_news" catOr="true" categories="/Nachrichten,/A-Jugend,/B-Jugend" order="Datum" rows="3" offset="1" desc="true" searchable="true">
<we:repeat>
<p class="news">
<we:field name="newspic" type="img" width="85" hyperlink="false" hspace="5" vspace="5" align="left"/>
<span class="news_datum"><we:field name="Datum" type="date" format="d.m.Y"/></span>

<we:field name="Headline" type="text" alt="we_path" hyperlink="on"/>


<we:field name="anlesetext" type="text" max="100"> <a href="http://<?php print $_SERVER["HTTP_HOST"]; ?><we:field name="we_path" max="60" />">› zum Artikel</a>
</p>
</we:repeat></we:listview>

Live kann man es hier einsehen. Am Besten bei Artikel: Vorschau Handball Cup 2006

Hallo,
ich habe mir aml die Seite mit IE (6+7) und Firefox angeschaut. Ich konnte aber kein Fehler in sehen.
Wenn das Problem bei Bilder auftacht, die eine andere Größe habe, dann benutze doch thumbnail.

In der Tat tritt dieser Fehler nur im IE auf.

Dann mal eine dumme Frage zum Thema Thumbnail. Muss ich dann jedes Bild als Thumbnail hochladen? Oder reicht die Angabe "Thumbnail" im we-Tag aus?

Du kannst ja über Rebuild -> Miniaturansichten erzeugen für alle Bilder Thumbnails anlegen.

Aha... Super, Danke!

Hab mir die Seite mal im Firefox (Mac) angeschaut. Da tritt der Fehler auf. Das liegt am float/Höhe der news box. So floatet nämlich der nächste Listvieweintrag die vorherige Box auch noch. Stell die Höhe der Box (i.M. 76px) mal auf die Höhe des Bildes + padding (i.M. 88,4px + padding).

Mit xsl anstatt css könntest du eine Formel dafür schreiben, aber das geht dann wohl zu weit.

Da der css-Style für diese Box auch für andere genutzt wird, hab ich es nun anders gelöst.

Für diejenigen, die ein ähnliches Problem haben;
Den Txt in der Box von 100 Zeichen auf 150 Zeichen erhöht und das vspace aus dem Bildwert gelöscht. Nun sollte es funktionieren, ohne neue Klassen anlegen zu müssen (wollen). Zumindest ist das Problem im IE mit dem Schrumpfen nicht mehr, und im FF rutscht das Bild nicht mehr aus der Box. (unter Windows)

Danke für die guten Tips!

Thomas

Am Mac passt's jetzt auch (Safari, Firefox und Opera). Nur der Text umfliesst halt jetzt das Bild und nimmt dann die komplette Breite ein, das lässt sich aber, denke ich, noch verantworten...

Ich weiß zwar nicht wie "sauber" das jetzt ist, aber vielleicht nimmst du statt <p class="news"> <div class...

Hätte ich eigentlich auch gemacht, aber rein optisch dürfte es nichts ändern... Hab's mir gerade nochmal am PC angeschaut - am Mac sieht's besser aus :rolleyes: