| Autor |
Nachricht |
-
uds-photographics
|
 22.05.2013 um 14:14 (UTC)
Titel: Vordergrundbild |
|
|
Hallo zusammen,
wie der Titel schon sagt, stell ich mir grad die Frage , ob man ein "Vordergrundbild" oder "Vordergrund-Gif" via CSS einpflegen kann !
Also ein Bild/Gif was über der eigentlichen Seite liegt !
ist das möglich?, ... wenn ja, wie wirds gemacht ?
Bitte um Hilfe !
Danke !
Gruß Uwe
Zuletzt bearbeitet von uds-photographics am 22.05.2013, 15:20, insgesamt einmal bearbeitet
|
|
|
↑
|
|
 |
-
homepage-bekannt-machen
Wohnort: Köln
|
22.05.2013 um 15:09 (UTC)
Titel: Re: Vordergrundbild |
|
|
uds-photographics hat Folgendes geschrieben:
Also ein Bild/Gif was über der eigentlichen Seite liegt !
Was meinst du damit genau? Willst du den Seiteninhalt ausblenden? ______________  |
|
|
↑
|
|
|
-
uds-photographics
|
22.05.2013 um 15:16 (UTC)
Titel: Re: Vordergrundbild |
|
|
homepage-bekannt-machen hat Folgendes geschrieben: uds-photographics hat Folgendes geschrieben:
Also ein Bild/Gif was über der eigentlichen Seite liegt !
Was meinst du damit genau? Willst du den Seiteninhalt ausblenden?
.... nein, nicht ausblenden !
ich möchte im Grunde ein Gif über die Seite legen ! ... also das nach durchlauf des Gifs erst die Seite zu sehen ist !
für mich stellt sich halt die Frage ob das beim "IceBlue-Design" via CSS überhaupt machbar ist und wie der Code dann aussehen würde ! |
|
|
↑
|
|
|
|
|
22.05.2013 um 16:17 (UTC)
Titel: |
|
|
Heyho,
na klar ist das möglich, Du müsstest dafür folgenden Code in das Feld "Text über dem Design" einfügen:
Code: <style type="text/css">
#layer{
position: absolute;
left: 50%;
margin-left: -100px;
top: 50px;
width: 300px;
height: 100px;
background-image: url(http://urlzudeinergifdatei.gif);
z-index: 999999999999999;
}
</style>
<div id="layer"></div>
Bei dem CSS Teil sind jetzt nur Beispielwerte eingetragen, das musst du deinen Anforderungen noch anpassen. Entscheidend ist viel mehr der "z-index". Das arbeitet quasi als z Achse in einem 3 Dimensionalem Koordinaten-System. Also um so höher die Zahl, um so höher die Ebene auf der die DIV-Box liegt.
Ungetestet, sollte aber trotzdem funktionieren  .
Beste Grüße,
Mats
Zuletzt bearbeitet von matsk am 22.05.2013, 17:18, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
-
uds-photographics
|
22.05.2013 um 18:28 (UTC)
Titel: |
|
|
matsk hat Folgendes geschrieben: Heyho,
na klar ist das möglich, Du müsstest dafür folgenden Code in das Feld "Text über dem Design" einfügen:
Code: <style type="text/css">
#layer{
position: absolute;
left: 50%;
margin-left: -100px;
top: 50px;
width: 300px;
height: 100px;
background-image: url(http://urlzudeinergifdatei.gif);
z-index: 999999999999999;
}
</style>
<div id="layer"></div>
Bei dem CSS Teil sind jetzt nur Beispielwerte eingetragen, das musst du deinen Anforderungen noch anpassen. Entscheidend ist viel mehr der "z-index". Das arbeitet quasi als z Achse in einem 3 Dimensionalem Koordinaten-System. Also um so höher die Zahl, um so höher die Ebene auf der die DIV-Box liegt.
Ungetestet, sollte aber trotzdem funktionieren .
Beste Grüße,
Mats
aha, super, werd ich bei nächster Gelegenheit direkt probieren !
Danke für die rasche Info !
Gruß Uwe |
|
|
↑
|
|
|
|
|
22.05.2013 um 19:08 (UTC)
Titel: |
|
|
Wunderbar, vielen Dank für die Rück-Info!
Beste Grüße,
Mats
Zuletzt bearbeitet von matsk am 22.05.2013, 20:08, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
uds-photographics
|
22.05.2013 um 19:17 (UTC)
Titel: |
|
|
matsk hat Folgendes geschrieben: Wunderbar, vielen Dank für die Rück-Info!
Beste Grüße,
Mats
will ja nicht nerven !
hab grad mal probiert !
jetzt ist natürlich folgendes Problem :
wenn das Bild darüber liegt, kann man natürlich nichts mehr anklicken, gibts da auch noch Abhilfe ? |
|
|
↑
|
|
|
|
|
22.05.2013 um 19:24 (UTC)
Titel: DIV ausblenden - Javascript |
|
|
Du nervst nicht, keine Sorge !
Ich habe eben mal ein kleines JS-Script gebastelt, dass eine DIV-Box nach X Sekunden ausblendet. (Quasi, wenn deine GIF-Animation durchgelaufen ist)
Einfach unter deinen aktuellen Code noch den folgenden einfügen:
Zitat: <script type="text/javascript">
function hide () {
document.getElementById("layer").style.display="none";
}
window.setTimeout("hide()", 5000);
</script>
An die blaue Stelle kommt die ID deiner CSS-Box (habe ich schon eingefügt). Und an die rote Stelle kommt in Millisekunden, wann deine DIV-Box wieder ausgeblendet werden soll.
Beste Grüße,
Mats
Zuletzt bearbeitet von matsk am 22.05.2013, 20:57, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
uds-photographics
|
22.05.2013 um 19:42 (UTC)
Titel: Re: DIV ausblenden - Javascript |
|
|
matsk hat Folgendes geschrieben: Du nervst nicht, keine Sorge !
Ich habe eben mal ein kleines JS-Script gebastelt, dass eine DIV-Box nach X Sekunden ausblendet. (Quasi, wenn deine GIF-Animation durchgelaufen ist)
Einfach unter deinen aktuellen Code noch den folgenden einfügen:
Zitat: <script type="text/javascript">
function hide () {
document.getElementById("layer").style.display="none";
}
//window.setTimeout("hide()", 5000);
</script>
An die blaue Stelle kommt die ID deiner CSS-Box (habe ich schon eingefügt). Und an die rote Stelle kommt in Millisekunden, wann deine DIV-Box wieder ausgeblendet werden soll.
Beste Grüße,
Mats
sorry .... sicher das es so korrekt ist ?
fluppt irgend wie nicht !
bin halt kein Experte das ich selber drauf kommen könnte ! |
|
|
↑
|
|
|
|
|
22.05.2013 um 19:57 (UTC)
Titel: |
|
|
Upps, da war ein kleiner Fehler drin! Habe das oben mal korrigiert !
Beste Grüße,
Mats |
|
|
↑
|
|
|
-
uds-photographics
|
22.05.2013 um 20:10 (UTC)
Titel: |
|
|
matsk hat Folgendes geschrieben: Upps, da war ein kleiner Fehler drin! Habe das oben mal korrigiert !
Beste Grüße,
Mats
fantastisch !!!!
das mit der Klammer kam mir auch merkwürdig vor !
ich bin begeistert !
Das Gerüst steht !
jetzt kann ich mich in aller Ruhe an mein "Gimmik" begeben !
super, hast mir echt weiter geholfen !!!!
Danke für deine Zeit !
Gruß Uwe |
|
|
↑
|
|
|
|
|
22.05.2013 um 20:17 (UTC)
Titel: |
|
|
Alles klar! Danke für deine Rückmeldung und gutes gelingen!
Beste Grüße,
Mats
Zuletzt bearbeitet von matsk am 22.05.2013, 21:19, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
.