✔ Text über Grafik stellen

J

Janis

Mitglied
Hi,

ich möchte gerne ein Text in HTML über die Grafik stellen.

Ich hab versucht mit <div> zu arbeiten und dem entsprechenden Style.

Aber dann rückt die Grafik aus der Tabellenformation aus.
Wie kann ich das Problem angehen?

Gruß Janis
 
Hi,

falls hier anstelle eines Hintergrundbildes ein Grafikelement img zum Einsatz kommt, würde das Modell folgendermaßen lauten:

Code: 
<span class="wrapperBox">
      <img src="pfad/zur/grafik" alt=""><span>Text über Bild</span>
</span>
Code: 
span.wrapperBox img {
display:block;
}
span.wrapperBox span {
position:absolute;
margin-top:-50px; /* Element mit Text wird um 50px nach oben verschoben */
}


mfg Maik
 
Hi,

besitzt deine Seite schon ein Stylesheet zur CSS-Formatierung?

Wenn ja, kannst du den Code dort hinzufügen.

Wenn nicht:

Code: 
<head>

<style type="text/css">
span.wrapperBox img {
display:block;
}
span.wrapperBox span {
position:absolute;
margin-top:-50px; /* Element mit Text wird um 50px nach oben verschoben */
}
</style>

</head>
oder mit einer zentralen CSS-Datei, was bei mehreren Seiten zu empfehlen ist, die mit einem Stylesheet formatiert werden sollen:

Code: 
<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>


Siehe hierzu auch Stylesheets in HTML einbinden.

mfg Maik
 
Hi,

danke für die Hilfe, jedoch steht nach der Änderung immer noch der Text unter der Grafik:

HTML: 
<html>
 <head>
  <title>*****</title>
  <style type="text/css">
<!--
a img {
display:block;
}
-->
span.wrapperBox img {
display:block;
}
span.wrapperBox span {
position:absolute;
margin-top:-50px; /* Element mit Text wird um 50px nach oben verschoben */
}
</style>
 </head>
 <body bgcolor="#000000">
  <table width="800" border="0" cellspacing="0" cellpadding="0" height="234" align="center">
   <tr>
    <td>
     <a href="index.html" target="act">
     <img src="nav/logo.JPG" border="0" width="280" height="234">     
    </td>
    <td>
     <a href="index.html" target="act">
     <img src="act/mitte01.JPG" border="0" width="520" height="234">     
    </td>
   </tr>
  </table>
  <table width="320" border="0" cellspacing="0" cellpadding="0" height="366" align="center">
   <tr>
    <td align="center" valign="top">
      <img src="nav/links.JPG" border="0" width="60" height="366">
    </td>
    <td align="left" valign="top">
      <img src="nav/mitte01.JPG" border="0" width="90" height="71">
     <a href="index.html" target="act">
      <img src="nav/mitte02.JPG" border="0" width="90" height="20">
     <a href="gebr.html" target="act">
      <img src="nav/mitte03.JPG" border="0" width="90" height="20">
     <a href="leis.html" target="act">
      <img src="nav/mitte04.JPG" border="0" width="90" height="20">
     <a href="ueber.html" target="act">
      <img src="nav/mitte05.JPG" border="0" width="90" height="20">
     <a href="anfahrt.html" target="act">
      <img src="nav/mitte06.JPG" border="0" width="90" height="15">
     <a href="galerie.html" target="act">
      <img src="nav/mitte07.JPG" border="0" width="90" height="20">
     <a href="links.html" target="act">
      <img src="nav/mitte08.JPG" border="0" width="90" height="20"></a>
      <img src="nav/mitte09.JPG" border="0" width="90" height="160">
     </td>
     <td align="left" valign="top">
      <img src="nav/rechts.JPG" border="0" width="130" height="366">
     </td>
     <td align="left" valign="top">
<span class="wrapperBox">
      <img src="act/mitte02.JPG" border="0" width="520" height="366" alt=""><span>Text über Bild</span>
</span>
     </td>
    </tr>
  </table>
 </body>
</html>
 
In welchem Browser tritt denn bei dir der Fehler auf?

Ich hab deinen Quellcode eben in den folgenden Browsern erfolgreich getestet:

  • FF 2.0.0.18 + 3.0.4
  • IE 6 + 7
  • Mozilla 1.8b
  • Netscape 9.0
  • Opera 9.6
  • Safari 3.1.2
  • Seamonkey 1.1.12

Ansonsten versuch es mal hiermit:

Code: 
<style type="text/css">
<!--
a img {
display:block;
}
/*-->*/ /* gehört ans Ende des Stylesheets */
span.wrapperBox img {
display:block;
}
span.wrapperBox span {
position:absolute;
margin-top:-50px; /* Element mit Text wird um 50px nach oben verschoben */
}
-->
</style>


mfg Maik
 
Hi,

bei mir tritt der Fehler in jedem Browser auf Mozilla und Iexplorer..

So hab ichs jetzt stehen.

Gruß
 
Zuletzt bearbeitet:
Und so sieht's bei mir in meinen eben genannten Browsern aus - repräsentativ poste ich hier den FF- und IE-Screenshot:

ff3.0.4.jpg ie7.jpg

(links: FF 3.0.4, rechts: IE7)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück