bilder einfügen anhand von tabellenhöhe??

[FinnDorian]

bei der erstellung einer seite für unsereren fairtrade-laden hab ich folgendes problem:
Artesanias | FairTradeSchildköte
wenn man ganz nach unten scrollt sieht man, dass das bild abgeschnitten wird....
Weiß jemand eine lösung, um das zu verhindern? Im moment hab ich es als tabellenhintergrund, damit sich die tabelle immer auf die höhe des contents anpasst....
kann man vielleicht eine abfrage per javascript programmieren, die je nach tabellenhöhe bilder einfügt??
also so im sinne von if table height>800 insert bild1,bild2,bild3
if table height von 400 bis 800 insert bild1, bild2
if table height<400 nur bild1...
naja fällt jemandem ne bessere lösung ein oder hat dementsprechend javascript kenntnisse um meinen vorschlag umzusetzen?
Ich wäre Euch sehr verbunden ;)

 

[bronko]

Weiß jemand eine lösung, um das zu verhindern?

keine tabellen zum layouten benutzen...

 

[FinnDorian]

wie dann? div-tags?

wie würde das denn so gehen? soll ich raten? :|

Wie könnte ich zum Beispiel diesen Code als div-tag darstellen?:
(das ist die obere tabelle mit der linken und rechten ecke, das mittlere bild bleibt bei jeder browserfenstergröße in der mitte)

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="226" height="222" align="left" valign="top"><img src="<?php echo $mosConfig_live_site;?>/templates/artesanias_fairtrade/images/logo_eckelinks.jpg" alt="" width="226" height="222" border="0" usemap="#Map" /></td>
    <td height="222" align="right" valign="bottom">&nbsp;</td>
    <td width="400" height="222" align="center"><?php // mosLoadModules ( 'topimage' ); ?>
      <img src="<?php echo $mosConfig_live_site;?>/templates/artesanias_fairtrade/images/header_schildi1.jpg" alt="" width="400" height="222" /></td>
    <td height="222" align="left" valign="bottom">&nbsp;</td>
    <td width="223" height="222" align="right" valign="top"><img src="<?php echo $mosConfig_live_site;?>/templates/artesanias_fairtrade/images/logo_eckerechts.jpg" alt="" width="223" height="222" border="0" usemap="#Map2" /></td>
  </tr>
</table>

 

[Efchen]

Was ist denn eigentlich eine FairTradeSchildköte? :-)

wie dann? div-tags?

*kopfschüttel*
Das ist leider völlig zusammenhanglos. Aber viele glauben das, dass man Tabelloen durch div-Tags ersetzt. Da das Gerücht kursiert, kann ich Dir das nicht übel nehmen, aber es ist völliger Humbug!

HTML ist eine Strukturbeschreibungssprache. Der Inhalt wird mit Tags gekennzeichnet und bekommt so eine Bedeutung. Wenn Du Deinen Inhalt als Tabelle auszeichnest, sagst Du damit "Jetzt kommen tabellarische Daten". Tatsächlich kommen die aber nicht, denn Du missbrauchst das Tag zu Layoutzwecken. Mit HTML wird aber gar kein Layout gemacht.

Bei HTML geht es um die Semantik. Eine Überschrift zeichnest Du als Überschrift aus (mit den Tags <h1> bis <h6>), einen Textabsatz mit <p>, eine Adresse mit <address> usw. Mit HTML wird weder Layout noch Design gemacht, nur dem Inhalt eine Bedeutung gegeben. Das heißt Du nimmst Deinen Inhalt, zeichnest ihn logisch strukturiert aus und erst dann kommt das Layout, das übrigens dann vollständig mit CSS gemacht wird.

Tabellen sind weiterhin ein wichtiger Bestandteil von HTML, das einzige Mittel, um tabellarische Daten auszuzeichnen, z.B. eine Übersicht über die Spiele der EM 2008. Das <div> ist ein allgemeines Block-Element und wird dazu verwendet, um mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren. Layout macht man nicht mit <div>, denn wie shcon gesamt, Layout macht man nicht mit HTML, sondern CSS, und <div> ist HTML. So einfach ist das eigentlich.

Dazu noch ein passender Link, der berühmte Seybold-Vortrag:
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Noch Fragen?

Grüße,
-Efchen

 

[FinnDorian]

hey danke erstmal...
Ich hab diesen Text den du mir geschickt hast gestern schon gelesen ;)
Ich weiß jetzt auf jedenfall, warum layouten ohne tabellen besser ist, aber das hab ich vorher schon vermutet... was wirklich sinnvoll wäre, wäre ein eine seite, wo jemand als beispiel ein bestehendes tabellendesign umwandelt in css...
das würde mir sehr weiterhelfen, weil ich immernoch nicht weiß, wie man so etwas macht.

 

[Efchen]

was wirklich sinnvoll wäre, wäre ein eine seite, wo jemand als beispiel ein bestehendes tabellendesign umwandelt in css.

Sowas geht nicht. Sowas kann man nicht einfach umwandeln. Du willst etwas, das sinnlos und fehlerbehaftet ist, in etwas anständiges umwandeln, das geht nicht automatisch.
Außerdem haben Tabellenlayouts es so an sich, dass sie nichts von dem haben, was HTML erreichen will. HTML will dem Inhalt eine Bedeutung geben. Dadurch, dass Tabellen verwendet werden, wird eine völlig falsche Bedeutung verwendet. Wie will man das in irgendwas umwandeln, wo man doch gar nicht weiß, was es bedeuten soll?

das würde mir sehr weiterhelfen, weil ich immernoch nicht weiß, wie man so etwas macht.

Nun, das habe ich aber auch beschrieben, wie man eine anständige Website schreibt: Semantik, Bedeutung des Inhalts!

Schmeiß Deine Tabelleninfizierte Seite weg.
Schreib alles neu.
Du fängst an mit dem Inhalt der Seite.
Dann zeichnest Du den Inhalt logisch aus. Das Aussehen ist zu diesem Zeitpunkt noch völlig uninteressant.
Wenn der Inhalt logisch ausgezeichnet und valide ist, machst Du das Layout - mit CSS! Wenn Du richtig gut bist, bräuchtest Du an der Stelle nicht mehr in den HTML-Code reinlangen.

Das ist alles. Das Problem für Umsteiger von Tabellenmissbrauch auf richtiges HTML ist, dass die meisten gar kein HTML können. Wenn sie dann anfangen, langsam zu verstehen, was es mit "Semantik" auf sich hat, kommen immer die Fragen "aber der macht da Punkte vor die Liste, die ich nicht haben will" oder "der Browser macht da aber einen Abstand" und sowas. Völlig irrelevant zu diesem Zeitpunkt. Das hat mit HTML nichts zu tun.

Noch Fragen?
-Efchen

 

[FinnDorian]

ich meine natürlich nicht automatisch umwandeln....
also beispiel:
ich habe einen echt simplen seitenaufbau auf
Gebrauch | FairTradeSchildkröte
ist mit joomla gemacht, den content also reinen text-inhalt lass ich einfach immer mit das mitlere teil laden, oben das menü hab ich bereits mit css umgesetzt, allerdings sitzt es zusätzlich in einer tabelle, weil ich sonst nicht weiß, wie ich es genau an diese stelle bekomme...

was ich damit sagen will... inhalt, menü, etc wird bereits einfach per kleinem php aufruf geladen und ist somit interaktiv, ich muss also theoretisch nicht die ganze seite mit inhalt neu machen (dem joomla editor habe ich nämlich css styles übermittelt, sodass für den text nur einmal eine class="text_artesanias" geladen werden muss, genauso für die überschrift)

es ist alles soweit fertig, nur der rahmen des inhalts, des interaktiven teils, ist noch schlecht mit tabellen programmiert...
ich würde einfach den rahmen genauso mit css umsetzen können und suche dafür nur ein beispiel, ein tutorial, wo jemand vielleicht ein solches design erstellt...

Verstehst du was ich meine? Ich will es nicht umwandeln... ich will wissen, wie ich so ein design in css umsetzen kann... am besten, dass es genauso aussieht, wie es jetzt aussieht, nur halt schöner programmiert ist.

 

[bronko]

im prinzip geht die "umwandlung relativ einfach":

du brauchst nur ein paar html elemente:

eine liste für dein menü

deinen text kannst du in <div>s oder <p>s setzen und dann noch deine bilder.
das versiehst du jeweils mit ids und kannst dann z.b. die position per css bestimmen.

 

[Efchen]

im prinzip geht die "umwandlung relativ einfach":,

Vom Prinzip her ja. Aber die meisten Umsteiger haben sich so in Frames und Tabellen reingedacht, dass sie nicht mehr "normal" denken können :-)

du brauchst nur ein paar html elemente:

Mir schwant Übles bei dieser Aussage!

eine liste für dein menü

Gute Idee!

deinen text kannst du in <div>s oder <p>s setzen und dann noch deine bilder.
das versiehst du jeweils mit ids und kannst dann z.b. die position per css bestimmen.

Aua. Durchgefallen.

Text, im Sinne von Fließtext, packt man in einen Absatz (<p>), nicht in <div>. <div> ist dazu da, mehrere Elemente zwecks gemeinsamer Formatierung mit CSS zu gruppieren, zu sonst nichts. Überschriften zeichnet man als solche aus (<h1> bis <h6>), Zitate, Adressen, Listen, tabellarische Daten, für all das gibt es ein bestimmtes Tag, mit dem man den Inhalt auszeichnet.

Wer alles nur in <div>s packt, macht genau den selben Mist wie Layout mit Tabellen. Es ist beides gleich sinnlos.

ich habe einen echt simplen seitenaufbau mit joomla gemacht

Kenne ich nur vom Namen her.

es ist alles soweit fertig, nur der rahmen des inhalts, des interaktiven teils, ist noch schlecht mit tabellen programmiert.

Eine Programmiersprache ist um einiges umfangreicher und komplexer als die Strukturbeschreibungssprache HTML.

ich würde einfach den rahmen genauso mit css umsetzen können und suche dafür nur ein beispiel, ein tutorial, wo jemand vielleicht ein solches design erstellt...

Rahmen mit CSS und Bildern, die von der Größe auch noch variabel sind, sind etwas aufwändiger, findet man aber eigentlich überall im Netz, wie das geht.

Verstehst du was ich meine? Ich will es nicht umwandeln... ich will wissen, wie ich so ein design in css umsetzen kann.

Wie ich schon bronko geantwortet habe, zuerstmal brauchst Du eine gute Basis in HTML. Mit Struktur. Mit Bedeutung. Mit Semantik. Dazu brauchst Du zuerst den Inhalt. Zeichnest ihn dann aus. Und erst dann kommen Layout und Design. Normalerweise positionieren sich die Elemente alle selbst, man sollte wissen, was ein Block-Element ist und was ein Inline-Element. Dass man Block-Elemente am besten mit float nebeneinander bekommt und dass wer floatet, auch clearen muss.

Das war eigentlich schon alles :-)

Das Ergebnis funktioniert dann in 100% aller Browser, sieht mit dem richtigen Doctype in den modernen Browsern im Allgemeinen gleich aus und ist Barrierefrei.

Gruß,
-Efchen