• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

A

aJunkie

Mitglied
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:
screeniiee.JPG

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: 
<a name="01id<?php echo $row['id']; ?>"></a>
<div class="artikel_text artikel_textbox">
<div style="height:100%; clear:both; border-bottom:2px solid #6DBFFB;">
  <div style="float:left; width:80px; height:auto; min-height:80px; margin-bottom:5px; margin-top:5px; background-color:#E4EFF4; border-right:1px solid #6DBFFB;">
          <?php if ($row['hide_headline'] == 0 || $static == 0): ?>
        <strong><?php echo $datum; ?></strong>
        <?php endif; ?>
        <?php if (!empty($catimg) && !empty($catname)): ?>
        <div class="artikel_catimg"> <?php echo $catimg; ?> </div>
        <?php endif; ?>
        </div>
        
      <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): ?>
        <br>
        <div class="footline_small">
          <?php if ($settings['comments'] == 1 && $settings['artikelcomments'] == 1 && $row['comments'] == 1): ?>
          <a href="<?php echo $system_link_row; ?>#01jumpcomments">Kommentare</a> (<?php echo $comments; ?>)
          <?php endif; ?>
          <?php if(!empty($catname)): ?>
          <div class="ten"><b>Mehr News zu:</b> <?PHP echo $catname; ?></div>
          <?php endif; ?>
        </div>
        </div>
</div></div>
 
ich würd sowas mit einer Tabelle machen. Alles andere wird nur gemurkse
 
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
 
aJunkie schrieb:
Tabelle ist auch Gemurkse. :-/ Vorallem sagen das die... ähm Richtlinien?
Vor allem Validatoren, etc.
Zum Vergrößern anklicken....
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
 
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: :-/
 
aJunkie schrieb:
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: :-/
Zum Vergrößern anklicken....
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.
 
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: <p>&nbsp;</p>
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.
 
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.
 
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.
 
Habe es auf eine Tabelle geschafft. :)

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.

struppi schrieb:
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: <p>&nbsp;</p>
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.
Zum Vergrößern anklicken....

Das eine Problem habe ich jetzt so gelöst:
<?php $artikeltext = str_replace("<p>&nbsp;</p>","<br>", $artikeltext); ?>

Die sinnlosen <p>&nbsp;</p> macht der Editor automatisch, wenn ich Absätze will. Logisch.
Aber jetzt werden diese durch <br> ersetzt.
Schon sinnvoller oder?
 
Zuletzt bearbeitet:
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 <br> das Problem, dass sie da nicht hingehören. Aber überhaupt, Abstände werden nicht mit leeren Absätzen oder <br> Elementen gemacht, sondern mit margin.
 
Ich soll also
<?php $artikeltext = str_replace('<p>&nbsp;</p>','<span style="margin-bottom:5px;"></span>', $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 <br> ein.
 
Warum gibst du nicht dem Absatz davor diesen Abstand? Und versuchst die leeren Absätze gar nicht erst rein zu machen.
 
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.
 
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 <br> erreiche.

da das aber immer wieder aufkommt, stelle ich mir die frage, ob es irgendeinen greifbaren nachteil gibt, wenn man <br> für eine leerzeile nutzt?
 
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.
 
Zudem was ist, wenn der Abstand zwischen zwei Absätzen nicht mehr 1em (also ein <br>) 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.
 
Ich verstehe immer noch nicht, warum ich zum Beispiel:
<div class="margin10px"></div> nehmen soll, statt <br>.
<br> ist kürzer und meiner Ansicht nach der Semantik eher entspricht.

<!-- Absatz -->
Test

*in den Quelltext hier schau*
Edit: haha, auch <br> :P
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben