zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Steckbrief - schaffe es nicht übersichtlich ohne Tabelle.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.07.2006, 16:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2006
Beiträge: 11
stefanjann befindet sich auf einem aufstrebenden Ast
Unglücklich [gelöst] Steckbrief - schaffe es nicht übersichtlich ohne Tabelle.

Hallo,

ich habe eine Benutzerverwaltung. In dieser Verwaltung kann der Admin für alle Benutzerkonten einen Steckbrief ansehen.

z.B.
Code:
Vorname: Josef
Nachname: Huber
Benutzername: josef4711
Registriert am: 17. Januar 1999
...etc
Bis jetzt habe ich eine Tabelle gamcht, die 2 Spalten hat und ich die erste Spalte per <th> als "Eigenschaft" und die zweite Spalte als "Inhalt" definiert habe.

Da ich aber z.B. auf meinem Handy schon Probleme mit der Darstellung habe und Tabellen ja für (fast-)Blinde kein Spaß ist, würde ich gerne eine CSS-Lösung erarbeiten.

Mein erster Ansatz war, das ganze als Formular zu definieren mit "readonly"-Feldern. Dann könnte ich per <layer> auch die zugehörigen Titel zuweisen.
Allerdings ist das in meinen Augen eine grobe "Sinnverletzung" von Formularen und nicht im Sinne des Erfinders.

Mein zweiter Ansatz war dann, das ganze in einen <p>-Tag zu packen ähnlich folgt:
Code:
<p><span class="beschreibung">Name:</span> <span class="inhalt">Josef</span></p>
Nur leider schaffe ich es nicht, dass class="beschreibung" links steht und in der gleichen Zeille class="inhalt" rechts ausgerichtet ist. Ich habe in IE, Opera und Mozilla getestet. Ich habs versucht mit float und align, aber egal wie ich die Eigenschaften setze, entweder baut sich alles links, rechts oder inneinander auf.

Bitte um Hilfe.

Da in den Regeln steh, man soll eine klare und deutliche Frage stellen, hier meine Frage:
Wie baue ich eine überischtliche 2spaltige Tabelle ohne auch nur ein <table>-Tag zu verwenden, weil eine Tablelle vom Sinn her nicht nötig ist und das Design ja CSS-Sache ist?

Danke,
Stefan

Geändert von stefanjann (13.07.2006 um 09:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.07.2006, 17:36
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.325
E|H befindet sich auf einem aufstrebenden Ast
Standard

Man könnte die <p>s floaten lassen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.07.2006, 17:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2006
Beiträge: 11
stefanjann befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke, ich hab schon versucht mit dem float zu arbeiten. Allerdings haben verschiedene Browser auch verschiedene Darstellungen gebracht.

Ich habe den <p> als linksbündig versucht und den class="inhalt" einen float: right; gegeben. Hat leider keine Auswirkungen im IE und Opera.

Ich bin noch nicht solange im CSS tätig, also gerne mit mir sprechen, wie mit einem Idioten (Sinnbildlich gemeint).

Danke,
Stefan
Mit Zitat antworten
  #4 (permalink)  
Alt 12.07.2006, 17:49
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.11.2005
Beiträge: 139
schubidu befindet sich auf einem aufstrebenden Ast
Standard

Hallo stefanjann,

vielleicht geht das hier:
Code:
p {
   clear: both;
}

p span {
   float: left;
   width: 20em;
}

p span.inhalt {
   float: right;
}
Gruß Schubidu
__________________
Puls hoch. Preis runter. Auktionen bei TeleBid. Anmelden lohnt sich und kostet nichts.
Hol\' Dir unbedingt noch den 25 Euro Gutschein auf www.telebid.de!
Jetzt anmelden und im Feld Gutscheincode eingeben: Schubidu
Mit Zitat antworten
  #5 (permalink)  
Alt 12.07.2006, 17:52
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Das ist doch ein typischer Fall für eine Datentabelle - allerdings mit 4 Spalten!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #6 (permalink)  
Alt 12.07.2006, 18:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2006
Beiträge: 11
stefanjann befindet sich auf einem aufstrebenden Ast
Standard

@schubidu:
Danke, so geht das. Den Rest schff ich alleine. Ist ja nur noch eine Sache von Farbe und Abstand.

@Dieter Krautkraemer:
Ich verstehe nicht, wie man hier eine Tabelle mit 4 Spalten brauchen könnte. Ich habe nur 2 Inhalte, also was sollte in den anderen 2 Spalten stehen? Abstände? Sicherlich nicht, das wäre ja ein optischer Missbrauch von Tabellen. Könntest du mir das bitte erklären? Danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 12.07.2006, 18:53
_42 _42 ist offline
Minimalist
XHTMLforum-Mitglied
 
Registriert seit: 04.11.2005
Beiträge: 257
_42 befindet sich auf einem aufstrebenden Ast
Standard

Das schreit nach einer Definitionsliste...
Mit Zitat antworten
  #8 (permalink)  
Alt 12.07.2006, 21:01
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.635
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
ich habe eine Benutzerverwaltung. In dieser Verwaltung kann der Admin für alle Benutzerkonten einen Steckbrief ansehen.
Zitat:
...und Tabellen ja für (fast-)Blinde kein Spaß ist,...
Ein Admin ist in den seltensten Fällen (fast)blind, oder? Ausserdem kann man Tabellen für Vorleseprogramme aufbereiten.

Die 4 Tabellenspalten hatte ich vorgesehen für:
- Vorname,
- Nachname,
- Benutzername,
- registriert seit.... .

Was ist daran unklar?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #9 (permalink)  
Alt 13.07.2006, 09:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2006
Beiträge: 11
stefanjann befindet sich auf einem aufstrebenden Ast
Standard

@Dieter Krautkraemer:

Hallo,
ja, der Admin ist blind, aber mir ging es eher um das Prinzip. Ich habe auch Einstellungsmöglichkeiten in den Benutzerkonten. Und da sich jeder im Web ein solches holen kann, könnte dort auch ein Blinder seine Einstellungen und Übersichtsseiten ansehen. Z.B. wenn er von einem anderen Benutzer eine PM bekommt, dann kann man sich den Steckbrief des Absenders (nur bestimmte Felder) ansehen.

Der Admin sieht alle Infos im Benutzerkonto. Dort stehen derzeit 82 Felder. Teilweise werden die vom System gepflegt, wie z.B. letzte aktivität, letze Anmeldung, etc. In den Übersichtsseiten aller Konten beue ich schon eine Tabelle, da dort der Sinn einer Tabelle genau getroffen ist. Allerdings nur mit 5 Feldern (Name, Username, Anrede, Registriert seit, Letzte Anmeldung).

Meine Frage bezog sich auf die Detailansicht eines Kontos, wenn ich sage, vom Benutzer XY alle Daten anzeigen. Dann brauche ich eine Auflistung aller 82 Felder. Und das sollte man dann schon ohne Tabelle lösen, denn 82 Felder nebeneinander sind wohl eher unpraktisch. Daher eine einfache Auflistung mit <p>-Tags.

Ich habs jetzt folgt gelöst: (die Variablen werden von PHP ausgefüllt)

Code:
<p style="clear: Both; background: $bgcolor;"><span style="float: left; width: 20em;">$eigenschaft</span><span style="float: right;">$inhalt</span></p>
In $bgcolor stehen immer abwechselnd 2 Farben, damit es einen Tabellenähnlichen charakter hat. In $eigenschaft stehen die Feldtypen (z.B. Name, Anrede, Benutzername, E-Mail, etc). Und in $inhalt steht dann der passende Inhalt (z.B. Hans, Herr, hansi4711, eine@beispiel.de, etc).

Da klappt bestens.

Danke für euere Hilfe,
Stefan
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.07.2006, 10:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2006
Beiträge: 11
stefanjann befindet sich auf einem aufstrebenden Ast
Standard PS

Da ich gerade versucht habe die ganze Sache noch Farblich zu überarbeiten, habe ich wieder kleiner Probleme gefunden. Meine Lösung sieht jetzt etwas anders aus:

Code:
<div style="clear: Both; text-align: right; margin-bottom: 2px;" class="$bgclass"><span style="float: left;">$eigenschaft:</span> $inhalt</div>

Beispiel:
<div style="clear: Both; text-align: right; margin-bottom: 2px;" class="bgcolor1"><span style="float: left;">Vorname:</span> Hans</div>
<div style="clear: Both; text-align: right; margin-bottom: 2px;" class="bgcolor2"><span style="float: left;">Nachname:</span> Huber</div>
in $bgclass sind nur background: #FARBE; definiert. Duiese stehen deswegen in einer class, weil die CSS-Datei von PHP erstellt wird und je nach Template andere Farbwerte eingesetzt werden.
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
Aktuelle Größe von Tabelle bekommen (dynamische Erzeugung der Tabelle) internet (X)HTML 17 03.12.2014 10:05
Tabelle wie Paragraf? .rhavin CSS 5 14.01.2013 01:51
IE6: Inhalte bei großer Tabelle verschwunden C-rank CSS 3 05.01.2008 14:23
Tabelle height 100% im IE paule CSS 0 09.05.2007 13:27
FF: Tabelle in Tabelle centern wuschba CSS 2 20.07.2006 11:00


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:42 Uhr.