Ergebnis 1 bis 2 von 2
  1. #1
    joergi ist offline Mitglied
    registriert
    02-04-2012
    Beiträge
    48

    Bild in Tabelle zentrieren

    Hi,

    ich habe eine kleine Routine geschrieben, die mittels von Grafikbuttons ein Bild in einer Tabelle an und ausschaltet. Leider treten einige Probleme auf, für die ich keine Lösung finden kann .

    1. wenn ich die Buttons mittels <div style="text-align:center; z-index: 2;"> zentriere, sind diese nicht mehr anklickbar

    2. Die horizontale Bildausrichtung scheint zu funktionieren (oder gibt es eine bessere Lösung dafür?). Wenn das Browserfenster jedoch kleiner ist als das Tabellenfenster, wird die Grafik nach links verschoben

    3. Die vertikale Positionierung funktioniert nicht. Werden z.B. Leerzeilen über der Tabelle eingefügt, verschiebt sich das Bild nicht zusammen mit der Tabelle nach unten

    Könnt Ihr mir helfen?

    Danke im voraus für Eure Hilfe.

    Hier der Code



    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <style type="text/css">
    html, body {margin:0; padding:0; height:100%; overflow:hidden;}
    div.nscr {height:57px; width:100%; padding-left:0px;}
    div.inhalt {margin-left:0px; padding-left:0px; height:93.8%; overflow:auto;}
    </style>
    <script language="javascript" type="text/javascript">
    function aus ()
    {
    document.getElementById ('preload').style.visibility = 'hidden';
    }
    function an ()
    {
    document.getElementById ('preload').style.visibility = 'visible';
    }
    </script>
    <body>
    <div class="inhalt">
    <p align="center">x</p>
    <div align="center">
       <div style="position: absolute; width: 800px; height: 500px; z-index: 1; left:50%; margin-left: -400px; top:50%; margin-top: -330px;" id="preload">
          <img border="0" src="symbole/foto.jpg" width="220" height="290"></div>
       <table border="1" width="800" height="500">
          <tr>
             <td align="center">
             <img border="0" src="symbole/landschaft.jpg" width="690" height="492"></td>
          </tr>
       </table>
    </div>
    <div style="text-align:center; z-index: 2;">
    <a href="#" Onclick = "an ()"><img border="0" src="symbole/an.gif"></a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" Onclick = "aus ()"><img border="0" src="symbole/aus.gif"></a>
    </div>
    </div>
    <div class="nscr">
    </div>

  2. #2
    joergi ist offline Mitglied
    registriert
    02-04-2012
    Beiträge
    48

    AW: Bild in Tabelle zentrieren

    So, habe jetzt die Lösung gefunden. War eigentlich ganz einfach. Für alle dies interessiert, hier der Quellcode

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <style type="text/css">
    html, body {margin:0; padding:0; height:100%; overflow:hidden;}
    div.nscr {height:57px; width:100%; padding-left:0px;}
    div.inhalt {margin-left:0px; padding-left:0px; height:93.8%; overflow:auto;}
    </style>
    <script language="javascript" type="text/javascript">
    function aus () 
    {
    document.getElementById ('preload').style.visibility = 'hidden';
    }
    function an ()
    {
    document.getElementById ('preload').style.visibility = 'visible';
    }
    </script>
    <body>
    <div class="inhalt">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div align="center">
    	<table border="1" width="800" height="500">
    		<tr>
    <td align="center">		
    <div style="position: relative; top: 0px; left: 0px; height: 100%;">		
    	<div style="position: absolute;  height: auto; width: auto; left:290px; top:50px" id="preload">
    		<img border="0" src="symbole/foto.jpg" width="220" height="290"></div>
    			<img border="0" src="symbole/landschaft.jpg" width="690" height="492"></td>
    		</tr>
    	</table>
    <a href="#" Onclick = "an ()"><img border="0" src="symbole/an.gif"></a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="#" Onclick = "aus ()"><img border="0" src="symbole/aus.gif"></a>
    </div>
    </div>
    </div>	
    <div class="nscr">
    </div>

Ähnliche Themen

  1. Tabelle in Fenster zentrieren?
    Von richard im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 08-04-2009, 11:26
  2. tabelle vertikal in div zentrieren
    Von sladda im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 08-02-2009, 15:48
  3. Hintergrundbild UND Tabelle mittig zentrieren
    Von Fr3sh im Forum CSS und (X)HTML
    Antworten: 8
    Letzter Beitrag: 13-01-2007, 09:30
  4. Tabelle zentrieren
    Von bine im Forum Allgemeines
    Antworten: 3
    Letzter Beitrag: 26-07-2004, 11:49
  5. Script zum tabelle zentrieren
    Von reni im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 10-11-2002, 22:53

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •