Hover-Effekt: Zwei Spalten ansprechen

[Philip Naggert]

Hallo Tach auch,

ich versuche mich so deutlich wie möglich auszudrücken und bitte das zu entschuldigen, falls mir das nicht gelingt.

Ich möchte in der Navigation einen Hover-Effekt mit CSS erstellen. Anbei eine Grafik, wie die Navigation im normalen Zustand und im Hover-Effekt Zustand aussehen soll.

http://www.fussball-pur.de/beispiel_hover.gif

Meine Frage hierbei ist nun folgende:

Kann ich mit CSS beim Hover 2 Spalten ansprechen? Wie auf der Grafik zu erkennen ist, verändern sich zwei Spalten (links von blau auf orange, rechts von hellgrau auf dunkelgrau).

Nun möchte ich erfahren, ob und wenn ja, wie dies umsetzbar ist. Falls es noch nach weiteren Erklärungen bedarf oder nach bisherigem Quellcode, bitte ich dies zu entschuldigen, werde dass dann je nach Aufforderung sofort nachreichen.

Für jede Antwort schon einmal im Voraus vielen Dank!

Gruß,
Philip

[Cheatah]

Hi,

Kann ich mit CSS beim Hover 2 Spalten ansprechen? Wie auf der Grafik zu erkennen ist, verändern sich zwei Spalten

ich erkenne da keine Spalten. Spalten sind ein Begriff, den ich insbesondere mit Tabellen assoziiere; und da Du dort tabellarische Daten nicht im Mindesten vorliegen hast, wirst Du eine Tabelle ganz sicher nicht verwenden. Wo also sollen dort Spalten sein?

(links von blau auf orange, rechts von hellgrau auf dunkelgrau).

Das sind keine Spalten.

Nun möchte ich erfahren, ob und wenn ja, wie dies umsetzbar ist.

Bei dem Strukturcode, der sich den Inhalten regelrecht aufdrängt, ist der gewünschte Effekt mit CSS leicht zu erreichen. Ohne irgend welche Spalten.

Cheatah

[Philip Naggert]

Hi,

Kann ich mit CSS beim Hover 2 Spalten ansprechen? Wie auf der Grafik zu erkennen ist, verändern sich zwei Spalten

ich erkenne da keine Spalten. Spalten sind ein Begriff, den ich insbesondere mit Tabellen assoziiere; und da Du dort tabellarische Daten nicht im Mindesten vorliegen hast, wirst Du eine Tabelle ganz sicher nicht verwenden. Wo also sollen dort Spalten sein?

(links von blau auf orange, rechts von hellgrau auf dunkelgrau).

Das sind keine Spalten.

Nun möchte ich erfahren, ob und wenn ja, wie dies umsetzbar ist.

Bei dem Strukturcode, der sich den Inhalten regelrecht aufdrängt, ist der gewünschte Effekt mit CSS leicht zu erreichen. Ohne irgend welche Spalten.

Cheatah

Hallo Cheatah,

danke für Deine schnelle Antwort und jedoch muss ich Dir widersprechen, da ich mit Tabellen arbeite - vll eine schlechte Idee meinerseits?

Hier einmal der Code:

.nav_katlinks
{
    background-color: #ffffff;
    padding: 0px;
    font-size: 10px;
}

.nav_unterpunkt
{
    width: 100%;
    height: 16px;
    color: #000;
    padding: 1px 3px 1px 3px;
    background-color: #DADADA;
    font-size: 11px;
}

.nav_unterpunkt a:link
{
    width: 100%;
    text-decoration: none;
    color: #000;
}

.nav_unterpunkt a:hover
{
    width: 100%;
    background-color: #C0C0C0;
}

.nav_untlinks
{
    background-color: #2B6598;
    padding: 0px;
    font-size: 11px;
}

Und die dazugehörige Tabellenstruktur:

<table border="0" cellspacing="0" cellpadding="0" width="780">
  <tr>
    <td width="1" class="nav_katlinks">&nbsp;</td>
    <td width="149" colspan="2" class="nav_kategorie">1.BUNDESLIGA</td>
  </tr>
  <tr>
    <td width="1" class="nav_untlinks">&nbsp;</td>
    <td width="149" colspan="2" class="nav_unterpunkt">Spieltag</td>
  </tr>
  <tr>
    <td width="1" class="nav_unthover">&nbsp;</td>
    <td width="149" colspan="2" class="nav_hover">Tabelle</td>
  </tr>
</table>

[Cheatah]

Hi,

danke für Deine schnelle Antwort und jedoch muss ich Dir widersprechen, da ich mit Tabellen arbeite - vll eine schlechte Idee meinerseits?

eine hundsmiserable Idee sogar. Tabellen dienen der Strukturierung tabellarischer Daten. Wenn Du schon auf das <thead>-Element verzichtest, ist die Wahrscheinlichkeit, dass <table> eine völlig falsche Wahl ist, nahe 100%.

.nav_katlinks
.nav_unterpunkt
.nav_untlinks

Dazu kommt eine Klassengesellschaft. Wozu?

