✔ mit DIV die Position festlegen

[gingerswelt]

Hallo zusammen,

ich benötige das div-Tag, um eine Grafik über den Rand einer Tabellen zu legen.
Mit folgender Definition gelingt dies mir auch ganz gut.

<div style="position:absolute; top:34%; left:15%">
     <img src="layout/button.jpg" width="163" height="23">
</div>

Allerdings verändert sich die Lage des Buttons, wenn ich die Auflösung ändere.
Ich weiß, es liegt an der Prozentangabe. Wie kann ich die Grafik fix positionieren?

Grüße
ginger

 

[dark_ghost]

Hallo,

schreibe anstelle deiner Prozentzeichen (%) px (steht für pixel) hinter deine nummerische Angabe.
Du wirst das ganze allerdings neu ausrichten müssen, da 34% nicht 34px entsprechen aber damit ist der Button fest positioniert.

Gruß
Andi

 

[Maik]

Sorry, aus dieser Problembeschreibung werde ich nicht ganz schlau und frage mich, respektive dich, was du mit 'über den Rand einer Tabelle legen' meinst bzw. wo sich die Grafik im Bezug zum (oberen/unteren?) Tabellenrahmen befinden soll?

Interessant wäre auch zu erfahren, wie die Tabelle in der Seite positioniert bzw. ausgerichtet ist, ob es sich hierbei evtl. um eine verschachtelte Tabelle handelt, und zu guter letzt, an welcher Stelle das div-Element im HTML-Quelltext notiert ist -> innerhalb / außerhalb von <table> ... </table>?

Also, mehr Quelltext bitte!

 

[gingerswelt]

@dark_ghost:
Die Angabe mit Pixel hatte ich bereits versucht. Bin allerdings auch dabei gescheitert,
weil es eine feste 800x600px-Anwendung ist, die zentral auf dem Bildschirm erscheint.
Hat der Benutzer eine größere Auflösung, so verändert sich der Abstand von Browserrahmen zu Anwendung.

@michaelsinterface:
Wie bereits oben erwähnt handelt sich um eine zentrierte Tabelle, die wiederum
mehrere Tabellen enthält. Eine der Subtabellen besitzt eine Tabelle, deren Rahmen
angezeigt wird. Der Button überlagert diese Tabelle seitlich.

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <table width="752" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td class="nav"><img src="layout/logo.jpg" width="752" height="82" border="0" usemap="#Map"></td>
        </tr>
        <tr>
          <td bgcolor="white" class="mainborder"> <br>
              <table width=98% cellpadding="0" cellspacing="0">
               <tr>
                   <td>&nbsp;</td>
                   <td align="right">
                     <table border="1" bordercolor="#009999" cellpadding="0" cellspacing="0">
                      <tr>
                       <td>&nbsp;</td>
                       <td>&nbsp;englisch&nbsp;</td>
                       <td bgcolor="#009999">&nbsp;</td>
                      </tr>
                     </table>
                   </td>
               </tr>
               <tr>
                   <td width="180">&nbsp;
                       <div style="position:absolute; top:34%; left:15%">
                         <img src="layout/button.jpg" width="163" height="23" border="0" alt="">
                       </div>
                       <div style="position:absolute; top:170px; left:180px">
                         <table align="center">
                           <tr><td><h1 class='nav'>Menue1</h1></td></tr>
                           <tr><td><h1 class='nav'>Menue2</h1></td></tr>
                         </table>
                       </div>
                 </td>
                 <td>
                  <table border="1" height=400 bordercolor="#009999" cellpadding="0" cellspacing="0">
                    <tr>
                      <td>&nbsp;</td>
                      <td>
                        <table width=98% height=100% align="center">
                         <tr>
                           <td width="20">&nbsp;</td>
                           <td valign="top"><br> Inhalt </td>
                          </tr>
                         </table>
                      </td>
                      <td bgcolor="#009999">&nbsp;</td>
                    </tr>
                  </table>
                 </td>
               </tr>
              </table>
              <br>
          </td>
        </tr>
        <tr>
          <td><img src="layout/fussleiste.jpg" width="752" height="30" border="0"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Wie kann ich das Problem lösen?

Grüße
ginger

 

[Maik]

@michaelsinterface:
Wie bereits oben erwähnt handelt sich um eine zentrierte Tabelle, die wiederum
mehrere Tabellen enthält. Eine der Subtabellen besitzt eine Tabelle, deren Rahmen
angezeigt wird. Der Button überlagert diese Tabelle seitlich.

Mit keiner Silbe hast du erwähnt, daß die Tabelle zentriert ist und weitere verschachtelte Tabellen enthält.

Wenn ich die Browserfenstergröße verändere, überlagert die Grafik nicht nur die Content-Tabelle seitlich, sondern wandert auch in der Vertikalen. Zudem ist das nachfolgende DIV (Menü) absolut positoniert und wird im FireFox und IE an unterschiedlichen Positionen angezeigt

Somit weiß ich noch immer nicht, wo die Grafik jetzt genau hingehört

Aber vielleicht hilft dir dieser Tipp weiter?

<td width="180" valign="top">&nbsp;
<img src="layout/button.jpg" width="163" height="23" border="0" alt="">
 
<table align="center">
	 <tr><td><h1 class='nav'>Menue1</h1></td></tr>
	 <tr><td><h1 class='nav'>Menue2</h1></td></tr>
</table>
</td>

 

[gingerswelt]

Wenn ich die Browserfenstergröße verändere, überlagert die Grafik nicht nur die Content-Tabelle seitlich, sondern wandert auch in der Vertikalen. Zudem ist das nachfolgende DIV (Menü) absolut positoniert und wird im FireFox und IE an unterschiedlichen Positionen angezeigt

Genau das ist mein Problem. Kann ich das mit dem DIV-Tag unterbinden oder
muss ich auf eine andere Lösung zurückgreifen. Wenn ja, welche?

So soll der Button die Content-Tabelle am linken Rand überlagern.

 

[Maik]

2. Versuch:

<td width="163" valign="top">&nbsp;
<img src="layout/button.jpg" width="163" height="23" border="0" alt="">
 
<table align="center">
<tr><td><h1 class='nav'>Menue1</h1></td></tr>
<tr><td><h1 class='nav'>Menue2</h1></td></tr>
</table>
</td>

 

[gingerswelt]

Das funktioniert so nicht, weil die Grafik neben die Tabelle gelegt wird.
Ich muss aber die Grafik über die Tabelle schieben.
Um die Position festzulegen habe ich das IV-Tag verwendet.
Das Tag führt aber dazu, dass die Grafik springt, weil ich immer
den Bezug zum Browserfenster habe und nicht den Bezug zur Tabelle.

Weiter Vorschläge sind erwünscht. Danke.

 

[Maik]

Ich muss aber die Grafik über die Tabelle schieben.

Das wird überhaupt nicht funktionieren, da die Grafik in einer Tabelle (Zelle) nicht über eine andere (danebenliegende) Tabelle gelegt / geschoben werden kann

 

[gingerswelt]

Wie kann ich sonst diese Grafik umsetzen?