zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Darstellung Link/Hover Effekt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.12.2007, 20:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2007
Beiträge: 3
Indiana befindet sich auf einem aufstrebenden Ast
Cool Darstellung Link/Hover Effekt

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;
  }
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.12.2007, 22:38
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

[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.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.12.2007, 23:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2007
Beiträge: 3
Indiana befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 19.12.2007, 11:23
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 19.12.2007, 11:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Indiana Beitrag anzeigen
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
Mit Zitat antworten
  #6 (permalink)  
Alt 21.12.2007, 16:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.12.2007
Beiträge: 3
Indiana befindet sich auf einem aufstrebenden Ast
Standard

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):
&euro;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!

Geändert von Indiana (21.12.2007 um 16:09 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 21.12.2007, 19:07
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

a:hover span {}
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:06 Uhr.