Schwebende Grafik

[Bastel-Dirk]

Hallo
ich habe bereits schon gesucht aber nichts passendes zu meiner Suche gefunden (vielleicht falsches Suchwort)

Ich möchte gerne eine Schwebende Grafik am oberen rechten Bildschirmrand mit einen Link
Grafik soll immer dort stehen bleiben auch beim scrollen

wie und wo muss ich sowas einbinden/einfügen

sollte das schon gelöst sein bitte einen Link zum entsprechenden Thema
ansonsten bin ich über jeden Tipp und jeder Hilfestellung dankbar...

Linkback: https://www.modified-shop.org/forum/index.php?topic=41707.0

[RobtheTop]

Hi.
Ich kann dir leider keine genaue Anleitung dazu liefern, aber wenn du die Grafik auf jeder Seite haben willst, dann würde ich persönlich in die index.html einen Container mit der entsprechenden Grafik packen und per CSS die Position auf fixed stellen.

Also ungefähr so:

Code: XML  [Auswählen]

<div style="neue_grafik"> hier die Grafik mit Link einbinden </div>

Und dann per CSS:

Code: XML  [Auswählen]

.neue_grafik{
position: fixed;
}
 

Versuch das Mal. Weiß nicht ob das so ist wie du das haben willst, aber so würde ich es erstmal versuchen.

[Bastel-Dirk]

Alles klar...
werde. Mein Glück mal probieren...
melde. mich dann ob es geklappt hat...

[dasDirk]

klappt an sich schon...
allerdings verschiebt es das gesamte Template nach unten....

Die Grafik sollte über dem Template "fest" schweben....

[Q]

Glaub da gibt's noch z-index dafür. Für CSS gibt es im Netz sehr viele Infos mit Beispielen

[karsta.de]

Versuche es mal so:
CSS (hier die Position, Höhe und Weite festlegen):

Code: CSS  [Auswählen]

#fixedbox{position:fixed;top:50px;right:30px;width:80px;height:161px;z-index:10;background:#900;}
#fixedbox:hover{background:#f00;}
.textbox{color:#fff;padding:5px;}
 

HTML-Einbindung:

Code: PHP  [Auswählen]

<div id="fixedbox">
<div class="textbox">texte texte</div>
</div>
 

BG Karsta

[dasDirk]

danke...
hat super geklappt....

Super ... 
Forum kann ich Weiterempfehlen 

[dasDirk]

Problem/Anfrage wurde gelöst....

D A N K E

[little-key]

Ähnlch mit einem Button als Kontakt-Laufbutton.
CSS hier absichtlich nicht ausgelagert.

Code: PHP  [Auswählen]

<div style="position:fixed; right:-10px; top:100px;">
        <a href="shop_content.php?coID=7">
                <img src="images/laufbutton_p.png"
                onmouseover="this.src='images/laufbutton_a.png'"
                onmouseout="this.src='images/laufbutton_p.png'"
                style="width:60px; height:130px; border:0;" alt="Contact us">
        </a>
</div>

edit: right:-10px; weil erschien mir zu breit, sonst 0

Und die Button dazu:

[awids]

Selbst, wenn wir mal beisieite lassen, dass du ein Image einbindest, obwohl es auch mögliche Lösungen per CSS (i. V. m. Font-Awesome) gibt und Inline-Styles verwendest, schreibt man es immer noch so:

Code: PHP  [Auswählen]

<div style="position:fixed; right:-10px; top:100px;">
   <a href="{$smarty.const.FILENAME_CONTENT|xtc_href_link:'coID=7'}">
      ...
   </a>
</div>

[karsta.de]

@little-key

Verstehe nicht was hier der Vorteil von inline-css sein soll.

BG Karsta

[little-key]

Ok, eines dazu gelernt...

Vorteil? Soll kein Vorteil sein nur, dass man wegen einem Button nicht mehrere Dateien anfassen muss.
Würde dies anderweitig noch nutzen, dann sehe ich Sinn darin.
Ansonsten lagere ich die CSS auch aus.