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)

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>


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:41 Uhr.

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

© Dirk H. 2003 - 2019