zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden Anfänger: Aufgabe - Tabelle in verschiedenen Farben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.07.2008, 13:48
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard Anfänger: Aufgabe - Tabelle in verschiedenen Farben

Es ist zwar nix Umwerfendes, aber ich wollte Euch trotzdem einmal fragen, ob der QT in der html- und der css-Datei sauber geschrieben worden ist, und ob mein Ansatz so richtig war.

Holgers Farbtabelle

Das war eine kleine Aufgabe, die ich gestellt bekommen habe. Eine Farbtabelle zu erstellen, wo jede Zelle und deren Schrift eine andere Farbe besitzt. Habe sie für ein Browserfenster der Größe 1024x768 inklusive Einblendung 1-2 zusätzlicher Leisten erstellt.

Valide sind die Dateien und funktionieren tut es ja auch , nur ist es als Anfänger immer so eine Sache, ob die Umsetzung „AutorenErfahrungsGerecht“ gestaltet wurde. Möchte mir einfach nichts Falsches oder Umständliches angewöhnen.

Würde mich über ein kleines Feedback freuen.

PS: Ich habe das Kapitel „CSS-Tabellen“ noch nicht durchgearbeitet, dachte mir aber dass mein aktuelles Wissen für diese Aufgabe reicht.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.07.2008, 15:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 21.11.2006
Beiträge: 126
Paul Kleinhans wird schon bald berühmt werden
Standard

HTML:
Gib einer Grafik im Quelltext immer ihre Abmessungen mit.
Zitat:
Zitat von Michael Jendryschik
Es gehört zum guten Stil, die Breite und Höhe eines Bildes stets anzugeben, damit Browser den benötigten Platz reservieren und das Dokument weiter aufbauen können, während die Bilddaten noch geladen werden. Fehlen diese Attribute, führt dies zu unschönen Effekten beim Seitenaufbau; die Seite wird zunächst ohne Bilder angezeigt und muss sich schließlich neu zurechtruckeln, sobald die Bilder geladen sind.
CSS:
Da alle Zellen den selben Rahmen haben reicht es, wenn du dem td das border: solid 6px #5E5E5E; zuweist und aus den einzelnen Klassen herausnimmst.
Wirf auch noch einen genaueren Blick auf die Kurzschreibweise.
Code:
background:#ff0;
statt
background-color:#FFFF00;

color:	#ccc;
statt
color:	#CCCCCC;
Man sieht an deinem schönen Übungsbeispiel, dass du sehr schnell lernst. Weiter so.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.07.2008, 15:06
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Eine Tabelle hätte ich hier gar nicht verwendet. Die Kästchen sind alle gleich groß und auf einer Fläche verteilt - da kann man auch float nutzen. Schau mal hier, da gibt es sowas ohne jegliche Tabellenkonstrukte.
Mit Zitat antworten
  #4 (permalink)  
Alt 26.07.2008, 16:35
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

Danke dass Ihr Euch den QT angeschaut habt.

Zitat:
Zitat von Paul Kleinhans
Gib einer Grafik im Quelltext immer ihre Abmessungen mit.
Korrekt. Habe mich dazu verleiten lassen, weil sie korrekt angezeigt wurde und dann nicht mehr dran gedacht. Wurde korrigiert.

Allerdings habe ich bei der Grafik etwas gefuscht. Wollte sie eigentlich beide einzeln verarbeiten, hab es jedoch nicht geschafft, ohne mir dabei die Tabelle zu zersprengen. Die Spalte wurde meist immer breiter angezeigt als sie sollte. Somit schnell mit PS aus zwei eine png-Grafik gemacht, was mich schon ein wenig gefuchst hat.
Muss ich noch mal was probieren, vielleicht mit float, denn mit position habe ich es nicht hinbekommen. Da es ja eine Tabelle ist, gibt es da ja paar andere Verhaltensweisen.

Zitat:
Zitat von Paul Kleinhans
… wenn du dem td das border: solid 6px #5E5E5E; zuweist …
Jop, das hatte ich auch vor, jedoch hatte ich das glaube ich dem table zugewiesen und da war das Rahmengerüst bei den letzten Zellen nicht vollständig. Das war dann der falsche Ansatz, bei td geht es. Wurde korrigiert.

@threadi
Danke für den Link. Der QT ist natürlich schon ne Nummer größer, da brauche ich ein wenig länger um da durchzusteigen und verstehe auch bei weitem nicht alles, zumindest den CSS-QT. Aber ich versuche die Tabelle mal mittels float umzusetzen.

Da ich hier sehr oft lese, dass eine Tabellenkonstruktion schon fast verpönt ist, frage ich mich warum? Unbedingt mehr Zeilen habe ich gegenüber der float Lösung nicht, denn ich muss ja trotzdem die Boxen angeben, dann halt mit span.
Was hat also eine Tabellenkonstruktion für ein Nachteil, außer mancher Besonderheit bei bestimmten Regeln?

Edit meint:
Habe noch den Container <div id="tabelle"> rausgenommen. Der wurde in keinem Moment angesprochen, also meiner Meinung nach überflüssig.
__________________
Gruß Michael
SketchAtomTransmit

Geändert von emti (26.07.2008 um 16:44 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 26.07.2008, 17:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von emti Beitrag anzeigen
Was hat also eine Tabellenkonstruktion für ein Nachteil, außer mancher Besonderheit bei bestimmten Regeln?
Tabellen haben die Aufgabe, Daten auszuzeichnen, die in einem bestimmten Zusammenhang stehen. Dort sind sie richtig.
Tabellen zu verwenden, um ein Layout aufzubauen, ist Missbrauch.
Lesestoff:
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lsungen angeboten
Ein Herz für Tabellen

Ob bei deinem Beispiel eine Tabelle angebracht ist oder nicht, kann ich nicht beurteilen. Das ist vom Inhalt abhängig, und den kann ich nicht deuten bei dir. Wenn der Inhalt eine Auflistung von Farben sein soll, dann wäre eine angebrachte Auszeichnung vielleicht eine Liste.
Meistens gilt: Wenn es bei einer Tabelle keine "Kopfzellen" (th) gibt, dann ist sie nicht angebracht.

Was zu deinem Beispiel noch zu sagen ist: Deine vertikale Zentrierung mit abs. Pos. hat zur Folge, dass bei kleinem Viewport die Inhalte unerreichbar nach links und oben verschwinden. Für eine Alternative schau bitte in die FAQ des CSS-Bereiches.
Nimm die Hintergrundfarbe bei html weg. Wenn du bei kleinem Viewport die Scrollbalken benutzt, siehst du, warum.
Und noch ein Tipp: Schreib Selektoren, die durch Komma getrennt werden, immer untereinander. Das hilft, Fehler zu vermeiden.
Zitat:
Zitat von emti
Ich habe das Kapitel „CSS-Tabellen“ noch nicht durchgearbeitet
Unter "CSS-Tabellen" versteht man etwas anderes. Du hast eine HTML-Tabelle.
Mit "CSS-Tabellen" werden normalerweise Elemente bezeichnet, denen per CSS die Darstellungseigenschaften von Tabellen zugewiesen werden. Das wiederum hat mit dem o.a. Tabellenmissbrauch nichts zu tun.

Geändert von fricca (26.07.2008 um 17:22 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 26.07.2008, 18:01
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
[...] Mit "CSS-Tabellen" werden normalerweise Elemente bezeichnet, denen per CSS die Darstellungseigenschaften von Tabellen zugewiesen werden. [...]
Wieso sollte man einem Element die Eigenschaften einer Tabelle zuweisen? Über die Eigenschaft display könnte man ja eine ganze Tabelle "nachbauen", den Sinn dahinter verstehe ich aber bis heute nicht. Eventuell kannst du mich ja aufklären, wenn wir schon beim Thema "Tabellen" sind...
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese
Mit Zitat antworten
  #7 (permalink)  
Alt 26.07.2008, 18:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Pascolo Beitrag anzeigen
Wieso sollte man einem Element die Eigenschaften einer Tabelle zuweisen?
Um eine Darstellung zu erhalten, die typisch für Tabellenelemente ist, z.B. gleichhohe Spalten.
Zitat:
Über die Eigenschaft display könnte man ja eine ganze Tabelle "nachbauen",
Es geht nicht um Nachbau. Es geht um Darstellung. So wie man einem Link display:block gibt, um ihn "boxig" zu bekommen, kann man z.B. mehreren Listenelementen mit mehrzeiligem Textinhalt display:table-cell geben, um sie alle in einer Reihe mit gleicher Höhe anzeigen zu lassen.
Diese Darstellungseigenschaften werden nur deshalb (bisher) wenig genutzt, weil IE < 8 das nicht kann. Die Einsatzmöglichkeiten sind vielfältig. Vom vertikalen Zentrieren bis zum kompletten Layout.
Mit Zitat antworten
  #8 (permalink)  
Alt 26.07.2008, 18:31
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Vielen Dank erstmal für deine Antwort.

Das Beispiel klingt interessant. Aber macht es überhaupt Sinn, in einer Liste den einzelnen Listenelemente plötzlich Eigenschaften zu geben, welche denen einer Tabelle gleichen? Eine Liste mit Tabellen-Eigenschaften zu verwenden, ist mir bis jetzt nicht in den Sinn gekommen, macht aber anhand deines Beispiels durchaus irgendwie Sinn. Wieder etwas dazu gelernt.
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese

Geändert von Pascolo (26.07.2008 um 18:33 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 26.07.2008, 18:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Pascolo Beitrag anzeigen
Das Beispiel klingt interessant. Aber macht es überhaupt Sinn, in einer Liste den einzelnen Listenelemente plötzlich Eigenschaften zu geben, welche denen einer Tabelle gleichen?
Ja sicher. Wenn die gewünschte Darstellung dem entsprechen soll, was CSS mit Tabellendarstellung leisten kann.
Die Unabhängigkeit/Trennung der Darstellung (CSS) von der Auszeichnung (HTML) ist es doch gerade, was wir hier dauernd predigen.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.07.2008, 18:54
Benutzerbild von Pascolo
Stiller Leser
XHTMLforum-Mitglied
 
Registriert seit: 24.11.2007
Ort: Cham
Beiträge: 640
Pascolo sorgt für eine eindrucksvolle AtmosphärePascolo sorgt für eine eindrucksvolle Atmosphäre
Standard

Stimmt, daran hätte ich nicht gedacht. Allerdings erwarte ich in einer Liste auch Eigenschaften, die ihr entsprechen. Hier würde man ihr doch fremde CSS-Eigenschaften zuweisen, nämlich diejenigen einer Tabelle. Diese Tatsache ist mir irgendwie ein Dorn im Auge, aber wahrscheinlich sind meine Zweifel einfach unbegründet...

Vielen Dank für deine Erklärungen.
__________________
Mit freundlichen Grüssen "Pascolo"

Guter Webspace eSport Topliste Meine Lesezeichen Meine Spielwiese
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
Border 2px mit Zwei verschiedenen Farben? Desaster CSS 5 28.09.2010 18:01
css: current_page_item und hover in verschiedenen farben frank.drebin CSS 15 19.03.2009 12:12
IE6: Inhalte bei großer Tabelle verschwunden C-rank CSS 3 05.01.2008 14:23
Div Orientierung Leonidus CSS 22 30.05.2007 18:05
Links in verschiedenen Farben mika CSS 2 29.04.2004 14:02


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