Bildunterschrift, aber nicht als Tabelle?
Christoph Moder
- grafik
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
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
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
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.
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 :}
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.
'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.
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
also Kai ...
ich glaub' nicht, dass du dazu irgendwas in SelfHTML findest :)
willst du mein Glaubensbekenntnis zu SELFHTML erschüttern ?
kopfschüttelnd
Christoph S.
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
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
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>
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
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.
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