XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Hover effekt auf ganze TD zelle (http://xhtmlforum.de/showthread.php?t=65114)

gandalf_hh 09.07.2011 16:25

Hover effekt auf ganze TD zelle
 
leute wer kann mir in meine TD ZELLE einen hover einbauen?
wenn ich mit der maus rauf gehe dann soll die gaze zelle in eine andere farbe läuchten.

<table>
<tr>
<td style="width:180px; background-color:#000;">
<span style="float:left;">NIKE AIR MAX</span>
<span style="float:right;">60€</span></td>
</tr>
</table>

Manfred62 09.07.2011 17:48

Schon mal an :hover gedacht? Geht aber nicht in alten IE (ohne js).

Manfred

gandalf_hh 10.07.2011 12:27

weiss nicht so recht, ich halte mehr so ein abstand zu java.
ich hab die erfahrung gemacht das computer nutzer java selbst installieren müssen um java funktionen/chat auf websiten nutzen zu können. nicht jeder computer nutzer weiss was java ist.

hubspe 10.07.2011 12:41

Zitat:

Zitat von gandalf_hh (Beitrag 497571)
weiss nicht so recht, ich halte mehr so ein abstand zu java.
ich hab die erfahrung gemacht das computer nutzer java selbst installieren müssen um java funktionen/chat auf websiten nutzen zu können. nicht jeder computer nutzer weiss was java ist.

äh...und was hat jetzt Java mit der von Manfred vorgeschlagenen Lösung zu tun?? :?

gandalf_hh 10.07.2011 12:44

damit wollte ich sagen das ich an java lösungen nicht denke :)

gaby 10.07.2011 12:54

Zitat:

Zitat von gandalf_hh (Beitrag 497571)
weiss nicht so recht, ich halte mehr so ein abstand zu java.
ich hab die erfahrung gemacht das computer nutzer java selbst installieren müssen um java funktionen/chat auf websiten nutzen zu können. nicht jeder computer nutzer weiss was java ist.

JS ist JavaScript, nicht Java.
Aber auch hier ist nicht garantiert, daß alle Besucher es aktiviert haben, und den Hovereffekt auch sehen.

SELFHTML: Stylesheets / CSS-Eigenschaften / Pseudoelemente und Pseudoklassen

In älteren IEs wirkt die Pseudoklasse :hover nur auf A-Elemente, also nur auf Links und Anker.

Du könntest also einen Link in die Tabellenzelle legen, der die Zelle zu 100% ausfüllt, und dann diesen Link hovern. Das würde dann auch in älteren Browsern angezeigt werden.

Hover in Tabellenzelle
(wg Schrottwerbung JS aktivieren)

Diese Methode hätte aber den Nachteil, daß die Seite immer wieder hochspringt, wenn der Besucher auf den Link klickt, und dieser die aktuelle Seite referenziert.

Demo hier:
Hover in Tabellenzelle-2

gandalf_hh 10.07.2011 13:00

mit li macht man ja eigentlich menüs. kann ich damit nicht tabellen machen? bei li hat man solche hover probleme nicht.


<table>
<tr>
<td:hover background-color:#fff style="width:180px; background-color:#000;">
<span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></td>
</tr>
</table>
ich habe es so versucht aber es hat nicht geklappt

gaby 10.07.2011 13:15

Zitat:

Zitat von gandalf_hh (Beitrag 497575)
mit li macht man ja eigentlich menüs. kann ich damit nicht tabellen machen? bei li hat man solche hover probleme nicht.


<table>
<tr>
<td:hover background-color:#fff style="width:180px; background-color:#000;">
<span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></td>
</tr>
</table>
ich habe es so versucht aber es hat nicht geklappt

Hast du dir meine verlinkte Seite von Selfhtml durchgelesen?
Dort wird beschrieben, an welcher Stelle :hover zu deklarieren ist.

gandalf_hh 10.07.2011 13:37

ich habe es mir durchgeschaut und kein td:hover beispiel gefunden, nur ein h1:hover beispiel.

nun hab ich es einmal damit umsetzen wollen aber hat nicht geklappt und ein versuch hatte ich noch gemacht mit JS, was ich glaub ich noch vergessen habe zu erwähnen, die zelle soll ganz mit hover gefüllt sein UND die ganze zelle soll als link funktionieren. so wie bei einem LI menü


<head>
<style type = text/css>
a:hover { font-weight:bold; color:#FFF; background-color:#0F0; text-decoration:none; }
td:hover { background-color:silver; }
</style>
</head>
<body>


<table>
<tr>
<td style="width:180px; background-color:#000;">
<a href=""><span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></a></td>
</tr>
</table>

<br /><br />

<table>
<tr>
<td onMouseOver="this.style.backgroundColor='#60ff00'; "onMouseOut="this.style.backgroundColor='#ff80 ff'" style="width:180px; background-color:#000; color:#FFF">
<span style="float:left; font-family:Arial;">NIKE AIR MAX</span>
<span style="float:right; font-family:Arial;">60€</span></td>
</tr>
</table>

</body>
</html>

gaby 10.07.2011 14:09

PHP-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"
>
<
HTML>

<
HEAD>
<
TITLE>Hover und Positionieren in Tabellenzelle</TITLE>
<
META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
STYLE type="text/css">


body {
    
margin0;
    
padding0;
    
font-family Verdanasans-serif;
    
font-size:100.01%;
    
background-color:#e1e1e1;   }




table  {
     
background-color:#eee;
     
width:100%;
     
border0.4em ridge #ccc;  }

td  {    
    
positionrelative
    
width180px
    
background-coloryellow
 }
     

td .tab {
    
positionrelative
    
height100%;
    
width100%;
    
border2px dotted red;
    }

td div:hover {
   
background-colorred }


</
STYLE>
</
HEAD>

<
BODY>

<
div style="width: 400px; margin: auto;  border: 1px solid;">



<
table>
<
tbody>
    <
tr>
        <
td
            <
div class="tab"
                <
divNIKE AIR MAX </div>
                <
div style="position: absolute; top: 0; right: 0;"60€ </div>
            </
div>
        </
td>
    </
tr>
</
tbody></table>

</
div>

</
body>
</
HTML

Das "div:hover" wird aber in älteren IEs nicht funktionieren.

Manfred62 10.07.2011 14:48

Hmm, irgendwie scheinen hier grundlegende Kenntnisse zu Tabellen zu fehlen.
Diese ganzen div und span Konstrukte sind doch Murks.

Eine Tabelle stellt tabellarische Daten dar: Schuhmodell, Preis, etc..
Hier mal ein einfaches Beispiel (war mal ein Tut auf Websqueeze):
HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
      CSS Tables &gt;&gt; A Screencast by Jack Franklin
    </title>
    <style type="text/css">
table {
    border-collapse: collapse;
    width: 500px;
    font-family: 'Trebuchet MS', sans-serif;
    }

 /*  tbody tr:nth-child(odd) {
    background-color: grey;
    }  */

    tbody tr:hover {
    background-color: #E3E3E3;
    }

    tr {
    height: 50px;
    }

    td, th {
    text-align: center;
    border: 3px solid #ccc;
    }

    thead tr {
    background-color: #111;
    color: white;
    }
    </style>
  </head>
  <body>
    <table border="0">
      <thead>
        <tr>
          <th>
            Name
          </th>
          <th>
            Age
          </th>
          <th>
            Shoe Size
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            Bob
          </td>
          <td>
            15
          </td>
          <td>
            11
          </td>
        </tr>
        <tr>
          <td>
            Jack
          </td>
          <td>
            10
          </td>
          <td>
            9
          </td>
        </tr>
        <tr>
          <td>
            Bobette
          </td>
          <td>
            17
          </td>
          <td>
            3
          </td>
        </tr>
        <tr>
          <td>
            Jim
          </td>
          <td>
            12
          </td>
          <td>
            6
          </td>
        </tr>
        <tr>
          <td>
            Jacob
          </td>
          <td>
            97
          </td>
          <td>
            4
          </td>
        </tr>
        <tr>
          <td>
            Karinne
          </td>
          <td>
            12
          </td>
          <td>
            5
          </td>
        </tr>
        <tr>
          <td>
            Linda
          </td>
          <td>
            20
          </td>
          <td>
            8
          </td>
        </tr>
        <tr>
          <td>
            Simon
          </td>
          <td>
            11
          </td>
          <td>
            12
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Weiterführende Links zu Tabellen:
pro Barrierefreiheit: Entwickler - Tabellen: Strukturierung
http://webstandard.kulando.de/post/2..._den_standards
Top 10 CSS Table Designs - Smashing Magazine

den hover Effekt (tr:hover) macht man für IE6 mit einem Schnippsel JavaScript (nicht Java!!)
Suchbegriff: Suckerfish

Manfred

gandalf_hh 10.07.2011 14:57

okay. dankeeee manfred hat geklappt.
ich hab geschafft das so zu ändern wie ich es mir vorgestellt habe.

"hubspe" mein großer, gucks dir an dann weisst du was ich mir gedacht hatte.

gandalf_hh 10.07.2011 14:59

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Hover und Positionieren in Tabellenzelle</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

a:link {
color:#FFF;
font-family: Arial;
font-size: 14px;
text-decoration: none;
}

a:visited {
color:#FFF;
font-family: Arial;
font-size: 14px;
text-decoration: none;
}

a:hover, a:active, a:focus {
text-decoration: none;
}

table {
font-family: Arial;
font-size: 14px;
color: #FFF;
}

td {
width: 180px;
background-color: #000;
border: 1px inset #000;
}

td .tab {
position: relative;
height: 100%;
width: 100%;
}

td div:hover {
background-color: #FF0;
color: #000;
}
</style>
</head>
<body>


<table>
<tbody>
<tr>

<td>
<div style="width: 200px;">
<a href=""><div class="tab">
<div> NIKE AIR MAX 42</div>
<div style="position: absolute; top: 0; right: 0;"> 60€ </div>
</div></a>
</div>
</td>

<td>
<div style="width: 200px;">
<a href=""><div class="tab">
<div> NIKE AIR MAX 45</div>
<div style="position: absolute; top: 0; right: 0;"> 60€ </div>
</div></a>
</div>
</td>

<td>
<div style="width: 200px;">
<a href=""><div class="tab">
<div> NIKE AIR MAX 39</div>
<div style="position: absolute; top: 0; right: 0;"> 60€ </div>
</div></a>
</div>
</td>

<tr>

<td>
<div style="width: 200px;">
<a href=""><div class="tab">
<div> NIKE AIR MAX 42</div>
<div style="position: absolute; top: 0; right: 0;"> 60€ </div>
</div></a>
</div>
</td>

<td>
<div style="width: 200px;">
<a href=""><div class="tab">
<div> NIKE AIR MAX 45</div>
<div style="position: absolute; top: 0; right: 0;"> 60€ </div>
</div></a>
</div>
</td>

<td>
<div style="width: 200px;">
<a href=""><div class="tab">
<div> NIKE AIR MAX 39</div>
<div style="position: absolute; top: 0; right: 0;"> 60€ </div>
</div></a>
</div>
</td>

</tr>
</tbody>
</table>
</div>

</body>
</html>

Manfred62 10.07.2011 15:36

Sorry, dein Ergebnis ist Murks. Validier mal, dann siehst du es.
Block-Elemente haben in inline-Elementen nix verloren.
Lies dir das oben geschriebene noch mal durch.

Manfred

EDIT: verwende beim posten bitte die code/html tags

gaby 10.07.2011 15:47

Zitat:

Zitat von Manfred62 (Beitrag 497579)
Hmm, irgendwie scheinen hier grundlegende Kenntnisse zu Tabellen zu fehlen.
Diese ganzen div und span Konstrukte sind doch Murks.

Auf welchen Code beziehst du dich?

Falls du meinen meinst, wiee würdest du das denn umsetzen, wenn links ein Text und rechts ein Preis positioniert werden muß?
Text und Preis in verschiedene TDs zu setzt, und dann TR zu hovern, würde bedeuten, daß in dem Fall die Tabelle nur aus diesen beiden Spalten bestehen dürfte.

Das scheinbar überflüssige Wrapper-Element DIV#tab kann ich nicht einfach weglassen, denn sonst müßte ich TD das 'position: relative' geben, was aber nicht funktioniert.



@ gandalf
Setze doch bitte deinen Code in Code-tags, sonst gehen im Posting die Einrückungen verloren, und es ist mühsamer, die Tabellenkonstrukte zu überblicken.

Manfred62 10.07.2011 16:09

Zitat:

Zitat von gaby (Beitrag 497583)
Auf welchen Code beziehst du dich?

Bezogen auf beide (wegen div und span).

Schaut euch doch einfach das table Beispiel oben an.
Dort steht auch alles nebeneinander (hat einen Bezug** zueinander).

Wenn die Felder keinen Bezug** zueinander haben,
kann man das auch anders machen. Siehe hier (eine Bastelei von mir):
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>
      3 Boxen mit Easyclearing Test
    </title>
    <style type="text/css">
/* <![CDATA[ */
    * {margin: 0;padding: 0;}
    body {color: #303030;font: 100%/1.4 sans-serif;}
    .msg {width: 500px;border: 1px solid #303030;margin: 20px 0 0 20px;}
    h3 {font-weight: normal;border-bottom: 1px solid #c7c7c7;padding: 5px;background: #ECECEC;}
    .profil {float: left;width: 160px;padding: 5px;}
    .txt {float: left;width: 310px;border-left: 1px solid #c7c7c7;padding: 5px;}
    /* hier folgt easyclearing, um die Floats in den Boxen aufzulösen */
    .cf:before, .cf:after {content:"";display:table;}
    .cf:after {clear:both;}
    /* ]]>
*/
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    /* <![CDATA[ */
    .cf {zoom:1;} /* fuer IE 6/7 (hasLayout) */
    /* ]]>
*/
    </style>
    <![endif]-->

  </head>
  <body>
    <div class="msg cf">
      <!-- Variante mit dl (Definitionsliste) -->
      <h3>
        Thema geschrieben am ...
      </h3>
      <dl>
        <dt class="profil">
          Userprofil
        </dt>
        <dd class="txt">
          Text mit Umbruch<br />
          Text Text Text Text<br />
          Text Text Text Text<br />
          Text Text Text Text<br />
          Text Text Text Text
        </dd>
      </dl>
    </div>
    <div class="msg cf">
      <!-- Variante mit p (Absatz) -->
      <h3>
        Thema geschrieben am ...
      </h3>
      <p class="profil">
        Userprofil
      </p>
      <p class="txt">
        Mehr Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text Text Text Text Text Text
      </p>
    </div>
    <div class="msg cf">
      <!-- Variante mit div -->
      <h3>
        Thema geschrieben am ...
      </h3>
      <div class="profil">
        Userprofil
      </div>
      <div class="txt">
        Viel mehr Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
        Text Text Text Text Text Text
      </div>
    </div>
  </body>
</html>

Bezug**: genau das ist der springende Punkt zum Thema Tabelle.
Eine Tabelle sagt: dieser Schuh kostet soviel Euro.

Eine div, span Konstruktion sagt nix aus, sie sorgt
lediglich fürs Design --> Textfeld neben Textfeld.

Manfred

gaby 10.07.2011 17:09

Zitat:

Zitat von Manfred62 (Beitrag 497584)
Bezogen auf beide (wegen div und span).

Schaut euch doch einfach das table Beispiel oben an.
Dort steht auch alles nebeneinander (hat einen Bezug** zueinander).

Das hatte ich mir auch angeschaut.
Zitat:

Zitat von gaby (Beitrag 497583)
Text und Preis in verschiedene TDs zu setzt, und dann TR zu hovern, würde bedeuten, daß in dem Fall die Tabelle nur aus diesen beiden Spalten bestehen dürfte.

Vorgabe von gandalf war aber eine Tabelle mit mehreren Spalten und Reihen, die genau neben- und untereinander stehen sollen.

Obwohl bei meinem Code die Semantik verloren geht, halte ich es immer noch für die bessere Lösung.
Was wäre denn die Alternative unter Wahrung der Semantik?
Okay, einzeilige Tabellen oder Definitionslisten, denen man feste Breite und Höhe gibt, und mit 'float' nebeneinander setzt.

Das geht designmäßig so lange gut, bis irgendein langer Text die Box sprengt oder ein User seine Schrift vergrößert.

Ich bin immer dafür, den Code nach semantischen Gesichtspunkten zu schreiben, aber wenn ich nur die Wahl habe zwischen Semantischen Code oder stabilem Design, dann entscheide ich mich für Letzteres.
Etwas anderes könnte ich einem Kunden nicht vermitteln.

gato 10.07.2011 17:33

Zitat:

Zitat von gaby (Beitrag 497585)
Vorgabe von gandalf war aber eine Tabelle mit mehreren Spalten und Reihen, die genau neben- und untereinander stehen sollen.

Das wird doch mit einer "guten" Tabelle mit 6 Spalten und Vergabe von Spaltenbreiten auch erreicht. Ggf. muss die vertikale Positionierung innerhalb der Zelle angepasst werden, aber davon abgesehen?

Zitat:

Zitat von gaby (Beitrag 497585)
Ich bin immer dafür, den Code nach semantischen Gesichtspunkten zu schreiben, aber wenn ich nur die Wahl habe zwischen Semantischen Code oder stabilem Design, dann entscheide ich mich für Letzteres.

Oft gibt es aber gute Kompromisse, die man erzielen kann, wenn man die verwendeten Werkzeuge gut kennt (col, th, headers). Wenn ich mir das gewünschte Ergebnis anschaue, sehe ich Verbesserungsbedarf :)

Manfred62 10.07.2011 17:58

Zitat:

Zitat von gaby (Beitrag 497585)
Vorgabe von gandalf war aber eine Tabelle mit mehreren Spalten und Reihen, die genau neben- und untereinander stehen sollen.

Naja, die Vorgabe war für mich nicht ersichtlich. Er hat halt mit einer td angefangen...
Erst mit seinem "fertigen" Beispiel sieht man, wo er hin will.

@gaby
zu deinem Beispiel-Code. Der geht auch deutlich einfacher..
Code:

td  {   
    width: 180px;
    background: yellow;
    border: 2px dotted red;
    }
   
td span {
    float: right;
    }
   
td:hover {
  background: red;
  }

<table>
<tbody>
    <tr>
        <td>
        NIKE AIR MAX <span> 60€ </span>
        </td>
    </tr>
</tbody>
</table>

Manfred

gandalf_hh 10.07.2011 18:58

gaby hat mich falsch verstanden, ich hab so eine tabelle nie gewollt. aber danke trotzdem.
manfred du bist heute wohl super drauf zauberst eine lösung besser als die andere :) gut das es auch so kurz geht, ich wollte aber AUCH das die ganze zelle ein link ist und dafür musste ich ein div reinsetzen, ist das richtig so oder geht das auch anders?

<td>
<a href="">
<div>
NIKE AIR MAX <span> 60€ </span>
</div>
</a>
</td>

gato 10.07.2011 19:11

Wenn du einen Link haben möchtest, der wie ein Blockelement funktioniert, dann gibt dem a-Element doch einfach display: block;

gandalf_hh 10.07.2011 19:32

ja, klappt :)
dankeeeeee leute.
ihr wart super.
dachte nicht das es so kurz geschrieben werden kann...

gaby 10.07.2011 22:33

Zitat:

Zitat von Manfred62 (Beitrag 497588)
@gaby
zu deinem Beispiel-Code. Der geht auch deutlich einfacher..
Code:

td  {   
    width: 180px;
    background: yellow;
    border: 2px dotted red;
    }
   
td span {
    float: right;
    }
   
td:hover {
  background: red;
  }

<table>
<tbody>
    <tr>
        <td>
        NIKE AIR MAX <span> 60€ </span>
        </td>
    </tr>
</tbody>
</table>

Manfred

Stimmt, das ist viel einfacher als mein Vorschlag, aber eine kleine Änderung würde ich dennoch machen, um die Darstellung browserübergreifend zu bekommen. ;)

Das 'float' rutscht laut Screenshot-Service im IE-7 und IE-6 in die nächste Zeile.
Wenn man das Float nach vorne setzt, passt es auch in diesen Browsern.

Code:

<td>
    <span> 60€ </span>  NIKE AIR MAX
</td>


gandalf_hh 11.07.2011 01:08

ich habe ja in diese td tabelle link's gesetzt und auf meiner seite ist ja ein a:link usw. nun möchte ich aber das die
einstellungen für meine link's auf der homepage anders sind als die einstellungen für die link's in der tabelle.
kann ich das irgendwie machen?

ich hatte ja in die ganze TD zelle hover reingemacht, nun möchte ich aber ganz links eine zelle ohne hover,
ich komm da irgendwie nicht drum rum. habe versucht style="hover:none;" ging nicht...

ich zähl mal die probleme auf:
1.getrende a:link einstellung...
2.ganz linke spalte ohne hover...
3.beim minimieren der seite bricht die TD zelle ungewönlich schnell was ich nicht möchte...
den vorschlag es andersrum zu schreiben habe ich auch versucht hat bei mir nicht geholfen = <span> 60€ </span> NIKE AIR MAX


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type = "text/css">
a:link {
text-decoration: none;
color:#FFF;
font-family: Tahoma;
font-size: 14px;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
td {
font-family: Tahoma;
font-size: 14px;
color: #FFF;
background-color: #000;
}
td span {
float: right;
margin-right:2px;
width:inherit;
}
td:hover {
background-color: #090;
}
</style>
</head>
<body>
<table>
<tr>
<td style="width:90px; border:none;">12jul. 19.00</td>
<td style="width:230px;"><a href=""><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href=""><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href=""><div>NIKE AIR MAX<span>60euro</span></div></a></td>
</tr>
</table>
</body>
</html>

gandalf_hh 11.07.2011 19:57

ich hab gelesen das ich die a: in klassen aufteilen muss um das umzusetzen. dann hab ich es so versucht:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type = "text/css">
a.klasse_1:link {text-decoration:none; color:#0F0; font-family:Tahoma; font-size:14px;}
a.klasse_1:visited {text-decoration:none; color:#0F0;}
a.klasse_1:hover, a.klasse_1:active, a.klasse_1:focus {text-decoration:none;}

a.klasse_2:link {text-decoration:none; color:#F00; font-family:Tahoma; font-size:14px;}
a.klasse_2:visited {text-decoration:none; color:#F00;}
a.klasse_2:hover, a.klasse_2:active, a.klasse_2:focus {text-decoration:none;}

td {
font-family: Tahoma;
font-size: 14px;
color: #FFF;
background-color: #000;
}
td span {
float: right;
margin-right:2px;
width:inherit;
}


</style>
</head>
<body>
<table>
<tr>
<td style="width:90px; border:none;">12jul. 19.00</td>
<td style="width:230px;"><a href="" class="klasse_1"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_1"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_1"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
</tr>
</table>

<table>
<tr>
<td style="width:90px; border:none;">12jul. 19.00</td>
<td style="width:230px;"><a href="" class="klasse_2"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_2"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
<td style="width:230px;"><a href="" class="klasse_2"><div>NIKE AIR MAX<span>60euro</span></div></a></td>
</tr>
</table>
</body>
</html>



ich wollte auch die hover trennen das hab ich so gemacht leider ohne erfolg:

a.klasse_1:hover { text-decoration:none; background-color:#00F;}
a.klasse_2:hover { text-decoration:none; background-color:#6F0;}

td.a.klasse_1:hover { text-decoration:none; background-color:#00F;}
td.a.klasse_2:hover { text-decoration:none; background-color:#6F0;}

naja ich hab die links trennen können 8)
-aber hover trennen fehlt mir noch
-die zelle ganz links möchte ich ohne hover
-und wenn man die seite minimiert bricht die TD Zelle ungewöhnlich schnell, guckt mal bitte ob das normal ist

Manfred62 11.07.2011 20:38

Du liest die Hinweise nicht, oder??

Setz endlich den Code in die Tags (beim posten)!
Block-Element in Inline-Element ist Murks!
Mach dich mit dem sinnvollen Gebrauch von id und class vertraut!
Noch ein Stichwort: Spezifität.

Ansonsten, falls du das noch nicht kennst/durchgearbeitet hast:
LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)

Manfred

gaby 12.07.2011 02:19

Zitat:

Zitat von gandalf_hh (Beitrag 497606)
3.beim minimieren der seite bricht die TD zelle ungewönlich schnell was ich nicht möchte...

Hier ist ein Tutorial über FLOAT.

Float

Wenn du das gelesen hast, kannst du besser beurteilen, ob das Umbrechen in die nächste Zeile "ungewönlich schnell" oder normal erfolgt.

Zitat:

den vorschlag es andersrum zu schreiben habe ich auch versucht hat bei mir nicht geholfen = <span> 60€ </span> NIKE AIR MAX
Ältere Browser reagieren bei Floats ohne Breitenangabe sehr unterschiedlich. So machen zb ältere IEs einen Zeilenumbruch, wenn das Float nicht an erster Stelle steht. Lade deinen Code doch mal hoch. Dann kannst du hier kontrollieren, wie es in verschiedenen IEs aussieht.

IE NetRenderer - Browser Compatibility Check -

gaby 13.07.2011 19:06

gelöscht.

Ich habe stattdessen einen eigenen Thread aufgemacht, weil das neue Thema doch etwas vom subject dieses Threads abweicht.

---> http://xhtmlforum.de/65146-gruppe-vo...en-hovern.html


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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019