Bei a:hover schrumpft die <div> Box?

Fragen zu CSS.
Fragen zu we:Tags bitte im Forum webEdition Templates erstellen (we:Tags) posten.
Than

Bei a:hover schrumpft die <div> Box?

Beitragvon Than » Mi 30. Aug 2006, 11:26

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:

Code: Alles auswählen

a:hover { color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #6f9fef; text-decoration: none; }
CSS der DIV-Box:

Code: Alles auswählen

news { font-size: 10pt; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #fff; text-align: justify; width: 500px; margin: 5px auto; padding: 5px 3px 10px 0; border: solid 1px #c0c0c0; }
.

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

Pixeljockey
Member
Beiträge: 47
Registriert: Mo 7. Aug 2006, 14:46

Beitragvon Pixeljockey » Do 31. Aug 2006, 10:30

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...

Than

Beitragvon Than » Do 31. Aug 2006, 10:32

Hallo Pixeljockey

Than

Beitragvon Than » Do 31. Aug 2006, 10:37

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.. :confused:

Viele Grüße

Thomas

Pixeljockey
Member
Beiträge: 47
Registriert: Mo 7. Aug 2006, 14:46

Beitragvon Pixeljockey » Do 31. Aug 2006, 11:20

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...

Than

Beitragvon Than » Do 31. Aug 2006, 12:14

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

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Do 31. Aug 2006, 12:25

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.
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

Than

Beitragvon Than » Do 31. Aug 2006, 12:32

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?

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Do 31. Aug 2006, 13:05

Du kannst ja über Rebuild -> Miniaturansichten erzeugen für alle Bilder Thumbnails anlegen.
Viele Grüße
Mobby

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

Than

Beitragvon Than » Do 31. Aug 2006, 13:20

Aha... Super, Danke!

Pixeljockey
Member
Beiträge: 47
Registriert: Mo 7. Aug 2006, 14:46

Beitragvon Pixeljockey » Do 31. Aug 2006, 14:13

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.

Bild

Than

Beitragvon Than » Do 31. Aug 2006, 14:47

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

Pixeljockey
Member
Beiträge: 47
Registriert: Mo 7. Aug 2006, 14:46

Beitragvon Pixeljockey » Do 31. Aug 2006, 16:24

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...

mobby
Senior Member
Beiträge: 1164
Registriert: Do 1. Sep 2005, 05:07

Beitragvon mobby » Do 31. Aug 2006, 16:31

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

webEdition 8.1.0 (Ahlberg) (8.1.0.0, Revision: 10599)

Pixeljockey
Member
Beiträge: 47
Registriert: Mo 7. Aug 2006, 14:46

Beitragvon Pixeljockey » Do 31. Aug 2006, 16:50

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:


Zurück zu „CSS“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 4 Gäste