Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Hallo,

heute habe ich wieder ein Problem, das ich auch früher schon mit meiner Homepage hatte. In der Forums-Übersicht hatte ich am rechten Bildschirmrand ein Objekt positioniert, position: fixed. Für die Umsetzung habe ich ein Plugin erstellt, damit das Objekt nur in der Forums-Übersicht und nicht im Portal angezeigt wird, aber das nur am Rande.

Mit größeren Bildschirmauflösungen ist das kein Problem, aber auf mobilen Geräten ragt das Objekt in den Text hinein. Ich würde das Objekt gern "festtackern", damit es auf allen Geräten am rechten Bildschirmrand angezeigt wird, eine relative Fixierung sozusagen . Ein Freund von mir hatte es damals mit .mediaquery gelöst, aber perfekt war das auch nicht.

Was kann ich tun, um auf mobilen Geräten diese Überlappungen zu vermeiden? Ist das mit CSS überhaupt machbar?

So sah der Code aus:

<img src="//files.homepagemodules.de/b583841/a_822_d704a777.png" 
   style="position:fixed; right:0px; bottom:0px; width:272px; height:570px; border:none;"
   alt=""
   title="" />
 

Hier ein Screenshot zur Verdeutlichung:



Ach ja und @Ingmar, ich weiß, dass es eigentlich nicht dein Job ist, aber vielleicht hast du ja eine Idee? Ich würde mein Vorhaben gern realisieren.

Mit Float ist das meines Erachtens nicht realisierbar.

Zitat von Eru im Beitrag #4

---

Was vielleicht helfen mag, ist hier unten bei "Overlapping Elements" die Angabe der Z-Achse. Wenn das Bild unter dem Text/Block bleibt, störts vielleicht nicht.. http://www.w3schools.com/css/css_positioning.asp

---

Hm, vielleicht funktioniert es auch, wenn man das Objekt proportional skaliert:

img { width: auto; height: 100% }
 

Dann bleibt das Seitenverhältnis erhalten.

Ich hoffe, mein Faden stört nicht, ich mache mir nur gerade Notizen.

Zitat von Eru im Beitrag #7

---

Wieso gehts denn nicht? o.ó .. Vlt. weil der Rest der Seite (noch) nicht darauf ausgerichtet ist.

---

Danke dir @Ingmar, das probiere ich gleich mal aus.

@Ingmar:

Ich habe deinen Code nun eingefügt und versucht, mit Javascript die Bildgröße anzupassen. Ich habe keine Ahnung von Javascript, ich habe einfach mal was ausprobiert und es scheint zu funktionieren. Ich habe nun verschiedene Bildschirmgrößen getestet und das Bild wird auf allen Geräten korrekt angezeigt: Desktop, Laptop und Tablet. Nur auf dem Handy funktioniert es noch nicht.

Kannst du dir den Code vielleicht nochmal ansehen und mir sagen, ob das der richtige Ansatz ist?

function fixSideImage(){
$("img").maxSize("init", {maxWidth: 272, maxHeight: 570, fade: true, fadeTime: 500});
}
$( window ).resize(function() {
fixSideImage();
});
 

 
<img src="//files.homepagemodules.de/b647699/a_13_6ca4f955.png" 
   style="position:fixed; right:-15px; bottom:0px; width:272px; height:570px; border:none;"
   alt=""
   title="" />
 

Wenn du sagst, dass der Code korrekt ist, würde ich es mal in meinem Forum versuchen. Ansonsten kann man es auch in meinem Testforum sehen: http://ugo.xobor.de

Das habe ich nicht richtig gemacht. Im Business sieht das ganz gut aus, aber im Gaia kommt es nach wie vor zu Überschneidungen. Verstehe gar nicht, warum die Darstellung zwischen den Templates so unterschiedlich ist.

Ich geb´s auf, ich komme hier nicht weiter. Von Javascript verstehe ich nichts und die anderen Möglichkeiten führen nicht zum Ziel. Ich habe das gesamte Internet nach einer Lösung durchsucht, aber nichts gefunden.