ganze Tabelle untenbündig am Dokument ausrichten

[0per8or]

Hi,

ich möchte eine Tabelle untenbündig an einer HTML-Datei ausrichten. Wie mache ich das?

Hier der Code:

<center><table border="0" width="800">
<img name="slice_bottom" src="images/slice_bottom.gif" width="800" height="28" border="0" alt="">
</table></center>

mfg
0per8or

[WauWau]

Hallo du 0per8or,

ich möchte eine Tabelle untenbündig an einer HTML-Datei ausrichten. Wie mache ich das?

wie meinst du das? Also untenbündig an der seite bekommst du  z.B. ohne probleme mit position:absolute;bottom:0;left:0; oder vergleichbarem hin.

<center><table border="0" width="800">
<img name="slice_bottom" src="images/slice_bottom.gif" width="800" height="28" border="0" alt="">
</table></center>

Auuuua! Das tud weh! Also:

1. <center> ist als "deprecated" eingestuft, d.h. es soll aus dem
     Standart entfallen. Alternative: <div style="text-align:center;">
  2. <table border="0" width="800"> Attribute als "deprecated" einge-
     stuft. Bitte CSS "border:none" und "width: 800px;" benutzen!
  3. <table><img></table> -> aua!
     Eine Tabelle muss __mindestens__ so augebaut sein:
     <table>
       <tr>
         <td><img></td>
       </tr>
     </table>
     Du darfst das bild nicht einfach so in ein <table> schreiben...
     Was soll die tabelle dir eigentlich bringen?
  4. <img name="" width="" height="" border="">
      - name soll künftig entfallen nur durch id ersetzt werden
      - widht, height und border bitte mit CSS formatieren

WauWau

[Jeena Paradies]

Hallo,

4. <img name="" width="" height="" border="">
      - widht, height und border bitte mit CSS formatieren

Da bin ich mir immer ziemlich unsicher wie ich das machen soll. Warum empfielst du da CSS für die Höhe und die Breite?

Grüße
Jeena Paradies

[WauWau]

Hallo Jeena,

4. <img name="" width="" height="" border="">
      - widht, height und border bitte mit CSS formatieren
Da bin ich mir immer ziemlich unsicher wie ich das machen soll. Warum empfielst du da CSS für die Höhe und die Breite?

Ich empfehle CSS für die Hohe und Breite, weil es dann 1. valider Code ist 2. imho besser ist. Außerdem wüsste ich nicht, wieso man unsicher sein sollte. Wenn also ein Bild, welches 215px breit und 125px hoch sein soll, bitte ohne Rahmen, haben will, dann könnte man also z.B.

<img style="width: 215px; height: 125px; border: none;">

Es ist wunderbar HTML-4.01-Strict und sieht irgendwie auch besser aus. Vor allem gibt es bei der Verwendung von CSS mal praxisweise auf ein gleichartiges Beispiel bezogen enorme Vorteile. So sieht man oft Code, wo der "seitenmacher" in alle möglichen <img>s border=0 reinschreibt. Ach wie schön, dass man in eine CSS-Datei einfach als Standarteinstellung für <img>s

img { border: none; }

schreiben kann, und schon kann man sich eine Menge sparen. Wegen Breiten- und Höhenangaben: Mit CSS kannst du das Bild beispielsweise auch 5em breit und 1em hoch machen, dann bekommst du z.B. bei Einbindung eines entsprechenden Bildes in diese Website hier ein Bild, dass so groß ist, wie die folgenden Buchstaben:

mmmmm

Wunderbar, nicht wahr? Sowas eignet sich hervorragend für dinge, die nicht verzerrt werden können, wie z.B. transparente "platzhalter", obwohl auch von denen abzuraten ist (es gibt ja das vielseitige CSSS!).

WauWau

[Jeena Paradies]

Hallo,

1. valider Code ist

Das ist height="xx" und width="xx" auch.

2. imho besser ist.

Genau das ist doch meine Frage warum ist es deiner Meinung nach besser? Leider ist die Frage wohl nicht richtig angekommen. Welche Vorteile hat es hier bei height und width css zu benutzen?

