Thomas: Position von Bildern

Hallo zusammen

Habe noch kaum HTML bzw. CSS Erfahrung, möchte dies aber jetzt ändern. Bei meinen ersten Versuchen bin ich (aus meiner Sicht) auf ein komisches Problem gestossen:

Ich habe in meinem Editordokument sowohl Bilder als auch eine Tabelle. Nun wollte ich gegen Ende meines Dokumentes weitere Bilder  eingeschrieben, war aber sehr erstaunt als sie nicht erschienen. Ich habe sie weiter oben bei den anderen Bildern eingeschrieben und prompt hat es geklappt.
Ich suchte nach den Ursachen dafür und habe herausgefunden, dass sie ca. in der Mitte des Dokumentes eingeschrieben, angezeigt werden, jedoch am falschen Platz (ich habe bei Tabelle sowie bei diesen Bildern die gleiche px zahl gewählt, deshalb falscher platz, die tabelle diente als Referenz.)

Zusammenfassung:

Ich habe ein Bild (mit gleichen Einstellungen von der Position her)in meinem Editordokument eingeschrieben und dreimal kam es auf der HP anderst.

oben eingeschrieben => Bild erschien an richtiger Position (Tabelle als Referenz)

ca. in Mitte eingeschrieben => Bild erschien, aber weiter unten als vorgesehen mit gleichen Einstellungen

gegen Ende eingeschrieben => Bild erschien gar nicht mehr

Kennt jemand dieses Phänomen/Problem? Wäre sehr dankbar um eure Hilfe

Mfg

Thomas

  1. Grüße,

    gegen Ende eingeschrieben => Bild erschien gar nicht mehr

    3 gegen 1 dass du es nach dem </html> oder nach </body> reindrückst
    ^
    aber warnung - eher du uns dein html zeigst - können wir nur raten - also erwarte keine sinnvolle antwort eher du dein problemdocument hier gepostet hast.
    MFG
    bleicher

    --
    __________________________-
    Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
    http://www.sexgott-or-not.com/?test=428054
    1. Alles klar, hier ist mein HTML-Dokument, habe den Text einfach durch das allgemeine "blabla" ersetzt:

      <html>
      <head>
      <title> blabla </title>
      </head>
      <body>
      <body bgcolor="330000">

      <!---Muster/Verzierung/Rahmen--->

      <div style="position:absolute;top:300px; left:20px"> <img src="blabla.jpg"> </div>
      <div style="position:absolute;top:0px; left:0px"> <img src="blabla.jpg" weight="238" height="253">  </div>
       <div style="position:absolute;top:20px; left:250px"> <img src="blabla.jpg"> </div>
      <div style="position:absolute;top:20px; left:450px"> <img src="blabla.jpg"> </div>
      <div style="position:absolute;top:20px; left:650px"> <img src="blabla.jpg"> </div>
      <div style="position:absolute;top:20px; left:850px"> <img src="blabla.jpg"> </div>
      <div style="position:absolute;top:20px; left:1050px"> <img src="blabla.jpg"> </div>
      <div style="position:absolute;top:20px; left:1250px"> <img src="blabla.jpg"> </div>
      <div style="position:absolute;top:20px; left:1450px"> <img src="blabla.jpg"> </div>

      [<div style="position:absolute;top:120px; left:1020px"> <img src=" blabla.jpg" weight="512" height="384">  </div>
      <div style="position:absolute;top:600px; left:1020px"> <img src=" blabla.jpg" weight="512" height="384">  </div>
      <div style="position:absolute;top:1100px; left:1020px"> <img src=" blabla.jpg" weight="512" height="384">  </div>]

      <!---Ende Muster/Verzierung/Rahmen--->

      <!---Inhaltsverzeichnis--->

      <div   style="position:absolute;top:300px; left:120px">
      <p style="border-width:1px;border-style:outset;border-color:FFFFFF;">
      <table  border="1" bordercolor="FFFFFF" bordercolorlight="FFFFFF">
                   <tr>
                               <td style="padding:15px" > <font size="4" face="Times New Roman"> <font color="FFFFFF"> blabla </font> </td>
                    </tr>
                     <tr>
                               <td style="padding:15px"> <font size="4" face="Times New Roman"> <font color="FFFFFF"> blabla </font> </td>
                    </tr>
                     <tr>
                               <td style="padding:15px"> <font size="4" face="Times New Roman"> <font color="FFFFFF"> blabla </font> </td>
                    </tr>
                     <tr>
                               <td style="padding:15px"> <font size="4" face="Times New Roman"> <font color="FFFFFF"> blabla </font> </td>
                    </tr>
                     <tr>
                               <td style="padding:15px"> <font size="4" face="Times New Roman"> <font color="FFFFFF"> blabla </font> </td>
                    </tr>
                     <tr>
                               <td style="padding:15px"> <font size="4" face="Times New Roman"> <font color="FFFFFF"> blabla </font> </td>
                    </tr>
                     <tr>
                               <td style="padding:15px"> <font size="4" face="Times New Roman">  <font color="FFFFFF"> blabla </font> </td>
                    </tr>
                     <tr>
                               <td style="padding:15px"> <font size="4" face="Times New Roman"> <font color="FFFFFF"> blabla </font> </td>
                    </tr>
      </table>
      </p>
      </div>

      <!---Inhaltsverzeichnis Ende--->

      <!---Hauptblock--->

      <div   style="position:absolute;top:120px; left:300px">
      <p style="border-width:1px;border-style:outset;border-color:FFFFFF;">
      <table border="1" bordercolor="FFFFFF" bordercolorlight="FFFFFF" width="900">
                    <tr>
                                <td style="padding:25px"> <img src="blabla.jpg">  </td>
                    </tr>
      </table>

      [<div style="position:absolute;top:120px; left:1020px"> <img src=”blabla jpg" weight="512" height="384">  </div>
      <div style="position:absolute;top:600px; left:1020px"> <img src="blabla.jpg" weight="512" height="384">  </div>
      <div style="position:absolute;top:1100px; left:1020px"> <img src="blabla.jpg" weight="512" height="384">  </div>]

      <table border="1" bordercolor="FFFFFF" bordercolorlight="FFFFFF" width="900" height="600">
                    <tr>
                             <td valign="top" style="padding-left:10px" style="padding-right:10px"> <font size="4" face="Times New Roman">  <font color="FFFFFF"> <br> Herzlich Willkommen auf der Seite Drachenblut - Allianz! <p> blabla <p> blabla <p>
                                                     blabla:
                                                               <table border="0" cellspacing="20">  <tr> <td> <font size="4" face="Times New Roman">  <font color="FFFFFF"> <li> blabla </td> <td> <font size="4" face="Times New Roman">  <font color="FFFFFF"> blabla </td> </tr>
                                                                                                                              <tr> <td>  <font size="4" face="Times New Roman">  <font color="FFFFFF"> <li> blabla: </td> <td> <font size="4" face="Times New Roman">  <font color="FFFFFF"> blabla </td> </tr>
                                                                                                                              <tr> <td>  <font size="4" face="Times New Roman">  <font color="FFFFFF"> <li> blabla: </td> <td> <font size="4" face="Times New Roman">  <font color="FFFFFF"> blabla </td> </tr>
                                                                                                                              <tr> <td>  <font size="4" face="Times New Roman">  <font color="FFFFFF"> <li> blabla: </td>  <td> <font size="4" face="Times New Roman">  <font color="FFFFFF"> blabla </td> </tr>
                                                                                                                               <tr> <td>  <font size="4" face="Times New Roman">  <font color="FFFFFF"> <li> blabla:  </table> </font>  </td>
                    </tr>

      </p>
      </div>

      [<div style="position:absolute;top:120px; left:1020px"> <img src="blabla.jpg" weight="512" height="384">  </div>
      <div style="position:absolute;top:600px; left:1020px"> <img src="blabla.jpg" weight="512" height="384">  </div>
      <div style="position:absolute;top:1100px; left:1020px"> <img src="blabla.jpg" weight="512" height="384">  </div>]
      </body>
      </html>

      Es geht um die drei Abschnitte die ich mit [] eingerahmt habe, einfach zum erkennen. Beim obersten alles gut, das zweite mal kommen die Bilder an der falschen Position und beim dritten Ort wo ich sie einfügen kann gar nicht mehr.

      Kennt jemand den Grund dafür?

      LG Thomas

      1. Grüße,

        <div style="position:absolute;top:1100px; left:1020px"> <img src="blabla.jpg" weight="512" height="384">  </div>]

        bildschirmaufläsung von 1600x1200 wäre hier ein minimum das bild noch zu sehen - mit absouter positionierung schiebst du das bidl jenseits von viewport - und das ohne ein scrollbalken zu erzeugen (absolute positionierte elemente tun es nicht).
        MFG
        bleicher

        --
        __________________________-
        Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
        http://www.sexgott-or-not.com/?test=428054