nicht angemeldet
newsbeiträge mit teaser, table oder div?
0 0 
Gunnar Bittersmann
0 0 0 1 0 
Der Martin
0 0 
Auge
0 Gunnar Bittersmann
0 Einarbeitung Änderungen
newsbeiträge mit teaser, table oder div?
hallo leute!
ich stelle gerade alle meine seiten auf div-layouts um und verbanne alles was an tabellen verwendet wurde.
ich bin mir jedoch manchmal nicht so ganz sicher, ob ichs übertreibe.
deshalb hir meine frage:
würdet ihr newsbeiträge (links teaserbild, rechts überschrift, darunter ein paar zeiele ntext plus link) in tabellenform darstellen oder mit divs?
ich würde dafür tabellen verwenden, bin mir aber nicht sicher.
soll ich eine liste daraus machen?
bitte um eure meinung.
danke!!!!
eure theresa
-
Hi,
würdet ihr newsbeiträge (links teaserbild, rechts überschrift, darunter ein paar zeiele ntext plus link) in tabellenform darstellen oder mit divs?
nein. Sofern Du mit "darstellen" nicht "darstellen" meinst, sondern "strukturieren". Während man durchaus "in tabellenform darstellen" kann, natürlich auch ohne <table>-Elemente zu verwenden, macht "mit divs darstellen" keinen Sinn.
soll ich eine liste daraus machen?
Wieso "daraus machen"? Es _ist_ eine Liste von Nachrichten. Die innere Struktur scheint mir aus einem <img>, einem <hX> und einem <p> zu bestehen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hello out there!
Wieso "daraus machen"? Es _ist_ eine Liste von Nachrichten.
Wobei ich at zustimmend vorwegnehmen möchte, dass es _hier_ auch durchaus eine Definitionsliste sein könnte.
<hX>
wäre dann <dt>
und einem <p>
wäre dann <dd>, ggfs. mit <p>s als Kindelementen.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
Hallo Cheatah,
Wieso "daraus machen"? Es _ist_ eine Liste von Nachrichten. Die innere Struktur scheint mir aus einem <img>, einem <hX> und einem <p> zu bestehen.
hier hake ich mich mal ein. Ich stehe vor einer ähnlichen Frage und bin nicht sicher, ob folgende Auszeichnung zweckmäßig ist:
<!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"> <head> <title>Startseite von einer Testseite</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css">ul#news { list-style:none; width:35em; margin:auto; } ul#news p#newsdatum { text-align:right; font-size:0.7em; padding:0; margin:0; background:#eee; } ul#news img#newsimage { width:86px; height:65px; display:block; float:left; margin-right:1em; border:none; } ul#news h3#newsheader { margin:0; padding:0; } ul#news p#newstext { margin:0; padding:0; font-size:0.9em; } ul#news p#newslink { text-align:right; font-weight:bold; margin:0; padding:0; }</style> </head> <body> <ul id="news"> <li> <p id="newsdatum">Montag, 7. August 2006</p> <a href="#" ><img src="#" width="86" height="65" alt="Zum Beitrag" title="Zum Beitrag" id="newsimage" /></a> <h3 id="newsheader">Neueste Nachrichten</h3> <p id="newstext">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 ... </p> <p id="newslink"><a href="#" title="Zum Beitrag">zum Beitrag >></a></p> </li> </ul> </body> </html>Mich würde eure Meinung zur Realisation interessieren.
Mit freundlichen Grüßen,
André-
Hi,
hier hake ich mich mal ein. Ich stehe vor einer ähnlichen Frage und bin nicht sicher, ob folgende Auszeichnung zweckmäßig ist:
im großen und ganzen schon, wobei Du bitte Gunnars Einwand beachtest.
<ul id="news">
Jau.
<li>
Ebenfalls :-)
<p id="newsdatum">Montag, 7. August 2006</p>
Nö, das ist kein Absatz. Ich empfehle hier ein <span>. Darüber hinaus ist es schwerlich sinnvoll, in einem _List_item eine feste, allgemein gehaltene ID zu vergeben. Klassifizierungen geschehen über Klassen - dies gilt für alle Deine IDs, von "news" abgesehen.
<a href="#" ><img src="#" width="86" height="65" alt="Zum Beitrag" title="Zum Beitrag" id="newsimage" /></a>
Dies könntest Du ggf. noch in ein sinnvolles Element kleiden, muss aber nicht sein. Der ALTernativtext ist Unsinn. Überlege, ob es sich bei dem Bild um eine Verzierung handelt, die ergo per CSS vermittelt werden müsste.
<h3 id="newsheader">Neueste Nachrichten</h3>
Ggf. ist die bisherige Reihenfolge zu überdenken.
<p id="newstext">Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text [...]</p>
Japp.
<p id="newslink"><a href="#" title="Zum Beitrag">zum Beitrag >></a></p>
Wieder kein Absatz, sondern irgend etwas anderes. Die Struktur müsste mit der identisch sein, die Du oben beim Bild hast. Kodiere bitte die ">", sofern sie Content darstellen.
</li>
</ul>Keine Einwände ;-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah,
im großen und ganzen schon, wobei Du bitte Gunnars Einwand beachtest.
jepp.
<ul id="news">
Jau.
<li>
Ebenfalls :-)
<p id="newsdatum">Montag, 7. August 2006</p>
Nö, das ist kein Absatz. Ich empfehle hier ein <span>. Darüber hinaus ist es schwerlich sinnvoll, in einem _List_item eine feste, allgemein gehaltene ID zu vergeben. Klassifizierungen geschehen über Klassen - dies gilt für alle Deine IDs, von "news" abgesehen.
Stimmt. Da es sich ja durchaus um mehrer Einträge handeln wird.
<a href="#" ><img src="#" width="86" height="65" alt="Zum Beitrag" title="Zum Beitrag" id="newsimage" /></a>
Dies könntest Du ggf. noch in ein sinnvolles Element kleiden, muss aber nicht sein. Der ALTernativtext ist Unsinn. Überlege, ob es sich bei dem Bild um eine Verzierung handelt, die ergo per CSS vermittelt werden müsste.
Da komme ich grad nicht mit. Warum ist der ALTernativtext Unsinn? Was verstehst du unter "Verzierung, die ergo per CSS vermittelt werden müsste"? Ich gehe konform, wenn das Argument wäre, dass eh nur der Tooltip vom, hier vergessenen, "title-Attribut" angezeigt wird.
<a href="#" title="Zum Beitrag"><img src="#" width="86" height="65" alt="" title="Zum Beitrag" class="newsimage" /></a><h3 id="newsheader">Neueste Nachrichten</h3>
Ggf. ist die bisherige Reihenfolge zu überdenken.Nun ja, das Datum im <span> sollte m.E. schon an erster Stelle stehen. Und da die Überschrift per default 100% hat und ich keine Breitenbegrenzung geben möchte um das Bild daneben zu floaten, muss es wohl bei der Anordnung bleiben. Weitere Hinweise deinerseits sind jedoch willkommen.
<p id="newstext">Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text, Text [...]</p>
Japp.Auch hier sind Klassen sinnvoller. Die Formatierungen für den Text sollen ja gleich sein.
<p id="newslink"><a href="#" title="Zum Beitrag">zum Beitrag >></a></p>
Wieder kein Absatz, sondern irgend etwas anderes. Die Struktur müsste mit der identisch sein, die Du oben beim Bild hast.
Das klingt schwierig...
Kodiere bitte die ">", sofern sie Content darstellen.
Schreibfehler meinerseits.
</li>
</ul>Keine Einwände ;-)
Ein Anfang! ;-)
Mit freundlichen Grüßen,
André-
Hi,
<a href="#" ><img src="#" width="86" height="65" alt="Zum Beitrag" title="Zum Beitrag" id="newsimage" /></a>
Dies könntest Du ggf. noch in ein sinnvolles Element kleiden, muss aber nicht sein. Der ALTernativtext ist Unsinn. Überlege, ob es sich bei dem Bild um eine Verzierung handelt, die ergo per CSS vermittelt werden müsste.
Da komme ich grad nicht mit. Warum ist der ALTernativtext Unsinn?Ich behaupte, dass er nicht repräsentiert, was das Bild darstellt. Wenn doch, ist das Bild mit an Sicherheit grenzender Wahrscheinlichkeit Verzierung.
Was verstehst du unter "Verzierung, die ergo per CSS vermittelt werden müsste"?
Wenn Du <img> einsetzt, handelt es sich bei dem Bild um einen Inhalt, also z.B. um ein zum Thema gehörendes Foto. Ist es nur z.B. ein Pfeil, der ein "zum Beitrag" zum Ausdruck bringen soll, dann ist das kein Inhalt, sondern eine Verzierung. Verzierungen sind Darstellung, Darstellung ist CSS. In solchen Fällen steht im HTML-Code also _nichts_, was mit dem Bild zu tun hätte; das Bild wird statt dessen mit CSS eingebunden, welches den eigentlichen Inhalt - hier also "zum Beitrag" - ausblendet.
Ich gehe konform, wenn das Argument wäre, dass eh nur der Tooltip vom, hier vergessenen, "title-Attribut" angezeigt wird.
Das hast Du nicht vergessen ;-) Höchstens steht es im "falschen" Element, aber darüber mag ich nicht streiten.
<h3 id="newsheader">Neueste Nachrichten</h3>
Ggf. ist die bisherige Reihenfolge zu überdenken.
Nun ja, das Datum im <span> sollte m.E. schon an erster Stelle stehen.Sollte es an erster Stelle _stehen_, oder sollte es an erster Stelle _dargestellt werden_?
Und da die Überschrift per default 100% hat und ich keine Breitenbegrenzung geben möchte um das Bild daneben zu floaten, muss es wohl bei der Anordnung bleiben. Weitere Hinweise deinerseits sind jedoch willkommen.
Gerne: HTML-Code wird gewählt, ohne irgendwelche darstellerischen Eigenschaften zu beachten. Das Datum ist der Überschrift inhaltlich gesehen möglicherweise untergeordnet. Möglicherweise. Daher schrieb ich oben auch "ggf.".
Wieder kein Absatz, sondern irgend etwas anderes. Die Struktur müsste mit der identisch sein, die Du oben beim Bild hast.
Das klingt schwierig...Copy & Paste ist nicht sonderlich schwierig ;-)
Ernsthaft: Was unterscheidet diesen "zum Beitrag"-Link vom anderen "zum Beitrag"-Link? Was würde eine unterschiedliche Struktur rechtfertigen?
Keine Einwände ;-)
Ein Anfang! ;-)*g*
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hallo,
<a href="#" ><img src="#" width="86" height="65" alt="Zum Beitrag" title="Zum Beitrag" id="newsimage" /></a>
Der ALTernativtext ist Unsinn. Überlege, ob es sich bei dem Bild um eine Verzierung handelt, die ergo per CSS vermittelt werden müsste.
Da komme ich grad nicht mit. Warum ist der ALTernativtext Unsinn?weil er eigentlich nicht den Zweck des verlinkten Bildes beschreiben soll, sondern das, was auf dem Bild dargestellt wird, so dass jemand, der keine Bilder anzeigen kann/will, trotzdem eine Ahnung bekommt, was andere möglicherweise sehen.
Was verstehst du unter "Verzierung, die ergo per CSS vermittelt werden müsste"?
Naja, wenn das Bild z.B. nur ein stets gleiches Symbol wäre, das auf die Nachrichten hindeutet, dann wäre es eher Verzierung als Inhalt. In diesem Fall wäre es vernünftiger, dieses Bild nicht als img-Element zu vermitteln, sondern z.B. als Hintergrundbild eines passenden Elements.
Ich gehe konform, wenn das Argument wäre, dass eh nur der Tooltip vom, hier vergessenen, "title-Attribut" angezeigt wird.
Das habe ich jetzt wieder nicht verstanden. :-(
<h3 id="newsheader">Neueste Nachrichten</h3>
Ggf. ist die bisherige Reihenfolge zu überdenken.
Nun ja, das Datum im <span> sollte m.E. schon an erster Stelle stehen.Ja, ich habe auch überlegt, worauf Cheatah hier anspielt. Ich weiß es nicht. Stört er sich an <h3>, weil er vorher weder <h2> noch <h1> gesehen hat? Oder bringt er "neueste" Nachrichten mit einer Reihenfolge in Verbindung?
So long,
Martin--
"Drogen machen gleichgültig."
- "Na und? Mir doch egal."-
Hallo Martin,
Da komme ich grad nicht mit. Warum ist der ALTernativtext Unsinn?
weil er eigentlich nicht den Zweck des verlinkten Bildes beschreiben soll, sondern das, was auf dem Bild dargestellt wird, so dass jemand, der keine Bilder anzeigen kann/will, trotzdem eine Ahnung bekommt, was andere möglicherweise sehen.Ach so, okay. Das verstehe ich jetzt. Danke.
In diesem Fall wäre es vernünftiger, dieses Bild nicht als img-Element zu vermitteln, sondern z.B. als Hintergrundbild eines passenden Elements.
Okay, verstanden.
Ich gehe konform, wenn das Argument wäre, dass eh nur der Tooltip vom, hier vergessenen, "title-Attribut" angezeigt wird.
Das habe ich jetzt wieder nicht verstanden. :-(Was für ein Tooltip wird angezeigt, wenn ich folgende Konstellation habe:
<a href="#" title="Tooltip 1"><img src="#" width="86" height="65" alt="" title="Tooltip 2" class="newsimage" /></a>
M.E. doch der tool tip vom a-Elemenent?!
Danke.
Mit freundlichen Grüßen,
André-
Hallo
Ich gehe konform, wenn das Argument wäre, dass eh nur der Tooltip vom, hier vergessenen, "title-Attribut" angezeigt wird.
Das habe ich jetzt wieder nicht verstanden. :-(Was für ein Tooltip wird angezeigt, wenn ich folgende Konstellation habe:
<a href="#" title="Tooltip 1"><img src="#" width="86" height="65" alt="" title="Tooltip 2" class="newsimage" /></a>
M.E. doch der tool tip vom a-Elemenent?!
Warum sollte das Bild, welches zum Link gehört, auch ein anderen Titel haben, als der Link selbst? Dass das Bild einen Alternativtext _braucht_, sollte jedoch klar sein. Wer ohne Graphikunterstützung auf deine Seite kommt, sieht so, wie es dein Beispiel angibt, vom Link _überhauptnix_.
Wobei wir wieder bei der Frage wären, ob das Bild Inhalt oder Verzierung (des Links) ist.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1
-
-
-
Hello out there!
Kodiere bitte die ">", sofern sie Content darstellen.
Schreibfehler meinerseits.Nein, kein Fehler. Allenfalls schlechter Stil.
„Die schließende spitze Klammer (>) kann durch die Zeichenkette »>«(größer-als, greater-than) dargestellt werden.“ [XML §2.4]
KANN, nicht MUSS. Für SGML sollte dasselbe gelten.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo Gunnar,
Nein, kein Fehler. Allenfalls schlechter Stil.
Nee, wirklich Schreibfehler! Sollte nur eine spitze Klammer werden.
Mit freundlichen Grüßen,
André-
Hello out there!
Nee, wirklich Schreibfehler! Sollte nur eine spitze Klammer werden.
Ach so, eine spitze Klammer, kein Größer-als-Zeichen. ;-)
〉 U+232A right-pointing angle bracket
⟩ U+27E9 mathematical right angle bracket
〉 U+3009 right angle bracketSee ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo Gunnar,
Ach so, eine spitze Klammer, kein Größer-als-Zeichen. ;-)
〉 U+232A right-pointing angle bracket
⟩ U+27E9 mathematical right angle bracket
〉 U+3009 right angle bracketich bin verwirrt... ;-)
Mit freundlichen Grüßen,
André-
Hello out there!
ich bin verwirrt... ;-)
Ich auch, weil du eigentlich einen Pfeil meinst. ;-)
→ U+2192 rightwards arrow
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-
-
-
-
-
Hallo zusammen,
ich habe versucht die erhaltenen Informationen einmal umzusetzen. Sollte ich hierbei etwas übersehen haben, bitte ich um Nachsicht/Nachricht. ;-)
Und, als Hinweis, es geht in erster Linie um die Struktur. Beschwerden wegen kleiner Schrift, häßlichen Farben usw. lasse ich jetzt mal nicht gelten.
Danke.
<!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"> <head> <title>Startseite von einer Testseite</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> ul#news { list-style:none; width:35em; margin:auto; } ul#news span.newsdatum { display:block; text-align:right; font-size:0.7em; padding:0; margin:0; background:#eee; } ul#news a.newslink1 { width:86px; height:65px; display:block; float:left; margin:0em 1em 0em 0; border:1px solid #eee; } ul#news h2.newsheader { margin:0; padding:0; background:yellow; font-size:0.9em; } ul#news p.newstext { margin:0; padding:0; font-size:0.8em; background:green; } ul#news a.newslink2 { display:block; text-align:right; font-weight:bold; font-size:0.7em; font-family:sans-serif; margin:0; padding:0; background:#eee; } </style> </head> <body> <ul id="news"> <li> <span class="newsdatum">Montag, 7. August 2006</span> <a href="#" title="Zum Beitrag" class="newslink1" style="background:#fef url('/pixx/vorschau/thema1.jpg')"></a> <h2 class="newsheader">Neueste Nachrichten</h2> <p class="newstext">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 ...</p> <a href="#" title="Zum Beitrag" class="newslink2">Weiter zum Beitrag</a> </li> </ul> </body> </html>Mit freundlichen Grüßen,
André-
Hi,
ich habe versucht die erhaltenen Informationen einmal umzusetzen. Sollte ich hierbei etwas übersehen haben, bitte ich um Nachsicht/Nachricht. ;-)
Du hast übersehen, was in diesem Thread noch nicht gesagt wurde ;-) Mindestens zwei der Klassen kannst Du ersatzfrei streichen.
Und, als Hinweis, es geht in erster Linie um die Struktur.
Dann brauchen wir den CSS-Code nicht, oder?
<a href="#" title="Zum Beitrag" class="newslink1" style="background:#fef url('/pixx/vorschau/thema1.jpg')"></a>
Wo sein Inhalt? Link leer!
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah,
Du hast übersehen, was in diesem Thread noch nicht gesagt wurde ;-) Mindestens zwei der Klassen kannst Du ersatzfrei streichen.
jetzt wo du's sagst: Stimmt!
class="newsdatum" und class="newsheader", da sie die einzigen span- bzw. h2-Elemente innerhalb von ul#news sind. Und class="newstext", da einziges p-Element innerhalb ul#news. Danke.
<ul id="news">
<li><span>Montag, 7. August 2006</span>
<a href="#" title="Zum Beitrag" class="newslink1" style="background:#fef url('/pixx/vorschau/thema1.jpg')"></a>
<h2>Neueste Nachrichten</h2>
<p>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 ...</p><a href="#" title="Zum Beitrag" class="newslink2">Weiter zum Beitrag</a>
</li>
</ul>Und, als Hinweis, es geht in erster Linie um die Struktur.
Dann brauchen wir den CSS-Code nicht, oder?
Nun doch. Will ja schließlich auch sehen, wie Abstände und dergleichen angezeigt werden/wirken.
<a href="#" title="Zum Beitrag" class="newslink1" style="background:#fef url('/pixx/vorschau/thema1.jpg')"></a>
Wo sein Inhalt? Link leer!
Problem: Bild zum Thema, meinetwegen "Party", wird als Hintergrund eingebunden, da der Verweis mit dem title-Attribut "Zum Beitrag" ausgestattet ist. Ansonsten müsste ich theoretisch das Bild beschreiben (alt=Was sehe ich, wo ich gerade nichts sehe")
Vielen Dank.
Mit freundlichen Grüßen,
André
-
-
-
-
-