Das mit Border ist mir klar vor allem auch in der externen CSS Datei. Aber bei height und width sehe ich (noch) keinen Vorteil. Da ja fast jedes Bild eine andere Höhe und Breite hat kann man es sowieso nicht in die externe CSS Datei reinschreiben sondern muss es bei jedem Bild schreiben. Das mit dem Breite in em angeben ist ein gutes Argument, was ich aber eigentlich noch nie brauchte. Wenn man das Bild tauscht muss man dann doch die Größenangaben im Markup ändern. Und für jedes Bild eine id zu vergeben um es in der externen CSS-Datei zu formatieren finde ich ziemlich überflüssig.

Welche Argumente gibt es denn sonst noch?

Grüße
Jeena Paradies

[WauWau]

Hallo Jeena,

1. valider Code ist
   Das ist height="xx" und width="xx" auch.

stimmt, ich habe mich undeutlich ausgedrückt. In HTML4.01 Transitional, also dem "unreinen" HTML, wo die alten und böööösen HTML-Elemnte und Attribute drin sind (Zitat von W3 ;-), da ist es natürlich erlaubt, aber in dem reinen und unbeschmutzten Strict, da nicht (ein weiteres Zitat von W3, Quelle unbekannt ;-)

2. imho besser ist.
   Genau das ist doch meine Frage warum ist es deiner Meinung nach besser? Leider ist die Frage wohl nicht richtig angekommen. Welche Vorteile hat es hier bei height und width css zu benutzen?

Hmmm, wieso fragst du da eigentlich ausgerechnet mich? Ich war und bin sowieso eigentlich nicht so ein Weg-mit-dem-alten-und-bewährten-Fanatiker. Wie wär's denn mit selbst-erkundigen,-bevor-im-forum-fragen? Du bist doch schon lange genug hier.

Das mit Border ist mir klar vor allem auch in der externen CSS Datei. Aber bei height und width sehe ich (noch) keinen Vorteil. Da ja fast jedes Bild eine andere Höhe und Breite hat kann man es sowieso nicht in die externe CSS Datei reinschreiben sondern muss es bei jedem Bild schreiben. Das mit dem Breite in em angeben ist ein gutes Argument, was ich aber eigentlich noch nie brauchte. Wenn man das Bild tauscht muss man dann doch die Größenangaben im Markup ändern. Und für jedes Bild eine id zu vergeben um es in der externen CSS-Datei zu formatieren finde ich ziemlich überflüssig.

Weitere Argumente? Erst mal rein vom logischen: HTML soll Text auszeichnen, das beweist auch schon die ausgeschriebene form dieses Akronyms. Eine Auszeichnungssprache soll einen Text beschreiben, sogesehen ist es ja schon mal eine Schande, dass sie ihm Multimediaelemente und ähnliches zufügt, anstatt ihn auszuzeichnen.
Für die Formatierung, also auch die Darstellung der Multimediaelemente, ist CSS da. Mit CSS soll die Schrift, Ränder, Abstände, Rahmen, Hintergründe, Breiten, Höhen und vieles, vieles mehr  formatiert werden - mit HTML _nicht_.

Kleine Frage nebenbei: Welche Methode ziehst du vor, um eine einzelne Überschrift In Verdana, etwas größer darzustellen?

1. <h1><font face="Verdana" size="5">TEXT</font></h1>

2. <h1 style="font: x-large Verdana;">TEXT</h1>

ich hoffe doch, die 2. Und falls, dann frage ich dich: Wieso?

WauWau

[Detlef G.]

Hallo WauWau

stimmt, ich habe mich undeutlich ausgedrückt. In HTML4.01 Transitional, also dem "unreinen" HTML, wo die alten und böööösen HTML-Elemnte und Attribute drin sind (Zitat von W3 ;-), da ist es natürlich erlaubt, aber in dem reinen und unbeschmutzten Strict, da nicht (ein weiteres Zitat von W3, Quelle unbekannt ;-)

Also imho ist lediglich align, border, hspace und vspace in strict nicht erlaubt.

MFG
Detlef

[Jeena Paradies]

Hallo,

stimmt, ich habe mich undeutlich ausgedrückt. In HTML4.01 Transitional, also dem "unreinen" HTML, wo die alten und böööösen HTML-Elemnte und Attribute drin sind (Zitat von W3 ;-), da ist es natürlich erlaubt, aber in dem reinen und unbeschmutzten Strict, da nicht (ein weiteres Zitat von W3, Quelle unbekannt ;-)

