kostenloser Webspace werbefrei: lima-city

Gif-Bild über Text legen, ohne dass dieser verrutscht

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   das-koenigreich

   das-koenigreich hat kostenlosen Webspace.

   14:22, 19.7.2009

   Der Titel sagt eigendlich schon alles, ich möchte ein Gif-tag/bild">Bild über einen Text legen. Teilweise ist das Gif-Bild (Animation) transparent, dann soll man den Text durchsehen können.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. w******s

   15:06, 19.7.2009

   HTML
   

   <span class="bild"><span class="text">HIER STEHT TEXT</span></span>

   CSS
   

   .img {background: url(bild.gif) no-repeat center; display:block;}
   .text {display:block; width:100px; height:100px;}

   In diese Richtung sollte es gehn. Obwohl es sicherlich noch mehr Möglichkeiten gibt. Je nachdem was für eine Bedeutung das Bild hat, sollte es vllt. mittels des img-Tag realisiert werden.

4. snoo3

   

   snoo3 hat kostenlosen Webspace.

   15:10, 19.7.2009

   das-koenigreich schrieb: Der Titel sagt eigendlich schon alles, ich möchte ein Gif-Bild über einen Text legen. Teilweise ist das Gif-Bild (Animation) transparent, dann soll man den Text durchsehen können.

   
   
   Hi
   Das ist eigentlich ganz einfach, dazu brauchst du nur etwas CSS. Hier mal der Code:
   

   <img src="pfad" style="position: absolute; top: 20px; left: 50px;" />
   <span>Hier steht dein Text .......</span>

   
   
   Position: absolute bewirkt, das das Bild in den Vordergrund kommt und du es positionieren kannst. Mit top: und left: bestimmst du die Entfernung vom oberen und linken seitenrand. Musst halt ein bischen ausprobieren, damit es schön über dem text liegt.
   
   Hoffe ich konnte dir helfen
5. Autor dieses Themas

   das-koenigreich

   das-koenigreich hat kostenlosen Webspace.

   15:23, 19.7.2009

   Muss man das mit Class machen, oder geht ID auch? Kann man für ein Objekt gleichzeitig eine Clss und eine ID verwenden?

6. snoo3

   

   snoo3 hat kostenlosen Webspace.

   15:28, 19.7.2009

   das-koenigreich schrieb:
   Muss man das mit Class machen, oder geht ID auch? Kann man für ein Objekt gleichzeitig eine Clss und eine ID verwenden?
   

   
   
   Achtung die Variante von werktags legt das bild in den hintergrund und nicht vor den text wie du es möchtest. Aber ob du class oder id nimmst spielt selbstverständlich keine rolle.

7. w******s

   16:08, 19.7.2009

   snoo3 schrieb: Achtung die Variante von werktags legt das bild in den hintergrund und nicht vor den text wie du es möchtest.

   
   Ja, sorry. Das war mein Fehler. Hier ne Berichtigung. Es macht Sinn die zwei Elemente zu verschachteln, ob das zwei span oder span und img sind, ist dabei egal:
   

   <span class="text">Hier steht der Text<span class="img"></span></span>

   
   Oben hab ich es falsch angeordnet, zuerst Text, dann Bild!
   
   

   .img {background: url(bild.gif) no-repeat center; display:block; position:absolute; top:0;left:0; height:100px; width:100px;}
   .text {display:block; width:100px; height:100px; position:relative;}

   
   Es muss eine absolute Positionierung verwendet werden, damit man trotzdem relativ bleibt zu anderen Objekten, das obige verschachtelte Element relativ.
   
   

   das-koenigreich schrieb: Muss man das mit Class machen, oder geht ID auch? Kann man für ein Objekt gleichzeitig eine Clss und eine ID verwenden?

   
   Ne, Klasse oder ID ist egal. Falls du dieselbe Formatierung oft auf einer Seite gebrauchst, dann wohl Klasse.
   Ja, Klasse und ID zusammen sind kein Problem.
   Bsp:

   <div id="wrap" class="kontaktseite"><div>

   
   Möglich ist auch mehrere Klassen zu verwenden:
   Bsp:

   <div class="kontaktseite rot"><div>

8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?