Darstellung Link/Hover Effekt

Indiana · #1 (**permalink**) 18.12.2007, 20:01

Hallo,

ich habe folgendes Problem:
Ich möchte aufeinanderfolgend Links auflisten, in denen linksbündig eine Paarung steht und rechtsbündig das entsprechende Ergebnis. Hab es mit einem span-tag versucht...

1. Problem:
Mit IE schauts so aus wie es aussehen soll ABER wenn man das ganze mit Firefox anschaut sieht alles aus wie zerhauen. Liegt vermutlich am Float, aber weiß nicht wie das vermieden werden kann...

2. Problem:
Der Hover Effekt funktioniert nicht für die span-tags die innerhalb des Links sidn. Fährt man mit dem Mauszeiger über den Link, wird an den Stellen des Span Tags der Hover Effekt nicht angezeigt, d.h. es bleibt die Hintergrundfarbe stehen...

Habt ihr eine Lösung für die Probleme? Komm hier nicht mehr weiter

Zum bessern nachvollziehen, hier der Link zur Seite:
€lite ƒorce
Die Problemzone befindet sich oben rechts

Hoffe ihr könnt mir weiterhelfen!

(Als weitere Info: Möchte die Paarung und Ergebnis über eine SQL DB mit PHP ausgeben, haltet ihr es für besser dies mit einer Tabelle zu machen? Wenn ja wie könnt ich das umsetzen? Hab hier ähnliche Probleme, dass der Hover-Effekt des Links nicht funktioniert)

HTML-Code:

Code:

<div id="navigation">
<a href="#"><span class="match">EF vs MP</span><span class="score_won">12 - 4&nbsp;</span></a>
<a href="#"><span class="match">EF vs c2o</span><span class="score_lost">8 - 9&nbsp;</span></a>
<a href="#"><span class="match">EF vs WD</span><span class="score_won">2 - 0&nbsp;</span></a>
<a href="#"><span class="match">EF vs IQ</span><span class="score_won">5 - 4&nbsp;</span></a>
</div>

CSS-Code:

Code:

div#navigation {
width: 200px;
color: #CCCCCC;
background-color: #333333;
  }

div#navigation a {
width: 194px;
color: #CCCCCC;
font-size: 11px;
background-color: #242424;
text-decoration: none;
padding: 3px;
display: block;
border-bottom: 1px solid black;
  }

div#navigation a:hover {
color: red;
background-color: #111111;
 }


.match {
float: left;
font-size: 11px;
background-color: #242424;
  }

.score_won {
float: right;
color: green;
font-size: 10px;
background-color: #242424;
border-right: 2px solid green;
  }

.score_lost {
float: right;
color: red;
font-size: 10px;
background-color: #242424;
border-right: 2px solid red;
  }

Crizzo · #2 (**permalink**) 18.12.2007, 22:38

[Invalid] Markup Validation of http://home.arcor.de/helmsklamm/elite/website/index.html - W3C Markup Validator

Bei solcher einer gigantischen Fehleranzahl steht alles andere hinten an. Diese Fehler solltest du ersteinmal beheben, dann sehen wir weiter.

Indiana · #3 (**permalink**) 18.12.2007, 23:48

Danke für den Hinweis

Aber glaube nicht, dass das was mit meinem Problem zu tun hat...
Werde diese Fehler noch beheben, aber Vorrang hat für mich das beschriebene Problem...

btw CSS-Validierung ist ok

W3C CSS Validator results for http://home.arcor.de/helmsklamm/elite/css/style.css

hubspe · #4 (**permalink**) 19.12.2007, 11:23

Hi indiana,

Zitat:

Zitat von indiana:
Aber glaube nicht, dass das was mit meinem Problem zu tun hat...

aber die Wahrscheinlichkeit ist nicht so klein, das es damit zu tun hat.

Zitat:

Zitat von indiana:
Werde diese Fehler noch beheben, aber Vorrang hat für mich das beschriebene Problem...

wenn man sich mit deinem Problem beschäftigen soll müssen sich die Hilfswilligen ja erst mal mit deinem fehlerhaften Code rumschlagen, schon allein um den Fehler einzugrenzen und zu lokalisieren.

Das wird wahrscheinlich die Zahl der Hilfswilligen drastisch einschränken und das kann eigentlich nicht in deinem Interesse sein.

Gruß
Klaus

fricca · #5 (**permalink**) 19.12.2007, 11:50

Zitat:

Zitat von Indiana

1. Problem:
Mit IE schauts so aus wie es aussehen soll

Trotzdem ist die Darstellung im IE falsch. Ursache ist die hasLayout-auslösende Breitenangabe für die Links.

Zitat:

ABER wenn man das ganze mit Firefox anschaut sieht alles aus wie zerhauen. Liegt vermutlich am Float, aber weiß nicht wie das vermieden werden kann...

Ja, es liegt am Float. Um grundsätzlich zu verstehen, wie Float funktioniert: geh in die FAQ unter Punkt 2.
Das Grundverständnis bekommst du im ersten verlinkten Artikel, wie du dein Problem löst erfährst du im zweiten. Beachte besonders den Teil "Set a Float to Fix a Float".

Zitat:

Der Hover Effekt funktioniert nicht für die span-tags die innerhalb des Links sidn. Fährt man mit dem Mauszeiger über den Link, wird an den Stellen des Span Tags der Hover Effekt nicht angezeigt, d.h. es bleibt die Hintergrundfarbe stehen...

Wenn du willst, dass sich das span ändert, dann musst du es dem Browser auch sagen.
Diese Probleme hättest du nicht, wenn du nicht den Initialwert "transparent" für alle Elemente überschreiben würdest (zumal schwarzer Text auf schwarzem Grund alles andere als sinnvoll ist).

Zitat:

Code:

*{
     font-family: arial, tahoma, sans-serif;
     font-size: 12px;
     color: black;
     background-color: black;
         }

Nichtsdestoweniger solltest du deinen Code immer validieren -- und zwar bevor du postest. Siehe auch: http://xhtmlforum.de/40080-f-r-frage...twortende.html

Indiana · #6 (**permalink**) 21.12.2007, 16:03

So, erst mal danke für die Informationen!
Das Problem mit der Darstellung der Floats funktioniert nun so wie ich wollte.

Habe mich auch gleich daran gemacht den fehlerhaften Code in Ordnung zu bringen.

Jetzt hab ich nur noch ein Problem mit dem Hover-Effekt:
Wie sage ich dem Browser, dass wenn man auf den Link zeigt, dass die in ihm enthaltenen Span-tags ihre Schriftfarbe von weiß auf rot wechseln?

Ist das möglich? Wenn ja, wie?

HTML-Code:

Code:

<div id="navigation4">
<a href="#"><span class="match">EF vs MP</span><span class="score_won">12 - 4&nbsp;</span></a>
<a href="#"><span class="match">EF vs c2o</span><span class="score_lost">8 - 9&nbsp;</span></a>
<a href="#"><span class="match">EF vs WD</span><span class="score_won">2 - 0&nbsp;</span></a>
<a href="#"><span class="match">EF vs IQ</span><span class="score_won">5 - 4&nbsp;</span></a>
</div>

Für das Span-tag selbst wäre es (funktioniert aber bei IE nicht):

Code:

div#rightside span:hover {
    color: red;
    background-color: #111111;
         }

Aber ich möchte ja, dass der Hover Effekt für die Spans auch aktiv wird wenn man nur über den Link fährt...

Link zur Seite (Problemzone oben rechts):
€lite ƒorce
CSS-Validierung:
W3C CSS Validator results for http://home.arcor.de/helmsklamm/elite/css/style.css

Wäre für einen weiteren Tip dankbar!

fricca · #7 (**permalink**) 21.12.2007, 19:07

a:hover span {}

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Frage zu einem "BlindDown" Effekt	MarkusStar	Javascript & Ajax	7	18.03.2010 05:16
hover effekt bei visited links	ralle1337	CSS	3	09.10.2007 10:34
Falsche Darstellung unter IE..(Nach "height")	craxer	CSS	2	22.07.2006 01:52
Sozusagen falsche Darstellung im FF und Netscape	ipu	CSS	5	23.11.2005 15:02
MouseOver Effekt + Link auf die extreme Tour	YUMYUM-75	CSS	1	15.11.2004 21:24