Von table zu div (css) - fast fertig, aber ...

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe auf meiner Startseite ein Artikelsystem. Siehe bitte Link in meiner Signatur.
Genau so soll es aussehen. Es ist derzeit ein Table-Design.
Bei mir im localhost sieht es aber so aus:
[ATTACH]1473.vB[/ATTACH]

Da sieht man nun den Unterschied.
Im Tabledesign sind die zwei Abschnitte in zwei td’s eingeteilt, die beide eine Klasse haben.
Unterschiedliche Hintergrundfarben, etc.

Auf der Seite sieht man, dass obwohl unter dem Kategoriebild kein Inhalt mehr ist, trotzdem die Hintergrundfarbe ausgefüllt wird.
Im CSS Design aber nicht. Und das border-right hört auch da auf, wo der Inhalt aufhört.

Ich habe keine Ahnung, wie ich nun weitermachen soll.
Ist auch ein wenig Suppe geworden.

Siehe hier:
[HTML]

<?php if ($row['hide_headline'] == 0 || $static == 0): ?> <?php echo $datum; ?> <?php endif; ?> <?php if (!empty($catimg) && !empty($catname)): ?>
<?php echo $catimg; ?>
<?php endif; ?> 
  <div style="float:right; height:auto; width:635px; margin-bottom:5px; margin-top:5px;" class="<?php echo $bgclass; ?>">
     <?php echo str_replace(" />",">",$artikeltext); ?>
    <?php if(!empty($irgendwas)): ?>

//HTML Code
<?php endif; ?>
<?php echo $signatur; ?>
<?php if ($more == 1): ?>



<?php if ($settings['comments'] == 1 && $settings['artikelcomments'] == 1 && $row['comments'] == 1): ?>
Kommentare (<?php echo $comments; ?>)
<?php endif; ?>
<?php if(!empty($catname)): ?>
Mehr News zu: <?PHP echo $catname; ?>

<?php endif; ?>

[/HTML]
2

ich würd sowas mit einer Tabelle machen. Alles andere wird nur gemurkse

3

Tabelle ist auch Gemurkse. :-/ Vorallem sagen das die… ähm Richtlinien?
Vor allem Validatoren, etc.

4

Hallo.

Einem Validator ist es eigentlich egal ob du eine Tabelle oder ein div benutzt, der Validator kann nicht die Semantik deiner Seite überprüfen.
Wenn der Validator gemeckert hat dann waren das andere Fehler auf deiner Seite die er beanstanded hat.

Um auf die Semantik zurück zu kommen, das was ich da bei deinem Screenshot sehe ist eine Tabelle und sollte auch als solche ausgezeichnet werden.

Gruss
Elroy

5

Quatsch. Kein validator sagt dir welches Element du zu benutzen hast, auch gibt es keine Richtlinie die dir verbietet ein gültiges Element zu benutzen.

Man kann sich darüber streiten, ob das wirklich eine Tabelle ist. Da es aber zumindest Merkmale einer Tabelle hat (Spalten, Reihen) halte ich eine Umsetzung mit DIV, denen man dan Tabelleneigenschaften geben muss, damit es aussieht wie eine Tabelle, für gemurkse. Zumal du dann massive Browserprobleme bekommst oder -eben so wie hier bei html.de - eine Fehlerkonsole voller Warnungen

6

Ja.
Man siehe in den Quelltext von der Homepage. Da ist es nicht nur eine Tabelle, sondern 10.
10 Tabellen in Seitenbewertungen → 0%
Ich denke, Suchmaschinen werden es ähnlich sehen?

Da wäre DIV meiner Meinung nach besser.
10 Tabellen sind irgendwie zu viele auf einer Seite: :-/

7

Von welcher Homepage redest du? Und von wlecher Seitenbewertung?
Keine Suchmaschine der Welt stört sich an Tabellen, egal ob eine oder 10

Und es ging uns bisher um DEINE Frage - wie gesagt, das was du da hast ist im Prinzip eine Tabelle, keiner hat gesagt du sollst 10 Tabellen verwenden.
Wenn du aber gerne meinst, daß das was du da hast nichts ist (ein DIV ist ein Element das semantisch nichts bedeutet), dann verwende halt eine DIV Suppe - ich halte das für einen Fehler.

8

Ich hab mir mal gerade deine Seite angeschaut.

Ein viel größeres Problem was du hast, bezüglich SEO, ist dein Verhältnis Text : HTML. Dein HTML Code ist vollgestopft mit unnötigen HTML z.b. so was:

 


Auch ist dein Ansatz, jeden Eintrag in eine Tabelle zu machen, natürlich Quatsch (jetzt weiß ich auch was du mit den 10 Tabellen meinst) - das ist EINE Tabelle, damit würdest du auch eine Menge HTML Code sparen.

Dein erstes Ziel sollte sein, weniger HTML zu produzieren.

9

Darum schreibt man erst den Content nieder und wenn man damit fertig ist, macht man das Html und andere Gedönse.
Bei der Gelegenheit entscheidet sich auch, ob es nun eine Tabelle oder was anderes ist.

10

Deswegen will ich es ja in DIV’s, weil ich es nicht auf eine Tabelle bekomme.
Das Design gerät komplett durcheinander.

Ich probier’s wieder in Tabelle, aber nur eine.

11

Habe es auf eine Tabelle geschafft. :slight_smile:

Aber wäre wirklich nett, wenn jemand in den Quelltext schauen würde.

Habe kein so gutes Gefühl, ob da unsinnige Dinge drin sind.

Link in der Signatur.

Das eine Problem habe ich jetzt so gelöst:

<?php $artikeltext = str_replace("

 

","
", $artikeltext); ?>

Die sinnlosen

 

macht der Editor automatisch, wenn ich Absätze will. Logisch.
Aber jetzt werden diese durch
ersetzt.
Schon sinnvoller oder?

12

Die Tabelle ist halbwegs i.O. wobei ich die Linien nicht mit einer Leerzeile und einem HR machen würde, dafür gibt es CSS. Auch die vielen, vielen Attribute im HTML Code sind zum größten Teil überflüssig und könnten mit CSS ersetzt werden.

Auf die meisten Klassen kannst du mit sicherheit verzichten

Jetzt mit hast du mit den
das Problem, dass sie da nicht hingehören. Aber überhaupt, Abstände werden nicht mit leeren Absätzen oder
Elementen gemacht, sondern mit margin.

13

Ich soll also

<?php $artikeltext = str_replace('

 

','', $artikeltext); ?>

machen?

Das ist auch keine perfekte Lösung, wenn ich einfach nur einen Zeilenumbruch haben möchte.
Mir fällt keine bessere Lösung als
ein.

14

Warum gibst du nicht dem Absatz davor diesen Abstand? Und versuchst die leeren Absätze gar nicht erst rein zu machen.

15

Weil es im Editor ziemlich einfach ist, die Return Taste zu tippen und es einen Abstand macht.

Sonst würde ich mehr im HTML Editor rumfuchteln, als den Artikel selbst zu schreiben.

16

ich muss an der stelle auch mal einhaken.
ich mach das nämlich immer noch genauso wi aJunkie.
aus dem selben grund, weil ich innerhalb eines zusammengehörigen textes nicht stendig p-classes vergeben will, wenn ich den selben efekt mit einem simplen
erreiche.

da das aber immer wieder aufkommt, stelle ich mir die frage, ob es irgendeinen greifbaren nachteil gibt, wenn man
für eine leerzeile nutzt?

17

Du nimmst dir hauptsächlich die Chance, Absätze speziell zu formatieren (etwa Einzug auf der ersten Zeile, angepasster Abstand nach unten, …). Zudem könnte ich mir vorstellen, dass sich echte Absätze beim Drucken sauberer verhalten bzw. geschickter zu stylen sind. Auch für die automatisierte Verarbeitung ist es natürlich vorteilhafter, Absätze klar zu definieren.

Ich gebe zu, dass mag alles häufig keine große Rolle spielen. Aber es gilt eben grundsätzlich bei allen Semantikthemen: Je genauer/korrekter die Auszeichnung, desto mehr können Clients (jetzt und zukünftig) aus den Daten rausholen.

18

Zudem was ist, wenn der Abstand zwischen zwei Absätzen nicht mehr 1em (also ein
) sondern 1.5em betragen soll? Und wieso solltest du den Absätzen Klassen vergeben? Das musst du nur, wenn der Absatz anders sein soll, als die anderen.

Ein Absatz gehört in ein p-Tag und Abstände werden mit CSS gestaltet, alles andere ist rumgewurschtel.

Jeder vernünftige Editor weiß, dass nach einem [Enter] ein neuer Absatz kommt, wenn nicht, dann taugt er nichts.

19

und wenn ich nicht nach allen absätzen leerzeilen haben möchte?

20

Ich verstehe immer noch nicht, warum ich zum Beispiel:

nehmen soll, statt
.
ist kürzer und meiner Ansicht nach der Semantik eher entspricht.

Test

in den Quelltext hier schau
Edit: haha, auch
:stuck_out_tongue: