zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hover effekt auf ganze TD zelle

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 10.07.2011, 14:48
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 10.07.2011, 14:57
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von gandalf_hh (10.07.2011 um 15:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 10.07.2011, 14:59
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

<!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>
Mit Zitat antworten
  #14 (permalink)  
Alt 10.07.2011, 15:36
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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

Geändert von Manfred62 (10.07.2011 um 15:38 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 10.07.2011, 15:47
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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.

Geändert von gaby (10.07.2011 um 16:03 Uhr)
Mit Zitat antworten
  #16 (permalink)  
Alt 10.07.2011, 16:09
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
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
Mit Zitat antworten
  #17 (permalink)  
Alt 10.07.2011, 17:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.03.2006
Beiträge: 387
gaby sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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 anzeigen
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.
Mit Zitat antworten
  #18 (permalink)  
Alt 10.07.2011, 17:33
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
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 anzeigen
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
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #19 (permalink)  
Alt 10.07.2011, 17:58
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von gaby Beitrag anzeigen
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
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 10.07.2011, 18:58
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 23.03.2011
Beiträge: 206
gandalf_hh befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
Sponsored Links
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
Hilfe css Menu center xXcyberXx CSS 5 28.11.2010 19:51
Problem mit CSS Menü SMundt CSS 9 07.01.2009 19:12
CSS Navigation - Problem mit IE6 pcklinik CSS 4 18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7 pcklinik CSS 7 09.09.2007 17:25
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 14:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:27 Uhr.