|
||||
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 >> 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> 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 |
Sponsored Links |
|
|||
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 16:00 Uhr) |
Sponsored Links |
|
|||
<!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> |
|
|||
Zitat:
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 17:03 Uhr) |
|
||||
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> 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 |
|
|||
Zitat:
Zitat:
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. |
|
|||
Zitat:
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. |
|
||||
Zitat:
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> |
Sponsored Links |
|
|||
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> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Problem mit CSS Menü | SMundt | CSS | 9 | 07.01.2009 20:12 |
CSS Navigation - Problem mit IE6 | pcklinik | CSS | 4 | 18.09.2007 13:04 |
Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 18:25 |
CSS Einsteiger bittet um Hilfe | pcklinik | CSS | 0 | 06.09.2007 15:40 |