• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild soll auf HP mitlaufen beim Scrollen

Suicide.Darling

Suicide.Darling

Neues Mitglied
Hallo zusammen :)
ich bin gerade auf dieses Forum gestoßen und erhoffe mir Hilfe bei einem Problem o.O

Und zwar kreiere ich gerade ein Layout für den Blog meines Freundes. Da ich HTML-Technisch nicht so häufig etwas tue, ist das zu Beginn immer eine große Werkelei, nimmt dann allerdings doch normalerweise die gewünschten Formen an. ;)

Jedenfalls ist das Layout nun soweit fertig - da kam mir dummerweise noch eine Idee, dich ich bisher nicht umsetzen konnte.

Vorab: Dies ist die Site mit dem Layout azreal - @ myblog.de

So, rechts ist nun ein Image mit einer Schrift darauf. Theoretisch gefällt es mir (und meinem Freund) so sehr gut. Allerdings kam mir nun die Idee, dass diese Bilddatei rechts beim Scrollen doch mitlaufen könnte. Es handelt sich dabei nämlich um den Titel des ganzen.

Ich habe schon entsetzliche viele Threads zu dem Thema gelesen und HTML-Seiten mit Tips und Tricks durchgewuselt, eigene 'Experimente' angestellt, aber nichts erzielte die richtige Wirkung.

Was ich immer wieder fand, waren Hinweise darauf, wie man beim Hintergrund diesen Effekt bekommt - doch auch damit konnte ich keinen vernünftig angepassten Code hervorbringen.

Da ich diese Idee zu gerne umsetzen würde, hoffe ich nun auf hilfe von euch. :)

Falls noch Fragen bzgl. dessen oder meinem chaotischen HTML-Part offen sind, immer her damit :D

LG, Svea
 
Oh, was vllt. noch hilfreich wäre:

<div align="left"
style="solid; background:transparent; border-collapse: collapse; border: 0px #000000 solid;width:240px; height:55px; position:absolute; left:975px; top:120px">

{PLACE_IMAGE(titel.jpg)}

</div>
Zum Vergrößern anklicken....

Auf diese Weise habe ich das Bild eingefügt, um es frei auf dem Layout bewegen zu können. In diesem Teil habe ich auch viele Tests gemacht mit anderen Angaben bei Style, zusätzliches einfügen wie 'fixed', etc. (ähnlich wie ich es beim Hintegrrund machte) und auch das Bild direkt in den <div.......>-Code mit eingegliedert.
Ohne richtiges Ergebnis. :?
 
Suicide.Darling schrieb:
Da ich HTML-Technisch nicht so häufig etwas tue, ist das zu Beginn immer eine große Werkelei, nimmt dann allerdings doch normalerweise die gewünschten Formen an. ;)
Zum Vergrößern anklicken....
Nein, tut´s nicht: Validator

Suicide.Darling schrieb:
rechts ist nun ein Image mit einer Schrift darauf. (...) Allerdings kam mir nun die Idee, dass diese Bilddatei rechts beim Scrollen doch mitlaufen könnte. Es handelt sich dabei nämlich um den Titel des ganzen.
Zum Vergrößern anklicken....
Die Idee mit dem Hintergrund war ok: selfhtml: Background-Image, attachment
Das ganze wird in den Head, zwischen "style type="text/css" und "/style" geschrieben, besser jedoch in eine externe css-Datei (selfhtml: css einbinden)
 
Hey, danke schonmal :P

na, auf fehlersuche habe ich mich noch nicht begeben - lohnt sich meines erachtens noch nicht, da ich ja doch immer noch einiges umänder. immerhin funktioniert das design soweit schonmal :D aber die seite hat was o_O kannte ich noch garnicht.

also ich denke zwar, dass ich nun weiß welchen code ich nehmen muss bzw. welche bezeichnung, benutzen - aber egal wie ich es drehe und wende es bleibt an ein und der selben stelle kleben o_O

div.bgscroll {
margin:20px 20px 20px 250px; width:35em; border:1px solid red;
background-image:url(background1.gif); background-repeat:no-repeat; background-position:center center;
background-attachment:scroll;
}

div.bgfixed {
margin:20px 20px 20px 250px; border:1px solid red;
background-image:url(background5.gif); background-repeat:no-repeat; background-position:center center;
background-attachment:fixed;
}
</style>
</head><body>

<div class="bgscroll">
<h1>viel Text <!--usw.--> <code>background-attachment:scroll</code></h1>
</div>

<div class="bgfixed">
<h1>viel Text <!--usw.--> <code>background-attachment:fixed</code></h1>
</div>

</body></html>
Zum Vergrößern anklicken....

daraus benötige ich nun doch nur folgendes:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>background-attachment</title>
<style type="text/css">

div.bgfixed {
margin:20px 20px 20px 250px; border:1px solid red;
background-image:url(background5.gif); background-repeat:no-repeat; background-position:center center;
background-attachment:fixed;
}
</style>
</head><body>

<div class="bgfixed">
<h1>viel Text <!--usw.--> <code>background-attachment:fixed</code></h1>
</div>

</body></html>
Zum Vergrößern anklicken....

da mein html mit head, title, style beginnt habe ich dies nun aus dem code ebenfalls entfernt und versucht es zwischendie ursprünglichen angaben im html einzufügen:

<head>
<title>Drachenwelt</title>
<style type="text/css">
body, div, td {
{PLACE_POWEREDBY}

----> HIER <----

(...)

</style>
Zum Vergrößern anklicken....

diese h1 angabe + <code>..</code> irritiert mich allerdings; er schreibt diesen part aus, statt irgendwas umzusetzen und mit h1 weiß ich nicht wie ich weiter verfahren müsste o0 .... sollte h1 alle weiteren einstellungen umschließen und erst zum schluss wieder beendet werden? ... ich glaub mir komm die ersten grauen haare -.-
 
Du könntest dem Bild position: fixed; left: 970px; top: 200px; oder so setzen. Nur scheint das Bild dann bei einer Viewportgröße von < 970px überhaupt nicht zu sehen zu sein (auch beim horizontalen Scrollen nicht), da es eben erst beim 970. Pixel des Viewports beginnt. (Bin mir nicht absolut sicher, dass der Satz stimmt.) Dasselbe Problem scheint bei background-attachment: fixed; als Hintergrundbild im body zu bestehen.

Der einzige Workaround, der mit einfällt, ist position: fixed; right: 0; für das Bild und einen höheren z-index für die Elemente der Restseite.

- SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Dann müsste sich das Bild bei einer Viewportgröße von < 970px hinter die Restseite schieben und bei einer größeren Viewportgröße zu sehen sein. So sieht zumindest die Theorie aus.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben