wie bekomme ich ein Text über ein bild gelegt mit HTML?

Begonnen von Bilox, 19. November 2007, 16:10:31 Uhr

⏪ vorheriges - nächstes ⏩

0 Mitglieder und 1 Gast betrachten dieses Thema.

Bilox

19. November 2007, 16:10:31 Uhr Letzte Bearbeitung: 19. November 2007, 17:32:18 Uhr von Bilox
hi...

ja wie mein titel schon sagt...

wie bekomme ich ein Text über ein bild gelegt mit HTML?


genau gesagt ich möchte einen leeren button  in ein eine HP einfügen und diesen aber öfterverwenden.

mit dem atribut alt="bildname" sehe ich ja was eigentlich da sein sollte wenn das image nicht angezeigt werden kann,
aber wie kann ich den text immer sehen auch wen das image zu sehen ist.
welchen code brauche ich?

schonmal ein großeß dankeschön vorab
Bilox@Andi
Schreibfehler sind gewollt, dürfen weder korrigiert noch berichtigt werden und gehören zum Cpoyright des Verfassers!

Silent Force

Evtl kannst du damit etwas rumspielen:

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image

wie soll das ganze dann aussehen? Ein Text mitten durch das Bild, oder am unteren Rand, oder ab der Unterkante?
Mit dem leeren Button verstehe ich dich nicht so ganz. Meinst du eine NaviLeiste, mit immer demselben Button, nur der Text darauf ist verschieden?

Gruß sf

Bilox

hallo... :)

ja also genau meine ich soetwas wie eine navileiste, mit ein und dem selben leeren button.
nicht als background da der"button ja noch verlinkt(<a href= ...)werden.
ich meine ganz genau erklärt, dass z.b. so:

<table>
       <tr>
           <td>
<a href="news.html" title="News"><img alt="News" src="news.jpg" border="0" width="140" height="15" name="news"></a>
           </td>
       </tr>
</table>


... und genau an diese stelle wo das .jpg ist soll, wie hier passen würde, "News" stehen.
nicht links, rechts, oben oder unten angeordnet.

Schreibfehler sind gewollt, dürfen weder korrigiert noch berichtigt werden und gehören zum Cpoyright des Verfassers!

Silent Force

20. November 2007, 20:20:35 Uhr #3 Letzte Bearbeitung: 20. November 2007, 21:43:11 Uhr von Silent Force
dein <a href=""> kannst du mit  verweissensitiven Grafiken machen. wart kurz, ich erstell dir n Beispiel

seh grad, das wird n bissl schwierig, ich versuchs anders ;)

Bilox

Schreibfehler sind gewollt, dürfen weder korrigiert noch berichtigt werden und gehören zum Cpoyright des Verfassers!

Silent Force

20. November 2007, 22:53:19 Uhr #5 Letzte Bearbeitung: 20. November 2007, 22:55:48 Uhr von Silent Force
so, endlich fertig.

<!-- Navileiste -->

<html>
<head>
  <title>Navileiste</title>
  <style type="text/css">

    <!--- Einstellung der Linkeigenschaften -->
    a:link { color:#2F1ECC; text-decoration:none; }
    a:visited { color:2F1ECC; text-decoration:none; }
    a:focus { color:red; text-decoration:underline; }
    a:hover { color:green; text-decoration:none; }
    a:active { color:lime; text-decoration:underline; }

    <!-- Eigenschaften des bodys und des divs, ersetzt beim body überall die Tags.
    Da es aber nicht so dolle funktioniert hat, sind dieselben tags und noch mehr
    nochmal im body aufgeführt. Probeweise kannste aber im body mal weglöschen.
    Manchmal hats geklappt -->

    body { margin:0; padding:0; height:1500px; }
    div { border:1px solid #888; }

    <!-- Vordefinierung der Layer. absolute [gemessen von links oben],
    top [Abstand oben] left [Abstand links] width [Containerbreite]
    height [Containerhöhe] -->

    #a1 { position:absolute; top:16px; left:59px; width:20px; height:25px;
         border:0 }
    #a2 { position:absolute; top:16px; left:203px; width:20px; height:25px;
         border:0 }
    #a3 { position:absolute; top:16px; left:350px; width:20px; height:25px;
         border:0 }
    #a4 { position:absolute; top:16px; left:488px; width:20px; height:25px;
          border:0 }
    #a5 { position:absolute; top:16px; left:629px; width:20px; height:25px;
          border:0 }
    #a6 { position:absolute; top:16px; left:780px; width:20px; height:25px;
          border:0 }

   </style

  </head>

<body >

  <!-- Einsetzen der Layer, ggf mit Links-->
  <div id="a1"><a href="http://www.hardwareecke.de">Home</a></div>
  <div id="a2"><a href="http://www.hardwareecke.de/News">News</a></div>
  <div id="a3"><a href="http://www.hardwareecke.de/testberichte/">Tests</a></div>
  <div id="a4"><a href="http://www.hardwareecke.de/berichte/">Berichte</a></a></div>
  <div id="a5"><a href="http://www.hardwareecke.de/softwareecke/">Software</a></div>
  <div id="a6"><a href="http://www.hwe-forum.de/">Forum</a></div>



  <table bgcolor="#ECFBE8" >
   <tr>
    <td>
     <table border="0">

      <tr height="50">

       <td width="140">
        <a href="http://www.hardwareecke.de"><img src="http://www.bilder-space.de/thumb/QJdvrGZkhb76QyS.jpg" border="0"></a>
       </td>
       <td width="140">
        <a href="http://www.hardwareecke.de/News"><img src="http://www.bilder-space.de/thumb/QJdvrGZkhb76QyS.jpg" border="0"></a>
       </td>
       <td width="140">
        <a href="http://www.hardwareecke.de/testberichte"><img src="http://www.bilder-space.de/thumb/QJdvrGZkhb76QyS.jpg" border="0"></a>
       </td>
       <td width="140">
        <a href="http://www.hardwareecke.de/berichte"><img src="http://www.bilder-space.de/thumb/QJdvrGZkhb76QyS.jpg" border="0"></a>
       </td>
       <td width="140">
        <a href="http://www.hardwareecke.de/softwareecke"><img src="http://www.bilder-space.de/thumb/QJdvrGZkhb76QyS.jpg" border="0"></a>
       </td>
       <td width="140">
        <a href="http://www.hwe-forum.de/"><img src="http://www.bilder-space.de/thumb/QJdvrGZkhb76QyS.jpg" border="0"></a>
       </td>
     </tr>
    </table>
    <table bgcolor="#ECFBE8" border="0">
     <tr height="120">
      <td><br>
      </td>
     </tr>
      <tr>
       <td>
        <font face="Arial" size="4">So sollte das gehen. Ist zwar ein bisschen kompliziert, und sieht viel aus, Im Grunde recht einfach. Glaub net, dass es da noch ne Alternative dazu gibt im HTML ohne Programm..
        </font>
       </td>
      </tr>
      <tr height="400">
       <td><br>
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
</body>
</html>


nicht erschrecken :P
oder wahlweise noch als fertige *.txt im Anhang. Runterladen und in *.html umbennen. fertig

Bilox

hey sry das so spät nur hatte kaum zeit die tage...

super script ...soetwas meinte ich.
ich denke da habe ich wohl zu umständlich gedacht, ziemlich einfach wenn man durchblickt hat nur n paar stunden gedauert ;D
danke dir nocheinmal

Schreibfehler sind gewollt, dürfen weder korrigiert noch berichtigt werden und gehören zum Cpoyright des Verfassers!

Silent Force