Also mir validiert meine Seite auch mit XHTML 1.1 obwohl ich height="xx" und width="xx" für die Bilder verwende.
http://validator.w3.org/check?uri=http%3A%2F%2Fjeenaparadies.de%2Fartikel%2Fwebdesign%2F&charset=(detect+automatically)&doctype=Inline&ss=1&verbose=1

Hmmm, wieso fragst du da eigentlich ausgerechnet mich? Ich war und bin sowieso eigentlich nicht so ein Weg-mit-dem-alten-und-bewährten-Fanatiker.

Weil du gerade das Thema angesprochen hattest.

Wie wär's denn mit selbst-erkundigen,-bevor-im-forum-fragen? Du bist doch schon lange genug hier.

Das habe ich natürlich nur schienst du da so überzeugt  -von dem was du sagst - dass ich deine Sicht der Dinge hören wollte.

Weitere Argumente? Erst mal rein vom logischen: HTML soll Text auszeichnen, das beweist auch schon die ausgeschriebene form dieses Akronyms. Eine Auszeichnungssprache soll einen Text beschreiben, sogesehen ist es ja schon mal eine Schande, dass sie ihm Multimediaelemente und ähnliches zufügt, anstatt ihn auszuzeichnen.

Wenn das nicht so wäre würde sich HTML nicht so lange halten, und würde durch eine Andere Sprache ersetzt die das alles kann. Davon bin ich überzeugt.

Für die Formatierung, also auch die Darstellung der Multimediaelemente, ist CSS da. Mit CSS soll die Schrift, Ränder, Abstände, Rahmen, Hintergründe, Breiten, Höhen und vieles, vieles mehr  formatiert werden - mit HTML _nicht_.

Also würdest du textareas und input und so Zeugs auch mit CSS formatieren?

Ich bin halt irgendwie der Meinung dass die Höhe und Breite eines Bildes ja auch zum Inhalt gehören, und das Bild auch ohne CSS darstellbar sein sollte. Mir ist auch klar dass es auch unverzerrt ohne die Höhen- und Breitenangaben angezeigt wird weil diese Daten ja innerhalb des Bildes auch abgespeichert sind. Aber wenn sie dort schon abgespeichert sind dann müssen sie ja sehr wichtig sein und wirklich an das Bild gebunden sein so dass sich das Bild nicht von ihnen trennen kann. Wenn sie aber so wichtig sind sollten Sie ja auch zur Verfügung stehen wenn kein CSS angezeigt wird. Dies ist aber nur gegeben wenn sie mit height="xx" und width="xx" angegeben werden (vor allem wenn sie dann anders lauten wie die Angaben innerhalb der Bilder). Sonst wird das ganze ja falsch dargestellt, was unter umständen zur falschen Interpretation durch den Betrachter führt.

Verstehst du jetzt meine Zweifel warum ich mich nicht dazu durchringen kann zu sagen dass nur CSS dafür zuständig sein kann?

Kleine Frage nebenbei: Welche Methode ziehst du vor, um eine einzelne Überschrift In Verdana, etwas größer darzustellen?
  1. <h1><font face="Verdana" size="5">TEXT</font></h1>
  2. <h1 style="font: x-large Verdana;">TEXT</h1>

3. (in der externen CSS Datei) h1#extrawurst { font: 300% verdana; }

ich hoffe doch, die 2. Und falls, dann frage ich dich: Wieso?

Ich nehme die dritte, die der zweiten aber ziemlich gleicht. Wieso? Nun:

* weil font bei meinen Doctypes nicht erlaubt ist
* weil ich dann markup und layout trenne
* weil eine h1 schon auch ohne formatierung genug aussagt

Bei einem Bild ist das nicht gegeben. Ich bin halt noch am suchen nach der ultimativen Antwort.

Grüße
Jeena Paradies

[at]

Hallo.

Also würdest du textareas und input und so Zeugs auch mit CSS formatieren?

[...]

* weil ich dann markup und layout trenne
* weil eine h1 schon auch ohne formatierung genug aussagt

Ich formatiere <textarea>, <input> und auch <img> mittels einer externen CSS-Datei, da ich mit deiner Begründung für den Einsatz einer solchen konform gehe und keinen grundlegenden Unterschied zwischen den genannten Elementen und etwa <h1> ausmachen kann, der eine Abweichung vom Einsatz von CSS für diese Zwecke nahelegte.
Warum soll eine Bildgröße nicht zum Layout gehören? Und was würde geschehen, wenn man die Angabe wegließe?
Wenn ich ein Texteingabefeld formatieren will, muss ich zu CSS greifen. Warum soll ich dann für bestimmte Angaben eine Ausnahme machen?
MfG, at

[WauWau]

Hallo Jeena,

Also mir validiert meine Seite auch mit XHTML 1.1 obwohl ich height="xx" und width="xx" für die Bilder verwende.
http://validator.w3.org/check?uri=http%3A%2F%2Fjeenaparadies.de%2Fartikel%2Fwebdesign%2F&charset=(detect+automatically)&doctype=Inline&ss=1&verbose=1

jo, ich habe es auch mal gerade mit Strict ausprobiert, es geht genauso, du hast recht.... Aber das hat ja Detlef bereits in [pref:t=77546&m=448246] geschrieben...

Hmmm, wieso fragst du da eigentlich ausgerechnet mich? Ich war und bin sowieso eigentlich nicht so ein Weg-mit-dem-alten-und-bewährten-Fanatiker.
Weil du gerade das Thema angesprochen hattest.

ach genau, so war es ja gewesen (ist heute schon mittwoch?)...

Wie wär's denn mit selbst-erkundigen,-bevor-im-forum-fragen? Du bist doch schon lange genug hier.
Das habe ich natürlich nur schienst du da so überzeugt  -von dem was du sagst - dass ich deine Sicht der Dinge hören wollte.

Ich und "überzeugt" scheinen? Sind ja völlige Gegensätze *g* ;-)

Wenn das nicht so wäre würde sich HTML nicht so lange halten, und würde durch eine Andere Sprache ersetzt die das alles kann. Davon bin ich überzeugt.

jo, das würde es so in etwa auf den Punkt treffen. Aber

a) HTML gibt es schon "ne ganze weile" lang
  b) Es gibt im WWW keine richtige Alternative
  c) sie würde sich nicht durchsetzten

Oder willst du demnächst seiten sehen, wo steht: "Diese Seite ist mit MWFL formatiert. Sie benutzen jedoch nicht den MSIE, deswegen werden sie sie nicht sehen"

MWFL = Microsofts Web Formatting Language (soll irgendwie heißen: "MS's Web-formatierende Sprache")...

Außerdem: Es gibt bereist so einen Scheiß wie Flash (sorry Macromedia, aber euer Produkt verschmutzt das schöne Web)

Also würdest du textareas und input und so Zeugs auch mit CSS formatieren?

jo, grundsätzlich alles, vom <p> über das <img> und die <h1> bis hin zun <input>'s und den <a>'s (habe ich irgendwas vergessen <g> ;-) ?)

Ich bin halt irgendwie der Meinung dass die Höhe und Breite eines Bildes ja auch zum Inhalt gehören, und das Bild auch ohne CSS darstellbar sein sollte.

Das Bild wird ohne CSS oder formatierung in seiner originalgröße gespeichert, und wenn du es mal richtig überlegst, dann ist die Höhe und Breite die Formatierung, und formatiert wird mittels CSS - ausgezeichnet mittels HTML.

Mir ist auch klar dass es auch unverzerrt ohne die Höhen- und Breitenangaben angezeigt wird

Browser kommen da auf ganz dolle ideen ;-))

weil diese Daten ja innerhalb des Bildes auch abgespeichert sind.

so ist es - so soll es sein.

Aber wenn sie dort schon abgespeichert sind dann müssen sie ja sehr wichtig sein

wieso? Erstelle ein 10x10 pixel großes gif, welches nur mit (?:rot|grün|gelb|#xxxxxx|[transparent]) gefüllt ist. Spielt die Höhe da eine rolle, wenn es letztenendes in unterschiedlichen größen an unterschiedlichen stellen fürs design benutzt wird? Wenn du ein Foto hast und es als ein (wie heißen die nochmal? *grübel* ach ja, genau) Thumbnail speichern willst, ist die größe dann relevant?

und wirklich an das Bild gebunden sein so dass sich das Bild nicht von ihnen trennen kann.

Nööö. Siehe oben.

Wenn sie aber so wichtig sind sollten Sie ja auch zur Verfügung stehen wenn kein CSS angezeigt wird.

Tuen sie ja auch [mein gott, kann mal jemand die sonne abstellen, ich kann nichts mehr erkenne, was auf meinem monitor steht]

*blindschreib*

Dies ist aber nur gegeben wenn sie mit height="xx" und width="xx" angegeben werden

Also das haben wir doch jezt schon durchgekaut...

Sonst wird das ganze ja falsch dargestellt, was unter umständen zur falschen Interpretation durch den Betrachter führt.

nix wird ohne nicht exiplit angegebene Breite-und-höhe-werte falsch dargestellt.

Verstehst du jetzt meine Zweifel warum ich mich nicht dazu durchringen kann zu sagen dass nur CSS dafür zuständig sein kann?

CSS ist nicht "nur" dafür zuständig.

Ach ja, und wenn du einen Grund gesucht hast, die Größe eines Bildes überhaupt exiplit anzugeben, wenn es doch die gleiche ist, als im Bild "eingestellt": Wenn das Bild noch nicht geladen ist, geht der Browser von eiener "Grundgröße" aus und reserviert dafür den Platz. Nun wird das Bild geladen und dann entstehen undschöne Ruckeleffekte, weil dann der reservierte platz nicht ausreicht und alles beiseite geschoben wird, und so weiter... oder wenn das bild nicht geladen werden kann (z.B. weil es nicht existiert), dann bleibt die voreingestellte "freifläche" für das Bild. Bei größenangabe für das bild wird gleich der richtige platz freigehalten und notfalls sieht dann wenigstens alles so aus, wie es mit bild aussehen würde, außer dass anstatt des Bildes irgendwas anderes ist, im IE wäre das beispielsweise so ein hässliches X, in Opera/Mozilla ist es afaik nix.

3. (in der externen CSS Datei) h1#extrawurst { font: 300% verdana; }

ganz nobel ;-)

Ich nehme die dritte, die der zweiten aber ziemlich gleicht.

ist x-large = 300% ?

* weil font bei meinen Doctypes nicht erlaubt ist

aha... und wieso nicht?

* weil ich dann markup und layout trenne

ich denke, deswegen. Das wäre ja umsobesser, würdest du es auch bei der einbindung deiner bilder trennen ;-)

* weil eine h1 schon auch ohne formatierung genug aussagt

stimmt auch wieder. Aber es sieht nicht so aus, wie wir es haben wollen ;-)

Bei einem Bild ist das nicht gegeben. Ich bin halt noch am suchen nach der ultimativen Antwort.

Wie? Zur Formatierung? Mit CSS kannst du Abstand regeln, Rahmen drumregeln, hintergrund festlegen (wenn es transparent ist, macht das schon was aus) und einiges mehr (z.B. das im alt-attribut stehende einfach und unkompliziert hinter das bild schreiben (´oder unter oder vor oder wo immer du es hinwillst - immerhin benutzt du ja CSS 8]). Mit HTML kannst du lediglich den Abstand vertikal in eine richtung und horizontal in eine richtung (jenachdem wo es ausgerichtet ist), genau dann noch ausrichtung (CSS: float), größe und rahmen (die rahmenfarbe sowie konsistenz kannst du mit HTML _nicht_ bestimmen) festlegen. Schluss, ende, aus mit HTML - CSS ist hier wohl der gewinner bei der formatierung.

WauWau

[0per8or]

Hi WauWau,

hab das alles jetzt mal ein bisschen geändert:

<div style="text-align:center; position:absolute; bottom:0px;">
<img name="slice_bottom" src="images/slice_bottom.gif" style="width:800px; height:28px; border:none;">
</div>

aber "text-align:center" funktioniert nicht wirklich! Was hab ich falsch gemacht?

mfg
0per8or

[at]

Hallo.

aber "text-align:center" funktioniert nicht wirklich! Was hab ich falsch gemacht?

Damit bist du bei einer Frage angelangt, die zu den meistgestellten hier gehört und folglich durch das Archiv hinreichend beantwortet wird.
MfG, at

[Thomas J.S.]

Hi,

ich möchte eine Tabelle untenbündig an einer HTML-Datei ausrichten. Wie mache ich das?

<div style="position:absolute;bottom:0px;">
  <table>
...
  </table>
</div>

Grüße
Thomas