Christoph Moder: Bildunterschrift, aber nicht als Tabelle?

Hallo!

Ich möchte meinen Bildern eine Bildunterschrift spendieren. Aber ich will ohne Tabellen arbeiten, weil sich die Bilder von selbst anordnen sollen (breites Browserfenster: mehr nebeneinander; schmales Fenster: stattdessen untereinander).

Konkret: es soll so aussehen wie:
http://www.skriptweb.de/fotogalerie/
aber die Bilder sollen eben Bildunterschriften haben.

Ist so etwas mit HTML/CSS möglich? Ich hatte die Vermutung, man müsste mit <SPAN></SPAN> Bild und Bildunterschrift zusammenhalten können, bin aber daran gescheitert, den Text unter (oder über) das Bild auszurichten. Oder geht so etwas nur mit üblen JavaScript-Tricks (z.B. Tabelle wird in Abhängigkeit der Bildschirmdimensionen mit JavaScript erstellt)?

Hat irgend jemand eine Idee?

Danke, viele Grüße,
Christoph

  1. Hi Christoph

    Ich denke, das ist ganz einfach:

    <img src="datei.gif" align=absbottom>Beschriftungstext

    oder

    <img src="datei.gif" align=baseline>Beschriftungstext

    check it...

    Gruss, Marc

  2. hi

    Vorschlag - ohne Garantie:
    <table style="display:inline;">
    <tr><td><img/></td></tr>
    <tr><td>Text</td></tr>
    </table>

    ...evtl. auch display:inline-table oder bei Mozilla 1.0 display:-moz-inline-table ...

    Grüße aus Lübeck

    Kai

    1. hallo Kai,

      ...evtl. auch display:inline-table oder bei Mozilla 1.0 display:-moz-inline-table ...

      moz-inline-table ? Kann RC1 bei mir nix mit anfangen

      Im übrigen: die Quelle, die Christoph Moder zum Vergleich angibt, wartet mit gar keinen Bilduntewrschriften auf, so daß man nicht vergleichen kann. Es handelt sich aber um eine "einfache" HTML-Seite gänzlich ohne Tabellen oder layer, so daß klar ist, warum die Bilder dort bei veränderter Anzeigengröße mal neben- und mal untereinander stehen können.

      Es wäre vielleicht möglich, mit availHeight bzw. availWidth (http://selfhtml.teamone.de/javascript/objekte/screen.htm#avail_height zu experimentieren, indem man das in eine if/else-Abfrage steckt. Ich halte davon aber nix.

      Grüße aus Lübeck

      oh, du entwickelst dich zum Weltreisenden ?

      Grüße aus Berlin

      Christoph S.

      1. hi

        moz-inline-table ? Kann RC1 bei mir nix mit anfangen

        der "-" vorne is wichtig.

        Es wäre vielleicht möglich, mit availHeight bzw. availWidth (http://selfhtml.teamone.de/javascript/objekte/screen.htm#avail_height zu experimentieren, indem man das in eine if/else-Abfrage steckt. Ich halte davon aber nix.

        das ist dann von hinten durch die Brust in's Auge.

        Grüße aus Lübeck
        oh, du entwickelst dich zum Weltreisenden ?

        Besuch bei Oma.... Morgen pünktlich zum v8star-Rennen steht da wieder Bleckede :}

        1. hallo,

          der "-" vorne is wichtig.

          ok. Ich hab mal vorsichtshalber in SELFHTML 8.0 nachschauen wollen zum Suchausdruck "-moz-inline-table". Da kriege ich 6180 Treffer angezeigt. Oh, prima.
          Natürlich hab ich auf die Schnelle nicht alle 6180Stellen nachlesen können, aber die paar Seiten, die ich aufgerufen habe, enthielten dann den Suchbegriff nicht.
          Was ist da mit dem Suchscript los ?

          Grüße

          Christoph S.

        2. 'tschuldigung, mein posting sollte eigentlich im Titel "umgetauft" werden, hat aber aus unerfindlichem Grund nicht getan. Hier derselbe Text nochmal:

          hallo Kai,

          der "-" vorne is wichtig.

          ok. Ich hab mal vorsichtshalber in SELFHTML 8.0 nachschauen wollen zum Suchausdruck "-moz-inline-table". Da kriege ich 6180 Treffer angezeigt. Oh, prima.

          Natürlich hab ich auf die Schnelle nicht alle 6180Stellen nachlesen können, aber die paar Seiten, die ich aufgerufen habe, enthielten dann den Suchbegriff nicht.
          Was ist da mit dem Suchscript los ?

          Grüße

          Christoph S.

          1. hi

            der "-" vorne is wichtig.

            Natürlich hab ich auf die Schnelle nicht alle 6180Stellen nachlesen können, aber die paar Seiten, die ich aufgerufen habe, enthielten dann den Suchbegriff nicht.
            Was ist da mit dem Suchscript los ?

            das gleiche wird auch Bugzilla anstellen - durch den "-" VORNE kommt das Script durcheinander. Aber ich glaub' nicht, dass du dazu irgendwas in SelfHTML findest :)

            Grüße aus Lübeck

            Kai

            1. also Kai ...

              ich glaub' nicht, dass du dazu irgendwas in SelfHTML findest :)

              willst du mein Glaubensbekenntnis zu SELFHTML erschüttern ?

              kopfschüttelnd

              Christoph S.

              1. hi

                willst du mein Glaubensbekenntnis zu SELFHTML erschüttern ?

                kopfschüttelnd

                naja.. was erst seit maximal einem Monat umgestellt ist...

                Grüße aus Lübeck

                Kai

          2. Hi, Christoph

            ok. Ich hab mal vorsichtshalber in SELFHTML 8.0 nachschauen wollen zum Suchausdruck "-moz-inline-table". Da kriege ich 6180 Treffer angezeigt. Oh, prima.

            Natürlich hab ich auf die Schnelle nicht alle 6180Stellen nachlesen können, aber die paar Seiten, die ich aufgerufen habe, enthielten dann den Suchbegriff nicht.
            Was ist da mit dem Suchscript los ?

            Der Bindestrich wird als eigenständiger Suchbegriff aufgefasst. Anders ist es wohl nicht zu erklären, dass die Suche nach -dkadfaklösf ebensoviele Ergebnisse liefert ;)

            LG Orlando

  3. Hallo!

    Ist so etwas mit HTML/CSS möglich? Ich hatte die Vermutung, man müsste mit <SPAN></SPAN> Bild und Bildunterschrift zusammenhalten

    Richtig:

    <span><span style="position:absolute;top:0px"><img src=""></span><BR><span style="position:relative" ><P>Beschreibung</P></span></span>

    oder so ?

    <span><P style="text-align:center" ><img src=""><BR><P style="text-align:right">Beschreibung</P></span>

    1. hi

      <span><span style="position:absolute;top:0px"><img src=""></span><BR><span style="position:relative" ><P>Beschreibung</P></span></span>

      oder so ?

      <span><P style="text-align:center" ><img src=""><BR><P style="text-align:right">Beschreibung</P></span>

      weder noch - span ist ein Inline-Element, aber wenn man jeweils ein <div> nimmt, kann's was werden.

      Grüße aus Lübeck

      Kai

      1. weder noch - span ist ein Inline-Element, aber wenn man jeweils ein <div> nimmt, kann's was werden.

        ne,ne es müssen schon Spans sein, ein DIV mit position abolute bezieht sich auf das Layout, während beim Span die absolute Position sich auf das darüberliegende Layer bezieht.

        <BODY><DIV id="TabellenLayout" style="width:100%;text-align:center;vertical-align:middle;height:480px;"><BR><span id="TR1" style="position:absolute;top:0px;"><Span id=TD1 style="position:absolute;top:0px;">[mein Code]</span><span id="TD2" style="position:relative;">[meinCode]</span></span></DIV><BR></BODY>

        Diese Layout-Grundeinstellung habe ich aber vorausgesetzt, wenn man eine Tabelle durch layers ersetzen will.
        Wären alle Spans relativ positioniert, sähe das dann so aus:

        span1
           span2
             span3
               span4

        Bei der Verwendung von DIVS müsste man für jedes Layer die exakten Positionen bei jeder möglichen Bildschirmeinstellung berechnen, sollte die Darstellung einer dynamischen Tabelle entsprechen, zumindest ist das bei meinen Browsern so.

        Die sicherste Methode ist halt immer noch eine Tabelle mit table.

        1. hi

          ne,ne es müssen schon Spans sein, ein DIV mit position abolute bezieht sich auf das Layout, während beim Span die absolute Position sich auf das darüberliegende Layer bezieht.

          Entschuldugung, aber das ist Blödsinn. position:absolute auf ein normales <span> macht nach HTML-Spec mal GAR NICHTS
          position:absolute bezieht sich im übrigen IMMER auf das übergeordnete Element (Sonderfall ist, wenn dieses <body> ist, dass isses trotzdem noch die Fensterecke.)

          Grüße aus Bleckede

          Kai