Schrift vor Bild

[Maike]

Hallo,

ich habe ein kleines verlinktes Bild. Jetzt würde ich gerne in die rechte untere Ecke des Bildes eine Zahl schreiben.
So in der Art:
---------------
|             |
|             |
|             |
|            1|
---------------

Ich hab das mal so probiert:

<a href="..."><TD align="right" valign="bottom" width="150" height="113" style="cursor: hand; background-image:url($gid/vorschau/$x.jpg);background-repeat:no-repeat; background-position: top left; font-size: 20px; color: red;">1</td></a>

Leider war der Link dann nur noch im Internetexplorer anklickbar. Im Opera und Netscape gings nicht mehr. Hat mir jemand eine funktionierende Lösung?

mfg Maike

[MudGuard]

Hi,

<a href="..."><TD align="right" valign="bottom" width="150" height="113" style="cursor: hand; background-image:url($gid/vorschau/$x.jpg);background-repeat:no-repeat; background-position: top left; font-size: 20px; color: red;">1</td></a>

td ist in a nicht erlaubt.
hand ist kein gültiger Wert für cursor.

cu,
Andreas

[Maike]

Hi Andreas,

td ist in a nicht erlaubt

tja, dann hab ich also ein Problem. Das heißt ja dann, das ich es nicht so machen kann. Oder hast du eine Idee, wie ich mein Problem lösen kann. Kann man vielleicht mit css die Zahl vor den Bild positionieren?

Maike

[stefan]

Hallo Maike,

Kann man vielleicht mit css die Zahl vor den Bild positionieren?

Ja, kann man. Mir fallen spontan zwei Möglichkeiten ein.

Zum einen könntest Du mit den Aussenabständen "margin" der Schrift bzw. des Bildes arbeiten. Schau Dir mal http://selfhtml.teamone.de/navigation/css.htm#randabstand an. Da auch negative Werte möglich sind, könntest Du zwischen Bild und Schrift einen "negativen Abstand" erzeugen, so das die Schrift über das Bild "rutscht". Mittels "z-index" (http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#z_index) kannst Du beeinflussen, dass die Schrift im Vordergrund - also vor dem Bild - dargestellt wird.

Zum anderen könntest Du mit relativer oder absoluter Positionierung (http://selfhtml.teamone.de/navigation/css.htm#positionierung) die schrift über dem Bild positionieren. Auch hier könntest Du "z-index" benötigen.

Bei beiden Ansätzen rate ich Dir, das ergebnis in so vielen Browsern wie möglich zu testen, da die Ergebnisse von einander abweichen könnten.

Viel Erfolg,
stefan

[Maike]

Zum anderen könntest Du mit relativer oder absoluter Positionierung (http://selfhtml.teamone.de/navigation/css.htm#positionierung) die schrift über dem Bild positionieren. Auch hier könntest Du "z-index" benötigen.

Bei beiden Ansätzen rate ich Dir, das ergebnis in so vielen Browsern wie möglich zu testen, da die Ergebnisse von einander abweichen könnten.

<td><a href="..."><img style="z-index:1;" src="..."alt="..."><span style="position:relative; top:-20px; left:-50px; z-index:2; font-size: 10px; color: red; text-align:right;">0</span></a></td>

Soweit ist das ganz nett. Nur eins stört mich noch dabei:

|(Zellenrand)------|
||(Bildrand)----|xx|
||              |xx|
||              |xx|
||          0   |xx|
||--------------|xx|
|------------------|

Jetzt ist in meiner Tabellenzelle das verlinkte Bild und darüber liegt die ziffer. Alles toll. Nur rechts des Bildes, dort wo ich die xx stehen ist ein Freiraum. Der soll weg. Wie krieg ich das hin und ist das überhaupt möglich?

Es soll also nacher so aussehen:

|(Zellenrand)----|
||(Bildrand)----||
||              ||
||              ||
||          0   ||
||--------------||
|----------------|

Maike

[nag]

Hallo,

zum besseren Verständnis würde ein geeigneter Auszug aus dem Quelltext und/oder ein URl helfen.

mfg NAG

[Meike]

Hallo,

zum besseren Verständnis würde ein geeigneter Auszug aus dem Quelltext und/oder ein URl helfen.

mfg NAG

Hallo,

also am konkreten Beispiel:

http://www.treffpage.de/test/galerie.php?gid=1

wie bekomme ich die Abstände unter den Bildern weg?

mfg Maike

[Thomas Luethi]

Hallo Meike,

http://www.treffpage.de/test/galerie.php?gid=1
wie bekomme ich die Abstände unter den Bildern weg?

Zuerst mal solltest Du Dein HTML und CSS valide machen.

Du hast extrem viele Fehler im HTML, z.B. Verschachtelung
<td><a href="..."><img src="..." alt="..."><div>blabla</div>
In A (Inline-Element) darf kein DIV (Block-Level-Element) stehen.
Nimm SPAN statt DIV.

Weitere Fehler:

• Du verwendest immer wieder das gleiche ID-Attribut (id="layer")
    Wenn schon solltest Du eine Klasse nehmen. (Ist aber gar nicht notwendig!)
• Viele & sind nicht als & codiert, was die "Entity" Fehlermeldungen erzeugt.
     => Ersetzen

Mach _alles_, was Layout betrifft, in CSS. Du hast noch zahlreiche veraltete Attribute
(cellspacing u.s.w.) in den TABLE-Elementen.

Mach keine verschachtelten Tabellen.

Um uns die Analyse des Quelltextes zu erleichtern,
waere es auch extrem hilfreich, wenn Du
1. statt den immer gleichen Style-Attributen Klassen verwenden wuerdest
   (und die wesentlichen Dinge in der Datei selbst in einem
   STYLE-Bereich im HEAD definieren wuerdest. Nur voruebergehend.)
2. die Zeilenumbrueche im Quelltext an der richtigen Stelle
    machen wuerdest, naemlich jeweils nach </td>, </tr> u.s.w.
    und vor <td>, <tr> u.s.w.

All die Style-Attribute und auch IDs/Klassen kannst Du Dir schenken.
Nimm einfach _eine_ Klasse (oder ID) fuer die (aeusserste) Tabelle.
Der Rest geht mit Verschachtelungs-Selektoren.
http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente

Ich hab ein bisschen rumgebastelt (elende Pixelschubserei, das!).
Testbrowser: Mozilla 1.5 und Konqueror 3.1.1 unter SuSE Linux 8.2.
(Am Schluss auch noch Netscape 4.78 - vor dem solltest Du dieses
CSS aber verstecken.)

Mit position: kriegte ich den unteren Abstand nicht weg.
Also setzte ich den zweiten Vorschlag von Stefan ein:
Negativer Margin fuer den Text.

Das Resultat siehst Du hier:
http://www.tiptom.ch/tests/fremdes/galerie3.html
Zwei Reihen ohne Text, zwei Reihen mit Text.

HTML:

<table class="thumbs2">

<tr>
  <td><a href=".."><img alt="..." src="bild1.jpg"><span>1 Kommentar</span></a></td>
  <td><a href=".."><img alt="..." src="bild2.jpg"><span>4 Kommentare</span></a></td>
  <td><a href=".."><img alt="..." src="bild3.jpg"><span>3 Kommentare</span></a></td>
  <td><a href=".."><img alt="..." src="bild4.jpg"><span>2 Kommentare</span></a></td>
</tr>

<tr>
  <td><a href=".."><img alt="..." src="bild5.jpg"><span>1 Kommentar</span></a></td>
  <td><a href=".."><img alt="..." src="bild6.jpg"><span>5 Kommentare</span></a></td>
  <td><a href=".."><img alt="..." src="bild7.jpg"><span>4 Kommentare</span></a></td>
  <td><a href=".."><img alt="..." src="bild8.jpg"><span>3 Kommentare</span></a></td>
</tr>

</table>

CSS:

table.thumbs2
        { margin:0; border:0; border-collapse:collapse; border-spacing:0; }

.thumbs2 td
        {
          padding:4px 2px 0 2px;
          width:154px; height:117px;
          text-align:center; vertical-align:middle;
        }

.thumbs2 td img
        { margin:0; border:0; z-index:1; width:150px; height:113px; }

.thumbs2 td span
       {
         display:block; width:130px; height:20px;
         font-size:10px; font-weight:bold;
         margin-top:-25px; margin-left:5px;
         border:1px dotted red; /* in Konqueror 3.1.1 OK, von Mozilla 1.5 ignoriert */
         color:yellow; /* wird von Mozilla + Konqueror angewendet */
         background-color:blue;  /* in Konqueror OK, von Mozilla ignoriert */
         z-index:2;
      }

Komischerweise ignoriert Mozilla beim Span, der ueber das Bild gelegt wird,
die Hintergrundfarbe und den Border; die Schriftfarbe wendet er aber an.
Konqueror zeigt alles an wie gewuenscht.

So, jetzt ist die Reihe an Dir.
Mach erst mal das HTML und CSS valide.
Dann probiere meine Vorschlaege aus und teste es in allen Browsern,
die Du auftreiben kannst!

Gruesse,

Thomas

[Maike]

Hallo Thomas,

vielen vielen vielen vielen ... Dank für deine tolle Hilfe und die viele Arbeit die du dir für mich gemacht hast *schmatz*.

Ich bin schon ziemlich zufrieden, mit dem was ich jetzt sehe.

http://www.treffpage.de/test/galerie.php?gid=1

Ich habe mit dem IE6 getestet: ok
Ich habe mit dem Netscape 7.01 getestet: ok

Ich habe mit Opera 7.03 getestet: schlecht!!
Der Opera zeigt die Schrift vor dem Bild, den hintergrund und den Rand um die Schrift aber hinter dem Bild.

Zum verdeutlichen mal ein paar Screenshots:

So sieht es im Netscape aus:
<img src="http://www.treffpage.de/images/1.jpeg" border="0" alt="">

So sieht es im Opera mit Bildern aus:
<img src="http://www.treffpage.de/images/2.jpeg" border="0" alt="">

So sieht es im Opera aus, wenn ich die Bilder ausblende:
<img src="http://www.treffpage.de/images/3.jpeg" border="0" alt="">

Ich verstehe das nicht!

Habt Ihr eine Idee wieso das so ist?

Was ist noch verbesserungswürdig? Was gefällt euch nicht? Was würdet Ihr anderst machen? Wie sieht es mit den anderen Browsern aus, mit denen ich es nicht getestet habe (weil ich sie nicht habe)?

im Vorraus vielen Dank für eure Mühe

mfg Maike

[Ingo Turski]

Hi,

Du _versuchst_ den halbtransparenten Hintergrund nicht standardkonform über
  Filter: Alpha(opacity=50);
  -moz-opacity: 50%;
zu erzeugen.
Mein Mozilla zeigt ihn z.B. _nicht_ an. Und Opera hält sich an den Standard und zeigt ihn auch nicht an.
Um sicher zu gehen, würde ich entweder auf die Halbtransparenz verzichten und eine normale Hintergrundfarbe bzw. eine passende Schriftfarbe (weiss?) wählen oder die Halbtransparenz über ein gerastertes GIF-Hintergrundbild mit transparenten Pixeln realisieren.

freundliche Grüße
Ingo

[Maike]

Hi Ingo,

danke für deine Antwort.

Du _versuchst_ den halbtransparenten Hintergrund nicht standardkonform über
  Filter: Alpha(opacity=50);
  -moz-opacity: 50%;
zu erzeugen.
Mein Mozilla zeigt ihn z.B. _nicht_ an. Und Opera hält sich an den Standard und zeigt ihn auch nicht an.

Ich hab es auch schon ohne den Filter versucht. Das ändert bei meinem Opera rein gar nichts. Derselbe Fehler! Ich hab das gefühl, dass er z-index:2; nur auf die Schrift und nicht auf den Hintergrund und den Kasten anwendet. Das hat dann nichts mit dem Filter zu tun.

Um sicher zu gehen, würde ich entweder auf die Halbtransparenz verzichten und eine normale Hintergrundfarbe bzw. eine passende Schriftfarbe (weiss?) wählen oder die Halbtransparenz über ein gerastertes GIF-Hintergrundbild mit transparenten Pixeln realisieren.

Naja, das wäre dann doch ein sehr großer Aufwand für einen sehr bescheidenen Effekt. Und nachdem die mehrheitlich genutzen Browser das ganze mehr oder weniger korrekt anzeigen kann ich damit leben. Trotzdem Danke für den Tipp.

mfg Maike

[Ingo Turski]

Hi,

Und nachdem die mehrheitlich genutzen Browser das ganze mehr oder weniger korrekt anzeigen kann ich damit leben. Trotzdem Danke für den Tipp.

Dann würde ich trotzdem zumindest eine Textfarbe wählen, die besser sicherstellt, daß der Text auch in anderen Browsern als dem IE lesbar ist, oder?
Für so eine Kleinigkeit drängt sich mir quasi ein CSS-Hack auf:
.thumbs>td span {color:white;}

freundliche Grüße
Ingo

[Thomas Luethi]

Hallo,

vielen vielen vielen vielen ... Dank für deine tolle Hilfe und die viele Arbeit die du dir für mich gemacht hast *schmatz*.

Das tut gut :-)
Danke fuer den schoenen Dank.
Schoen, dass Du meinen Vorschlag umgesetzt hast.
Das ist die beste Anerkennung fuer meine Arbeit.

Ich finde das Treff-Webrojekt uebrigens eine gute Sache!
Die Jugendlichen haben sicher grossen Spass an den Fotos.

Ich bin schon ziemlich zufrieden, mit dem was ich jetzt sehe.

Ja, ich denke, damit kann man leben.

Was ist noch verbesserungswürdig? Was gefällt euch nicht? Was würdet Ihr anderst machen?

Auf der Homepage http://www.treffpage.de/index.php funktionieren
alle Links unten links nur mit JavaScript (<a href="#">), d.h. wenn JS
aktiviert ist, aendert sich der Inhalt der Sprechblase des Maennchens,
sonst sind diese Links nutzlos.

Ich denke, es waere sinnvoll, die Angaben zu den naechsten Events
auch ohne JS zugaenglich zu machen, also als statische HTML-Seite.
Es reicht ja eine einzige Seite, und die Links koennen alle

• ohne JS auf diese Seite zeigen
• mit JS dem Maennchen den Spruch "in den Mund legen".

Der "IQ-Test" ist lustig.
http://www.treffpage.de/fun/iq.shtml

"Kann in Kalifornien einen Mann die Schwester seiner Witwe zu heiraten?"
ist nicht gerade gutes Deutsch...

"Wieviele zwei Cent Briefmarken sind in einem Dutzend?"
Zur Auswahl stehen: 1, 3, 6, 9, 12
Ich wuerde unbedingt auch 24 vorschlagen (2 x 12 = 24).
1, 2, 6, 12, 24

Das Feedback mit "warm" (z.B. bei 14/15) solltest Du nochmals anschauen und
ggf. mit dem Team besprechen.
Ich weiss nicht, wie wichtig Euch in der Jugendarbeit "political correctness" ist,
aber ich finde das Feedback mit der moechtegern-witzigen Assoziation
warm <-> schwul etwas heikel. Zwischen den Zeilen lese ich:
"Mit 'warm' meinen wir nicht 'schwul', wir wollen Dich nicht beleidigen".
Damit sagt ihr implizit, dass es eine Beleidigung ist, jemandem zu sagen,
er sei schwul.

Wie sieht es mit den anderen Browsern aus, mit denen ich es nicht getestet habe (weil ich sie nicht habe)?

Wie bereits gesagt, hat Mozilla 1.5 (Linux) ein aehnliches Problem,
wie Du es bei Opera beobachtet hast, d.h. Hintergrundfarbe und Rahmen
um die kurzen Texte werden nicht angezeigt.

Screenshot Mozilla 1.5 (Linux):
http://www.treffpage.de/index.php (125 kB)
Ohne Grafiken klappt's:
http://www.tiptom.ch/tests/fremdes/treff1ng_moz15.png (3 kB)

Screenshot Konqueror 3.1.1 (Linux - of course...):
http://www.tiptom.ch/tests/fremdes/treff1_konq311.png (118 kB)

Ich wuerde mir wegen diesem optischen Detail, das der Funktionalitaet
ja nicht schadet, keine grauen Haare wachsen lassen, zumal es ja
nur ein paar eher seltene Browser betrifft.

Gruesse,

Thomas

[Ingo Turski]

Hi,

Ich denke, es waere sinnvoll, die Angaben zu den naechsten Events
auch ohne JS zugaenglich zu machen, also als statische HTML-Seite.
Es reicht ja eine einzige Seite, und die Links koennen alle

• ohne JS auf diese Seite zeigen
• mit JS dem Maennchen den Spruch "in den Mund legen".

Du hast wahrscheinlich DSL und nicht bemerkt, daß hier tatsächlich jeweils eine komplette neue Seite angefordert wird. Nur _leider_ über einen denkbar ungünstigen und zudem viel zu aufwendigen Weg über ein mit nur Javascript abschickbares Formular.

Exakt dieselbe Funktion - nur völlig ohne Javascript - hätte bei z.B. diesem "Link"
<form name="tipps6" method="post" action="index.php" style="margin:0px;">
<input name="ask" type="hidden" value="event6">
<input name="sub" type="hidden" value="yup">
16.12.03 » <a href="#" onclick="document.tipps6.submit();">Nikolausparty</a>
</form>

folgendes:
<a href="index.php?ask=event6&sub=yup">Nikolausparty</a>

Ein solcher Einsatz von Javascript ist wirklich völlig verkehrt. Wenn schon Javascript, dann zum direkten Austausch der Inhalte auf der Seite - und natürlich mit einer Alternative ohne Javascript.

freundliche Grüße
Ingo

[Maike]

Hi Ingo,

<a href="index.php?ask=event6&sub=yup">Nikolausparty</a>

Diese Lösung ist wunderbar. So einfach und so efektiv. Leider bin ich nicht selbst draufbekommen. Danke dür deinen Hinweis.

mfg Maike

[Maike]

Hiho Thomas,

Ich finde das Treff-Webrojekt uebrigens eine gute Sache!
Die Jugendlichen haben sicher grossen Spass an den Fotos.

Es freut mich wenns dir gefällt!

Ich bin schon ziemlich zufrieden, mit dem was ich jetzt sehe.

Auf der Homepage http://www.treffpage.de/index.php funktionieren
alle Links unten links nur mit JavaScript (<a href="#">), d.h. wenn JS
aktiviert ist, aendert sich der Inhalt der Sprechblase des Maennchens,
sonst sind diese Links nutzlos.

Du hast recht, das ist eine Schwachstelle. Das war sowiso ein ziemlicher Schwachsinn für jeden link ein kommplettes <form> zu verwenden. Ich hab es nach Ingos klasse Vorschlag geändert. Ich wusste es vorher eben nicht besser ;-) dank euch, bin ich jetzt schon wieder etwas gescheiter.

Der "IQ-Test" ist lustig.
http://www.treffpage.de/fun/iq.shtml

"Kann in Kalifornien einen Mann die Schwester seiner Witwe zu heiraten?"
ist nicht gerade gutes Deutsch...

Naja, stimmt schon, aber ich habe es versucht so zu formulieren, dass ich keine zweite Zeile für die frage benötige. Muss ich mal noch überdenken.

"Wieviele zwei Cent Briefmarken sind in einem Dutzend?"
Zur Auswahl stehen: 1, 3, 6, 9, 12
Ich wuerde unbedingt auch 24 vorschlagen (2 x 12 = 24).
1, 2, 6, 12, 24

Guter Vorschlag, werde ich ändern, sobald ich die Fotogalerie am laufen hab.

Das Feedback mit "warm" (z.B. bei 14/15) solltest Du nochmals anschauen und
ggf. mit dem Team besprechen.
Ich weiss nicht, wie wichtig Euch in der Jugendarbeit "political correctness" ist,
aber ich finde das Feedback mit der moechtegern-witzigen Assoziation
warm <-> schwul etwas heikel. Zwischen den Zeilen lese ich:
"Mit 'warm' meinen wir nicht 'schwul', wir wollen Dich nicht beleidigen".
Damit sagt ihr implizit, dass es eine Beleidigung ist, jemandem zu sagen,
er sei schwul.

