• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem bei der Quellenangabe eines Bildes

B

blueangel

Neues Mitglied
Hi Leute!
Habe folgendes Problem: Möchte gerne ein Bild haben und exakt darunter eine Quellenangabe angeben. Wenn sich die Bildgrösse ändert (beispielsweise bei kleinerem Browser, sollte folglich die Quellenangabe immer noch unterhalb vom Bild stehen und nicht bsp. 3cm weiter unterhalb. Bin langsam echt am verzweifeln und komme hier nicht weiter. Das habe ich bisher, allerdings funktioniert das mit der Quellenangabe nicht.
Herzlichen Dank!

HTML: 
<table width="35%" cellpadding=10>
  <tr>
  <td align="center"><img border="0" src="../bilder/standord.jpg" width="35%"  style="position:absolute; top:55%; left:55px;"></td>
  </tr>

<tr>
  <td align="center" valign="top"><Quellenangabe></td>
</tr>
</table>
 
Werbung:
Wozu brauchst Du die Tabelle wenn Du doch absolut positionierst?
Wozu brauchst Du überhaupt absolute Positionierung?
Mir scheint, dass Du nicht ganz den Zweck und die Wirkungsweise von absoluter Positionierung verstanden hast.
Und ebenso wenig den Sinn von Tabellen.

Mein Tipp:
Code: 
<div class="pic">
<img src="bild.jpg" alt="" />
<p>Quellenangabe</p>
</div>

Und .pic so positionieren wie Du willst. Dann hängt Bild mit Quellenangabe zusammen in einem Container und lässt sich gemeinsam mit diesem so positionieren wie Du willst.
 
Habe das ganze folgendermassen gemacht, funktioniert aber leider immer noch nicht richtig:
in der css steht das...

HTML: 
div.pic {margin-top:2%; margin-left: 1%; margin-right:0.1%; margin-bottom:2%;}

in der anderen steht das:
HTML: 
<div class="pic">
<img src="../bilder/standord_badniedernau.jpg" style="text-align:left"; width="35%" alt="" />
<p>Quellenangabe</p>
</div>

Bisher ist es so, dass ich einen bestimmten Textabschnitt in der Mitte der Seite haben will (dieser ist zentriert). Links daneben möchte ich das Bild haben, mit der Quellenangabe unterhalb des Bilds. Das Bild ist auch richtig positioniert. Auch die Quellenangabe passt. Leider erscheint der Textabschnitt aber immer unterhalb des Bilds und nicht daneben...
Wäre dankbar um Hilfe bzw. Erklärungen und Vorschläge. Habt bitte Nachsicht mit mir, bin noch ziemlicher Neuling. Danke!
 
Werbung:
Vielleicht so?

Zum Thema Floats:

- Float--die Theorie
- Suchmaschine deiner Wahl

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>demo</title>
        <style type="text/css">

            .pic {
                float: left;
                width: 200px;
                margin-right: 10px;
            }

            .pic img {
                border: 1px solid red;
                width: 198px;
                height: 150px;
                display: block;
            }

            .pic p {
                font-size: 0.75em;
            }

            .special {
                text-align: center;
            }

        </style>
    </head>

    <body>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel pretium arcu. Nullam sollicitudin sodales augue, ac scelerisque purus aliquam ac. Nullam a volutpat urna. Praesent augue nunc, laoreet in semper in, malesuada vitae felis. Nullam ullamcorper, nibh in pellentesque pellentesque, mauris nunc imperdiet purus, eu semper lorem lacus eu diam. Integer malesuada purus eu nisi malesuada laoreet. Sed cursus augue ut ligula eleifend quis condimentum lacus rhoncus. Nulla scelerisque elit rutrum odio dictum sed mattis dui adipiscing. In orci felis, pharetra convallis dignissim sed, facilisis eget sem. Fusce blandit, lectus vel suscipit rhoncus, est lorem vestibulum lorem, et pellentesque erat dolor vel ante. Aenean dapibus aliquet purus vitae egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ut urna lectus. Phasellus at augue ac turpis aliquam congue. Nunc vitae nisi vel nibh accumsan pulvinar et a urna.</p>

        <div class="image-section">
            <div class="pic">
                <img src="" />
                <p>"Roter Rahmen zur Demonstration", Pixel auf Bildschirm, 2010</p>
            </div>

            <p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel pretium arcu. Nullam sollicitudin sodales augue, ac scelerisque purus aliquam ac.</p>

            <div style="clear: both;"></div>
            <!--
                Clearing ist eleganter möglich mit:
                http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
            -->
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel pretium arcu. Nullam sollicitudin sodales augue, ac scelerisque purus aliquam ac. Nullam a volutpat urna. Praesent augue nunc, laoreet in semper in, malesuada vitae felis. Nullam ullamcorper, nibh in pellentesque pellentesque, mauris nunc imperdiet purus, eu semper lorem lacus eu diam. Integer malesuada purus eu nisi malesuada laoreet. Sed cursus augue ut ligula eleifend quis condimentum lacus rhoncus. Nulla scelerisque elit rutrum odio dictum sed mattis dui adipiscing. In orci felis, pharetra convallis dignissim sed, facilisis eget sem. Fusce blandit, lectus vel suscipit rhoncus, est lorem vestibulum lorem, et pellentesque erat dolor vel ante. Aenean dapibus aliquet purus vitae egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ut urna lectus. Phasellus at augue ac turpis aliquam congue. Nunc vitae nisi vel nibh accumsan pulvinar et a urna.</p>

    </body>

</html>
 
Eine Grafik mit einer Beschreibung ist meines Erachtens nach besser als Definitionsliste ausgezeichnet, da diese auch semantisch die Verbindung von Bild zu Grafik herstellt.
HTML: 
<dl>
  <dt><img src="" alt="" title="" /></dt>
  <dd>Beschriftung</dd>
</dl>
Code: 
dl, dt, dd {
  margin: 0;
  padding: 0;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben