"Ecken-Schnipsel" einfügen (z.B. Werbung etc.)

rftc

Floating Grafik ("Ecken-Schnipsel") einfügen (z.B. Werbung etc.)

Hallo ihr WP-Jünger!

Ich suche verzweifelt nach einem Thread, der die Einbindung einer Grafik in der Ecke des Browserfensters erläutert. Leider weiss ich nicht, wie man dies nennt, daher war meine Suche erfolglos :-(

Was ich mir vorstelle: in der rechten unteren Ecke meines Blogs (bzw. in der Ecke des Browserfensters) soll eine Grafik (z.B. in Form eines 45° geneigten Bandes) permanent angezeigt werden und evtl. auch verlinkt werden können. Weiss jemand, wie man sowas einbindet? irgendein float div container im main index file oder so?

Würde mich freuen, wenn einer, der sowas bei sich auf dem Blog hat, mir hier weiterhelfen könnte...

Vielen Dank und Gruss

Livio

-----------
[size=8]Theme: Kubrick 2.0.2

[/SIZE]

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

cb2206

Hi rftc,

Schau dir mal den Code des Plugins Too Cool for IE an. Das macht genau das was du erreichen möchtest.

Leider arbeitet es mit anderen Plugins/Erweiterungen, die auch solche Overlays benutzen nicht so gut zusammen. (z.B. mit dem Lightbox Plugin)

Viele Grüße,
Christian

Olafb

Ich würd ganz am Ende des Codes (footer.php) vor </body> einfügen:

HTML

<div id="sticker">
  <a href="LINK">
    <img src="pfad/zum/bild.gif" alt="" width="BREITE" height="HÖHE" />
  </a>
</div>

dann in die CSS

HTML

#sticker{
position:fixed;
top:0;
right:0;
}
#sticker a{
bla:blubb;
}
#sticker img{
bluff:pleng;
}
* html #sticker{
position:absolute;
}

Alles anzeigen

aus'm Kopf, also mit Vorsicht zu genießen.

punctilio

Meinst du sowas in der Art?

Olafb

Zitat von punctilio

Meinst du sowas in der Art?

:mrgreen: das ist ja mal ein schlechtes Beispiel :-D

rftc

:-) ah jetzt geht was :-)

@punctillo: ähm...Ja! sowas in der Art, aber es sollte eigentlich immer in der Ecke bleiben, d.h. nicht fix am oberen Ende des Blogs...

Olaf: ist der Vorschlaf von Dir eine fixe Lösung oder geht das eben auch wie grad beschrieben, dass die Grafik immer z.B. unten rechts im Browser-Fenster bleibt?

schonmal ein herzliches Danke für den Input, auch an cb2206!

Olafb

So, genug vorgeschlafen :)
Du hättest ja mal probieren können :(

HTML

#sticker{
position:absolute;
bottom:0;
right:0;
}
/* das nur wenn benötigt, Werte sinnvoll ersetzen */
#sticker a{
bla:blubb;
}
#sticker img{
bluff:pleng;
}
/* Ende, das nur wenn benötigt */

Alles anzeigen

rftc

hehe...ja, freud'scher Verschreiber :-)

war leider nicht zuhause...probier heute abend weiter...

Vielen lieben Dank für den Input...schreibe ein Feedback wenn ich "fertig" bin :-)

Gruss Livio

rftc

Olafb, der Mann der Stunde :-)

so, hab mal was Provisorisches gebastelt, noch nicht bombig, aber tut's mal für'n Anfang :-)

Olaf, wie kann ich jetzt machen, dass das Bild immer unten rechts bleibt, auch wenn ich scrolle?

War schon mal Klasse deine Hilfe!!

Danke und Gruss

Livio

jaman

hallo,

so funzt das bei mir...
<style type="text/css">

</style>

<div id="corner">'position:fixed' in Internet Explorer</div>

die seite muss dann allerdings im quirks mode laufen...

rftc

jaman: danke für den Input, ist ähnlich Deine Lösung...

Olafb: hab's selbst rausbekommen, position: fixed lässt die Grafik wo sie ist, sogar IE 7 weiss dies jetzt :-)

Danke nochmals!

p.s. wieder mal eine neue Frage, vielleicht weisst Du dies grad wieder einmal Olafb?

--> meine youtube-class (Film wie Bilder als "class="alignleft" mit Text umlaufen lassen sieht in IE besch** aus...wieso übernimmt der nicht die selben margins wie z.B. Mozilla?? Weiss hier einer Rat?

Vielen Dank euch allen!

Gruss und gute Nacht

Livio

ben

quellcode anschauen, quellcode anschauen quellcode anschauen.

Ich habe von anderen Seiten schon so einige tricks gelernt weil ich mir - wenn ich was entdecke - immer den quellcode(+css) anschaue.

mit einem gescheiten editor (ich benutze Proton und WsciTE) ist das nichtmal so eine sucharbeit. Firebug ist auch eine schöne Firefox-extension, um direkt fremde seiten zu manipulieren (natürlich nur auf deinem Schirm)
Ich schreibe meiner Freundin damit ab und zu ihr Horoskop um ;-)

Olafb

Nur am Rande, das mit fixed beschrieb ich in meiner 1. Lösung, da du nachfragtest nahm ich an so wolltest du nicht.

Zum IE:

HTML

.youtube {
	float: left; 
	width: 193px; 
	height: 160px; 
	margin: -14px 0px 10px 0px;	
_margin-top:4px;
	}

_margin-top mit dem Wert spielen bis es passt

rftc

ben: ja, danke, probier ich meist auch, aber wenn man schon weiss, dass was fehlt, und nicht dass was falsch ist, ist es schwierig als Programmier-Laie...trotzdem danke...

Olafb: du hast recht, aber da ich erst am Sonntag-Abend ausprobieren konnte, hab ich natürlich deinen Folge-Post schon gesehen, und direkt mit absolute probiert...durch deinen ersten Post bin ich dann auch draufgekommen...also danke und sorry für meinen ungünstigen Probier-Weg :-/

jetzt schau ich, wie ich das mit den Margins hinbekomm...auch dafür: Danke vielmals...

Einen guten Start in die Woche und bis später,

Gruss Livio

rftc

Olafb:

ich hab jetzt mal dies eingefügt, aber meinen IE7 interessiert das überhaupt nicht? Ist das ein 7er Problem, oder ist es bei Euch auch immer noch völlig falsch platziert?

[size=8].youtube {
float: left;
width: 193px;
height: 160px;
margin: -14px 0px 10px 0px;
_margin-top: -14px;
_margin-bottom: 10px;
}[/SIZE]

rftc

hab nun auch dies mal probiert:

* html .youtube {
_margin-top: 4px;
}

aber irgendwie reagiert da genau gar nichts :-((

weiss jemand weiter?

Vielen Dank!

--> ich erstell daraus jetzt einen neuen Thread wenn's recht ist :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

"Ecken-Schnipsel" einfügen (z.B. Werbung etc.)

Jetzt mitmachen!