Du hast natürlich auch hier recht, manchmal macht man irgend was ohne sich genaue gedanken darüber zu machen. Werde ich auch bei Gelegenheit ändern.

Nochmals vielen Dank für deine Hilfe.

mfg Maike

[at]

Hallo.

"Kann in Kalifornien einen Mann die Schwester seiner Witwe zu heiraten?"
ist nicht gerade gutes Deutsch...

Naja, stimmt schon, aber ich habe es versucht so zu formulieren, dass ich keine zweite Zeile für die frage benötige. Muss ich mal noch überdenken.

Mein Vorschlag lautet: "Kann ein Mann in Kalifornien die Schwester seiner Witwe heiraten?".
MfG, at

[Thomas Luethi]

Hallo,

Jetzt ist in meiner Tabellenzelle das verlinkte Bild und darüber liegt die ziffer. Alles toll. Nur rechts des Bildes, dort wo ich die xx stehen ist ein Freiraum. Der soll weg.

Vielleicht hilft Dir das weiter:
http://www.tiptom.ch/homepage/faq.html?q=tdimg

Gruesse,

Thomas

[Maximilian Baumgart]

Quick'n dirty:

<a href="#"><img src="$gid/vorschau/$x.jpg" /><span style="position:relative; top:0; left:-1ex">1</span></a>