Grafik wird unterschiedlich dargestellt, bitte um Hilfe!

    Ich möchte auf meiner Webseite eine Grafik einfügen wie das rote Siegel auf der rechten Seite auf dem Screenshot hier:
    http://img367.imageshack.us/img367/1003/screenfw8.png

    Leider wir das Siegel auf verschiedenen Browsern an unterschiedlichen stellen auf der Webseite angezeigt. Gibt es irgendeinen Weg dass die Grafik auf allen Browsern und Bildschirmgrößen an der gleichen Stelle angezeigt wird?

    Ich benutze Wordpress und im Moment folgende Codes:

    Im Stylesheet

    HTML
    #adframe {
    position: absolute;
    top: 138px;
    right: 263px;
    margin: 0;
    padding: 2px   
        z-index: 99;
}

    Im Footer

    HTML
    <div id="adframe">
<img src="bild.jpg">
</div>

    Vielen Dank im Voraus für eure Hilfe!

    naja die position wird von oben und links festgelegt.. deswegen!
    und generell finde ich sollte man die finger von position:absolute lassen, wenn man keine ahnung hat ;)
    du kannnst statt top und left auch mal mit margin-left und margin-top hantieren ;)

    Zitat von bandit600

    Du setzt right auf 263px, versuche es mal mit left:musstDuAusprobieren px; ;)

    Ok, es funktioniert... fast!

    Auf meinem Macbook wird die Grafik auf Firefox und Safari an der gleichen Stellen angezeigt. Das ist ja schonmal super.

    Wenn ich jedoch auf meinen großen Desktop PC gehe dann ist die Grafik viel weiter rechts. Wie kann man das fixen?

    idem du spezielle styles für den ie(ich vermute mal das ist dein browser vom desktop-pc)
    einbaust, entweder durch ie-hacks oder durch conditional comments
    schau mal ob du bei http://css4you.de dazu was findest.
    außerdem ist dabei der restliche aufbau auch wichtig, je nach art und weise des aufbaus kann es zu immensen unterschieden bei verschiedenen auflösungen kommen!

    wie groß sind denn die auflösungen ?

    wenn dein großer desktop 2560 und dein mac 1280 fährt,
    dann ises logischerweise beim mac weiter rechts als beim
    desktop.

    wie is denn die restliche seite ? zentrierte divcontainer ?
    evtl kannst die grafik da reinlegen und dann von dort an
    mit margin nach rechts gehen. oder du musst z.b. mit %
    arbeiten (je nachdem wie du den content ausrichtest)

    Zitat von synaptic

    idem du spezielle styles für den ie(ich vermute mal das ist dein browser vom desktop-pc)

    Nein, auf meinem Desktop habe ich auch Firefox drauf. Wie gesagt, da wird die Grafik aber weiter rechts angezeigt. Evtl wegen der Auflösung oder Bildschirmgröße?

    joa dann is es so, wie driver bereits sagte ;) und du hast live erlebt welche probleme position:absolute; bringen kann!
    hast du jetzt feste top und left-werte?
    versuch mal an dieser stelle statt top und left margin-top und margin-left zu benutzen
    dann musst du zwar die positionierung von der aktuellen position wo das element gecodet ist vornehmen, aber dann sollte es dennoch passen ;)

    Zitat von synaptic

    joa dann is es so, wie driver bereits sagte ;) und du hast live erlebt welche probleme position:absolute; bringen kann!
    hast du jetzt feste top und left-werte?
    versuch mal an dieser stelle statt top und left margin-top und margin-left zu benutzen
    dann musst du zwar die positionierung von der aktuellen position wo das element gecodet ist vornehmen, aber dann sollte es dennoch passen ;)

    Wenn ich absolute wegnehme dann kriege ich die Grafik überhaupt nicht auf die Position wo ich sie haben will. Sie steckt dann irgendwo unten auf meiner Page und bewegt sich da keinen Milimeter mehr von weg, auch wenn ich die Postion von top bzw left ändere.

    also nochmal:
    du kannst position:absolute benutzen wenn du unbedingt willst, nur dann arbeite lediglich mit margin und padding! (bei margin gehen dann auch negative werte)
    und wenn des ding zu weit unten ist, schreib es einfach ne ganze ecke höher in deinen code...
    haste das schon irgendwo online, damit man mal druffgugge kann? wenn nich, lads bitte mal hoch, sonst is des alles reine spekulation.
    wenn du das teil in der nähe des headers brauchst, dann schreib es direkt unter den header, so sind die abstände an sich auch kein problem! dann solltest du nen z-index benutzen sagen wir mal z-index:3; und die darunterliegenden objekte benötigen dann einen z-index kleiner als 3, natürlich nicht alle, wenn du ein umfassendes div hast gibste dem nen z-index:0; oder z-index:1;

    Zitat von sejuma

    Du musst das Siegel in Relation zur zentrierten Seite positionieren.
    Ansonsten ist es bei unterschiedlichen Auflösungen / Viewports immer unterschiedlich positioniert.
    Stell mal einen Link zur Seite rein, dann kann man sicher konkret helfen.


    http://www.crazedhits.com/

    Auf meinem 15 Zoll Macbook mit Firefox ist das Siegel jetzt genau angepasst wie in dem Screenshot hier.

    Wäre toll wenn mir jemand konkret helfen kann, damit es genauso auf allen Browsern bzw Bildschirmgrößen aussieht.

    Habe den Code hier benutzt:

    2 Mal editiert, zuletzt von fralax (24. November 2008 um 15:35)

    Diesen Teil incl. CSS löschen:

    Code
    <div id="adframe">
<img style="border:0px" src="[URL]http://www.crazedhits.com/seal1.gif[/URL]">
</div>



    Am Anfang nach <body> wie folgt ergänzen (rot):

    Zitat


    <div id="header" style="position: relative;" onclick="location.href='http://www.crazedhits.com';" style="cursor: pointer;"><a name="top"></a>
    <h1><a href="http://www.crazedhits.com">
    </a></h1>
    <img style="position: absolute; top: 120px; left: 680px; border:0px" src="http://www.crazedhits.com/seal1.gif">
    </div>



    Ggf. die Pixelwerte noch geringfügig anpassen.

    Die Style-Ergänzung für den header kannst du natürlich auch in die CSS schreiben und im HTML-Teil weglassen.
    Ebenso könntest du für's img die Style-Angaben in die CSS-Datei schreiben.