Gif-Bild über Text legen, ohne dass dieser verrutscht
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
achtung
animation
bild
blocken
code
display
egal code
hintergrund
legen
machen
obige verschachtelte element
objekt
position
positionieren
span
tag
text
url
verwenden
vordergrund
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
HTML
CSS<span class="bild"><span class="text">HIER STEHT TEXT</span></span>
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..img {background: url(bild.gif) no-repeat center; display:block;} .text {display:block; width:100px; height:100px;} -
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 -
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. -
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> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