Und die dazugehörige Tabellenstruktur:

Um was handelt es sich bei einer Navigation?

Cheatah

[Philip Naggert]

Hi,

eine hundsmiserable Idee sogar. Tabellen dienen der Strukturierung tabellarischer Daten. Wenn Du schon auf das <thead>-Element verzichtest, ist die Wahrscheinlichkeit, dass <table> eine völlig falsche Wahl ist, nahe 100%.

Gut, das klingt recht eindeutig, kann ich hier also auch mit CSS diese Darstellung reproduzieren? Dann werde ich mich da wohl ebenfalls durchfuchsen müssen! Benötige da nur nen kures Feedback, von <thead> habe ich zu meinem Bedauern leider noch nicht gehört.

Dazu kommt eine Klassengesellschaft. Wozu?

Ich wollte mir eine klar Struktur verschaffen, was hättest Du denn vorgeschlagen?

Um was handelt es sich bei einer Navigation?

Ist das ne Fangfrage? Ich weiß, ich stell mich vielleicht ein wenig dilletantisch an, aber ich hoffe, dass mir geholfen werden kann, ich habe bisher immer alles mit Tabellen erstellt, da ich im Gebiet CSS auch noch nicht so weit fortgeschritten bin, also wird mir lieber geraten, davon auf jeden fall abzusehen?

Zurück zu meiner ursprünglichen Frage:
Wenn ich jetzt die Navigation neu Codiere, soll dies dann komplett per CSS geschehen und wenn ja, wie erzeuge ich im Anschluss diesen tollen Effekt?

Danke und Gruß,
Philip

[Orlando]

Hallo Philip,

http://www.fussball-pur.de/beispiel_hover.gifhttp://www.fussball-pur.de/beispiel_hover.gif

Kann ich mit CSS beim Hover 2 Spalten ansprechen? Wie auf der Grafik zu erkennen ist, verändern sich zwei Spalten (links von blau auf orange, rechts von hellgrau auf dunkelgrau).

Eine Tabelle ist überflüssig, das ist besser mit einer http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste umzusetzen und funktioniert dann auch im IE (der :hover nur für a-Elemente kennt). Vorschlag:

HTML

  
<[ref:self811;html/text/listen.htm#aufzaehlung@title=ul] id="navigation">  
 <li><a href="…">Spieltag</a></li>  
 <li><a href="…">Tabelle</a></li>  
</ul>

CSS

  
[ref:self811;css/formate/zentrale.htm#individualformate@title=#navigation a] {  
  [ref:self811;css/eigenschaften/positionierung.htm#display@title=display]:block;  
  [ref:self811;css/eigenschaften/positionierung.htm#width@title=width]:6em;  
  [ref:self811;css/eigenschaften/hintergrund.htm#background_color@title=background-color]:#ccc;  
  [ref:self811;css/eigenschaften/rahmen.htm#border_width@title=border-left]:.2em solid #005;  
  [ref:self811;css/eigenschaften/innenabstand.htm#padding_left@title=padding-left]:.1em;  
}  
  
#navigation [ref:self811;css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=a:hover] {  
  border-left-color:#880;  
  background-color:#aaa;  
}

Siehe auch <http://de.selfhtml.org/css/layouts/anzeige/nav_vertikal.htm@title=SELFHTML: Navigationslisten>

Grüße
 Roland

[Ashura]

Hallo Orlando.

Vorschlag:

[…]

Die Anforderung lässt sich damit aber nicht erfüllen. Entweder verwendet man zusätzlich noch die outline-Eigenschaft oder einfach zwei verschiedene Hintergrundgrafiken.

Diese Grafiken müssen lediglich 1px hoch sein und den blauen bzw. orangenen Teil sowie rechts 1px der zukünftigen Rahmenfarbe enthalten.

Diese Rahmenfarbe verpasst man auch den a-Elementen sowie die Hintergrundgrafik <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat@title=an der y-Achse wiederholt> und <http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position@title=links ausgerichtet>.

Einen schönen Montag noch.

Gruß, Ashura

[Philip Naggert]

Hallo Roland,

ich habe nun einmal - hoffentlich - Deine Schritte befolgt und bin zu folgendem Ergebnis gekommen:

http://www.fussball-pur.de/navigation/test.htm

Was mich leider sehr ärgert und ich aktuell auch nicht den Fehler finde ist der Unterschied zwischen Firefox und dem Internet Explorer. Im Firefox wird es so dargestellt, wie ich es mir vorstelle, im Internet Explorer ist es jedoch verfälscht.

Woran mag dies liegen? Hab bereits vieles ausprobiert, jedoch bin ich zu keinem Ergebnis gekommen!

Ich hoffe, dass Du imir in diesem Punkt noch einmal weiterhelfen kannst.

Danke und Gruß,
Philip

[Ingo Turski]

Hi,

in ul haben lediglich li etwas zu suchen und über geschütze Leerzeichen Abstände erzielen zu wollen ist ohnehin Murks.
Gebe Deinen h2 einfach ein passendes margin-top.

freundliche Grüße
Ingo