Bildunterschrift positionieren

[Kriegr]

blubb

 

[Kriegr]

Hallo!

Ich möchte unterhalb meines Bildes eine Bildunterschrift positionieren und habe schon einiges ausprobiert (<div>, <span> und <p>), es soll ohne Tabelle gehen.

Hier ein Auszug aus meiner XHTML-Datei:

<div>
<a href="javascript:OpenNewWindow('grafiken/pzkpfw1/pz1175.jpg',366,235)">
<img title="Führungsfahrzeug Pzkpfw I" id="links"
 src="grafiken/pzkpfw1/pz1175mini.jpg" width="122" height="78"
 alt="Führungsfahrzeug Pzkpfw I" /></a>
<div id="foto2">Bildunterschrift</div>
<p>Viel Text, der rechts und unterhalb des Bildes samt seiner Bildunterschrift erscheinen soll.</p>
</div>

und hier der Auszug dazu aus meiner css-Datei:

div { font-family: Arial,Verdana,Tahoma,sans-serif;
      font-size: small;
      line-height: 140%;
      text-decoration: none;
      border-width: 0;
      border-style: solid;
      width: 50%;
      margin-left: 26%;
      background-image:url(../grafiken/test.gif);
      background-repeat: no-repeat;
      background-position: bottom right;}

div#foto2 {
      position: relative;
      top: auto;
      margin-left: 0px;
      float: left;
      font-size: x-small;
      line-height: 100%;
      border-style: solid;
      border-width: 1px;
      border-color: #8fbbd4;
      width: 120px;
      background-image:url();
      background-color: #dcdcdc;
}

Hat jemand eine Idee?

 

[pit-r]

Moin!

<div>
<div><a href="grafiken/pzkpfw1/pz1175.jpg" onclick="OpenNewWindow(this.href,366,235);return false"><img title="Führungsfahrzeug Pzkpfw I" id="links" src="grafiken/pzkpfw1/pz1175mini.jpg" width="122" height="78" alt="Führungsfahrzeug Pzkpfw I" /></a><div>
<div id="foto2">Bildunterschrift</div>
</div>

Ahoi - Pit

 

[dkdenz]

<div>
<a href="javascript:OpenNewWindow('grafiken/pzkpfw1/pz1175.jpg',366,235)">
<img title="Führungsfahrzeug Pzkpfw I" id="links"
 src="grafiken/pzkpfw1/pz1175mini.jpg" width="122" height="78"
 alt="Führungsfahrzeug Pzkpfw I" /></a>
<div id="foto2">Bildunterschrift</div>

Also, Dir fehlt ein schliessendes </div>
Probiere es mal so:

<div>
<a href="javascript:OpenNewWindow('grafiken/pzkpfw1/pz1175.jpg',366,235)">
<img title="Führungsfahrzeug Pzkpfw I" id="links"
 src="grafiken/pzkpfw1/pz1175mini.jpg" width="122" height="78"
 alt="Führungsfahrzeug Pzkpfw I" /></a><br />
[B]<span id="foto2">Bildunterschrift</span>[/B]</div>

 

[Kriegr]

Hi!

Ich bin mir nicht sicher, ob ich mich verständlich ausgedrückt habe...

Die Bildunterschrift soll unter das Bild, dass zunächst auf der Seite auftaucht. Der hyperlink hat mit dem Problem nichts zu tun.
Es soll im Endeffekt so aussehen wie hier: Aktueller Zustand (mit Tabellen).

Kann bitte jemand den ersten Beitrag löschen? Ich habe vorhin ausversehen zitiert statt editiert.

 

[Kriegr]

Hallo!

Danke zunächst mal für das 'Löschen'.

Ich habe mal das Problem hochgeladen.
Ich habe es nun mit <span> und <br /> probiert (hatte ich vorher auch schon, aber egal...).

 

[dkdenz]

Habe mal mit der Developer-Toolbar rumgepfuscht.
Dabei fiel mir auf, das wenn ich hier:

img.links {
    float:left;
    margin-right: 10px;}

das float:left rausnehme, dann rutscht die 'Bildunterschrift', wie gewünscht, unter das Bild...

 

[Kriegr]

Jau, prima! Danke!

Ist nur noch das Problem, wie ich den Text noch rechts neben das Bild und die Bildunterschrift bekomme.

 

[dkdenz]

Da wirst Du um das img ein div bauen müssen.
Das div dann mit float:left belegen.