Antworten auf deine Fragen:
Neues Thema erstellen

Tabellengestaltung mit CSS - Fehler in Übung!?

designcat08

Nicht mehr ganz neu hier

Hallo zusammen,

ich arbeite momentan das Buch "CSS-Design Die Tutorials für Einsteiger" von Heiko Stiegert durch.
Bei einer Übung zum Thema Tabellen habe ich das Problem, dass mein Ergebnis nicht so aussieht wie das in dem Buch. Ich habe den Code verglichen und konnte keinen Fehler/Unterschied finden.
Vielleicht kann mir ja hier jemand weiterhelfen bzw. den richtigen Tipp geben.

Das Ergebnis sollte so aussehen:


Bei mir ist es so, dass der grüne Bereich der ersten Spalte nach unten herausragt, der eigentlich ja mit dem grauen Bereich der anderen Spalten abschliessen sollte.....


Hier mal der Code dazu:

HTML:
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Tabellen für Profis</title>
<link rel="stylesheet" href="css/professionelletabelle.css" type="text/css" media="all" />
</head>
<body>
<div>
<img src="images/ic_ball.png" class="icon" alt="Tennisball" />
<table summary="Direktvergleich ehemaliger Top-10-Tennisspieler">
<caption>Direktvergleich ehemaliger Top-10-Tennisspieler</caption>
<colgroup>
<col width="125px" />
<col width="70px" span="5" />
</colgroup>
<thead>
<tr>
<td>Tennis-Spieler</td>
<th scope="col">Becker</th>
<th scope="col" class="best">Lendl</th>
<th scope="col">Sampras</th>
<th scope="col">Agassi</th>
<th scope="col">Edberg</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Sieg-Quotient:</th>
<td>76.9%</td>
<td class="best">81.8%</td>
<td>77.4%</td>
<td>76.0%</td>
<td>74.9%</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Gesamt-Spiele:</th>
<td>927</td>
<td class="best">1308</td>
<td>984</td>
<td>1144</td>
<td>1076</td>
</tr>
<tr>
<th scope="row">Bilanz:</th>
<td>713:214</td>
<td class="best">1070:238</td>
<td>762:222</td>
<td>870:274</td>
<td>806:270</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>


Code:
table {margin: 10px;
       padding: 0;
		 border: 0;
		 border-collapse: collapse;
		 font: normal 81% "Trebuchet MS", Verdana, sans-serif;
		 color: #FFF;}
		 
caption {font: italic normal 139%/1.44em Georgia, serif;
         text-align: right;
			color: #87C81C;
			padding: 0;
			margin: 0 15px 0 0;
			caption-side: top;}
			
td, th {padding: 0;
        margin: 0;
		  text-align: center;}
		  
thead th {height: 60px;
          vertical-align: bottom;
			 font-size: 115%;
			 line-height: 285%;
			 background: transparent url(../images/bg_head.gif) repeat-x bottom left;}
			 
thead td {font-weight: bold;
          vertical-align: bottom;
			 text-indent: 15px;
			 line-height: 292%;
			 text-align: left;
			 color: #999;}
			 
thead th.best {width: 100px;
               padding-bottom: 5px;
					font-size: 123%;
					background: #FFF url(../images/bg_head_best.gif) no-repeat bottom left;}
					
tfoot th {background: #FFF url(../images/bg_foot_th.gif) no-repeat top right;
          vertical-align: top;
			 padding-top: 4px;}
			 
tfoot td {background: #FFF url(../images/bg_foot_td.gif) repeat-x top left;
          height: 50px;
			 padding-top: 4px;
			 vertical-align: top;
			 text-decoration: underline;}
			 
tfoot td.best {background: transparent url(../images/bg_foot_best.gif) no-repeat top left;
               width: 100px;
					font-weight: bold;
					font-style: italic;
					font-size: 123%;}
					
tbody td {background: transparent url(../images/bg_body_td.gif) repeat-x bottom left;
          height: 30px;}
			 
tbody td.best {background: transparent url(../images/bg_body_best.gif) no-repeat bottom left;
               width: 100px;}
					
tbody th,
tfoot th {text-align: left;
          background: transparent url(../images/bg_body_th.gif) no-repeat bottom right;
			 font-weight: bold;
			 text-indent: 15px;}
			 
thead, tfoot {border: 1px solid #FFF;}

thead {border-width: 0 0 1px 0;}

tfoot {border-width: 1px 0 0 0;}

img.icon {border: 0px;
          position: absolute;
			 left: 122px;
			 top: 95px;
			 width: 42px;
			 height: 42px;
			 _display: none;}
 

cebito

undefined

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Stell das bitte online und sag evtl. dazu in welchem Browser du das anschaust. Niemand will das erst nachbauen.
 
G

Gelöschtes Mitglied 133165

Guest

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Alsa kleiner Tipp: Wenn Du Firefox nutzt, die Addons "Firebug" und "Web-Developer Toolbar" sind gerade auch Anfängern eine praktische Hilfe und verweisen oft auf Fehler oder Ungenauigkeiten, die man manchmal auch beim 10. Lesen der Listenings nicht selbst findet.
 

designcat08

Nicht mehr ganz neu hier

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Die Addons habe ich beide installiert im Firefox. Ich werde das Ganze auf jeden Fall nochmals inspizieren....manchmal sieht man die Dinge ja auch klarer nach einer kleinen Pause. Man entwickelt ja auch selbst einen gewissen Ehrgeiz in dieser Hinsicht.....

Das Ergebnis habe ich mir bisher im Firefox sowie im IE angesehen, und die Darstellung ist in beiden Browsern dieselbe.

Wie kann ich das Ganze am Besten für Euch online stellen?.....ich habe noch keinen Webspace. Aber wenn ich z.B. den ganzen Übungsordner irgendwo hochladen kann, dann mach ich das natürlich gern.
 

4uwak

WEB?ViDEO?FOTO and more

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

hier bekommst du einen Kostenlosen webhost anmelden daten hochladen (z.B. FileZilla) und link Posten dann wird garantiert schnell geholfen

Gruß Super4wauk
 
Zuletzt bearbeitet:

designcat08

Nicht mehr ganz neu hier

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

4uwak - vielen Dank für diesen Tipp, scheint wirklich ein toller Host zu sein zum Testen!!

Habe die Übungsdatei nun hochgeladen für Euch.
Hier die URL:


Ich habe mir das Ganze auch mit Firebug schon angesehen aber kann immer noch nicht entdecken woran es liegt.
Hoffe, im Buch ist kein Wert falsch abgedruckt worden...leider scheint es da einige Druckfehler zu geben, die ich bisher aber alle entdeckt habe.
 
D

dirtdiver2010

Guest

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Code:
tbody th, tfoot th {
text-align: left;
background: transparent url(../images/bg_body_th.gif) no-repeat bottom right;
font-weight: bold;
text-indent: 15px;}
Da liegt irgendwo der Fehler da wird irgendwo das Bild doppelt geladen. Musst mal in Firebug schauen wenn du Rechtsklick auf "Sieg Quotient" machst, Element untersuchen und da mal im CSS schauen dann siehst du das da was mit den Bildern doppelt geladen wird.

Sollte irgendwo an der Stelle im html sein:
HTML:
<tr>
 <th scope="row">Sieg-Quotient:</th>
 <td>76.9%</td>
 <td class="best">81.8%</td>
 <td>77.4%</td>
 <td>76.0%</td>
 <td>74.9%</td>
 </tr>

Soweit ich das gesehen habe kannst du den "tfoot th" im CSS rausnehmen, aber das ist unter Vorbehalt ohne Test
 
Zuletzt bearbeitet von einem Moderator:

SineTempore

Nicht mehr ganz neu hier

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Das Problem liegt darin, dass die bg_body_th.gif einfach zu groß ist. Vergleich sie mal mit bg_foot_td.gif. Dann wirst du feststellen, dass außer der Farbe noch etwas anderes anders ist. Denn wenn du mal statt Bilder Farbwerte einsetzt siehst du, dass alle Spalten gleich lang sind.
 

4uwak

WEB?ViDEO?FOTO and more

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

es ist ganz einfach nur den roten text löschen
Code:
tbody th[COLOR=Red][B], tfoot th[/B][/COLOR] 
{
text-align: left;
background: transparent url(../images/bg_body_th.gif) no-repeat bottom right;
font-weight: bold;
text-indent: 15px;
}

und so sollte es aussehen

Code:
tbody th 
{
text-align: left;
background: transparent url(../images/bg_body_th.gif) no-repeat bottom right;
font-weight: bold;
text-indent: 15px;
}
 

designcat08

Nicht mehr ganz neu hier

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Vielen Dank für Eure Hilfe!!! Jetzt ist es einwandfrei.

Wenn man die Materie beherrscht ist es sicher nicht allzu schwer rauszufinden. ;) Aber ich lerne natürlich dazu durch diese Beispiele.

Leider war der Fehler auch im Buch so abgedruckt. Nicht so schön wenn man noch dabei ist zu lernen...obwohl mir das Buch davon abgesehen schon gut gefällt.
 
D

dirtdiver2010

Guest

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Vielleicht gibt es von dem Buch Übungsbeispiele die man runterladen kann, kenne ich z.B über Franzis, dann kann man sich zumindest da den code anschauen.

Aber du lernst mehr wenn du mal Fehler suchen muss, und das wird dir, behaupte ich, immer mal wieder passieren ;)
 

designcat08

Nicht mehr ganz neu hier

AW: Tabellengestaltung mit CSS - Fehler in Übung!?

Ja, das stimmt....man lernt auf jeden Fall sehr viel daraus, wenn man auf Fehlersuche gehen muss und sich den Code wirklich noch mal anschaut. Das bringt sicherlich mehr als nur abzutippen. Und ich bin mir auch selbst ziemlich sicher, dass mir das noch so einige Male passieren wird...
Meistens hatte ich bisher auch Erfolg damit, den Fehler zu finden, aber dieses Mal konnte ich es irgendwie nicht selbst herausfinden....hatte auch schon hin- und hergebastelt....

Online konnte ich bisher noch keine Übungsbeispiele aus diesem Buch finden, aber ich werde weiterhin Ausschau halten.
Man gut, dass es das Internet gibt. Das Beste zum Lernen was ich bisher online gefunden habe war Little Boxes Teil 1 - vor allem weil ich gerade dieses Buch nicht im Original habe.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben