Grafik unabhängig von Bildschirmauflösung fest positionieren

  • ja... meine worte..^^
    was du vorhast wird schwer..

    kannst es höchstens so nochma probieren, aber das sind alles nur annäherungen, browser machen rundungsfehler bei % dann gibts es keine kleinere größe als 1 bei pixeln

    und ne relation is halt auch immer so ne sache, denn dein bild verzerrt ja nicht so richtig, wenn die breite kleiner wird, als die höhe, müssteste pixelmatsch bekommen. daher klappt es alles nicht ganz so, wie du es dir vorstellst.

    hier haste noch nen letzten versuch meinerseits :)

    Code
    background: none repeat scroll 0 0 #00FF00;
    height: 7%;
    width: 2.5%
    position: absolute;
    margin: auto auto auto 77%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    ;
  • Okay, habe jetzt den Code so eingefügt:

    HTML
    <div style="background: none repeat scroll 0 0 #00FF00; left: 70.3%; position: absolute; top: 50%; height: 7%; width: 2.5%; margin: auto auto auto 70%; margin-top: 0; margin-right: auto; margin-bottom: 0px">

    Allerdings verschiebt es die Grafik jetzt so weit nach rechts, dass man sogar nach rechts scrollen muss um es zu sehen.^^ Wie würdest du es denn lösen, wenn du das Problem auf deiner Homepage hättest?

    Ich versteh nicht, wieso das so viel schwerer ist als die Sache bei dem Rasen-Hintergrund. o.o

    Einmal editiert, zuletzt von midnight-noob (3. Oktober 2013 um 23:00)

  • also zuerst würde ich darauf achten dass ich meine werte nicht wieder überschreibe beim style, außer es ist wirklich nötig...

    Code
    [COLOR=#000080][COLOR=#0000FF]margin: auto auto auto 70%; margin-top: 0; margin-right: auto; margin-bottom: 0px[/COLOR][/COLOR]

    sollte

    Code
    [COLOR=#000080][COLOR=#0000FF]margin: auto auto auto 70%; [/COLOR][/COLOR]


    sein


    und überhaupt war mein letzter code das hier:

    Code
    background: none repeat scroll 0 0 #00FF00; height: 7%; width: 2.5% position: absolute; margin: auto auto auto 77%; bottom: 0; left: 0; right: 0; top: 0;


    und das "problem" ist die vertikale positionierung. das kann html nicht einfach so. texte gehen via line-height.
    in tabellen gibt es vertical-align, aber für 0-8-15-html gibt es sowas nicht. daher der zuletzt genannte code mit absoluter positionierung.
    dann bist du auch nicht im zentrum des bildes. man muss die proportionsänderung vom hintergrundbild beachten und einen dynamischen faktor ins spiel bringen der prüft, wie das seitenverhältnis ist, um dadurch dann die neupositionierung zu ermitteln.
    alternativ: für verschiedene auflösungen die positionen ermitteln, festlegen und dann über responsive css die festen werte nutzen.
    das ganze dann kombiniert mit % statt px, könnte dich auch etwas näher ans ziel bringen.

    aber an der stelle musste halt mal n bissi tüfteln, mein wissen ist hier aufgebraucht

  • HTML und CSS kann man lernen, haben die Leute hier auch gemacht, u.a. auch deswegen können sie jetzt helfen..

    Ein Geheimnis ist erst ein Geheimnis wenn man es selbst nicht weiß, sonst ist es nur eine Zeitbombe.

  • Du hast so wenig Ahnung von der Materie, dass es sinnlos ist dir hier weiterhelfen zu wollen, da elementare Grundlagen fehlen.