Tabelle senkrecht zentriert ausrichten

Status
Nicht offen für weitere Antworten.
C

cinpix

Mitglied
Hallo!
Ich möchte gerne eine 6x1 Tabelle senkrecht und waagrecht zentriert ausrichten!
Wie geht das?
Mit diesem Code gehts nicht :-S
HTML: 
 <table width="100%" height="100%" border=0>
 <tr>
 <td align="center" valign="middle">
 
 Hier kommen die 6 Zellen hin
 
 </td>
 </tr>
 </table>
 
Funktioniert nicht?

Also bei mir klappt das wunderbar - sowohl Firefox als auch IE und Opera...
HTML: 
<html>

<head>
</head>

<body>
 <table width="100%" height="100%" border=0>
  <tr>
    <td align="center" valign="middle">
 
      <!-- Tabelle mit 6 Spalten (Zellen) -->
       <table border="0" width="300" height="200">
        <tr>
          <td bgcolor="#000000"></td>
          <td bgcolor="#a0a0a0"></td>
          <td bgcolor="#000000"></td>
          <td bgcolor="#a0a0a0"></td>
          <td bgcolor="#000000"></td>
          <td bgcolor="#a0a0a0"></td>
        </tr>
       </table>
      <!-- /Tabelle mit 6 Spalten (Zellen) -->
 
    </td>
  </tr>
 </table>
</body>
 
ja eben, eigentlich müsste es ja funktionieren...

Bei dem tuts das aber nicht...
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <style type="text/css">
  <!--
  body {
   font-family: Arial;
   font-size: medium;
   color: #3f3f3f;
  }
  -->
  </style>
  </head>
  <body background="background.gif">
  <table width="100%" height="100%" border=0>
  <tr>
  <td align="center" valign="middle">
  <table border="0" width="300" height="200">
  <tr>
  <td bgcolor="#000000"></td>
  <td bgcolor="#a0a0a0"></td>
  <td bgcolor="#000000"></td>
  <td bgcolor="#a0a0a0"></td>
  <td bgcolor="#000000"></td>
  <td bgcolor="#a0a0a0"></td>
  </tr>
  </table>
  </td>
  </tr>
  </table>
  </body>
  </html>

Bei dem wiederum schon...
HTML: 
<html>
  <head> 
  </head> 
  <body>  
  <table width="100%" height="100%" border=0>  
  <tr>  <td align="center" valign="middle">  
  <!-- Tabelle mit 6 Spalten (Zellen) -->  
  <table border="0" width="300" height="200">  
  <tr>  
  <td bgcolor="#000000"></td>  
  <td bgcolor="#a0a0a0"></td>  
  <td bgcolor="#000000"></td>  
  <td bgcolor="#a0a0a0"></td>  
  <td bgcolor="#000000"></td>  
  <td bgcolor="#a0a0a0"></td>  
  </tr>  
  </table>  
  <!-- /Tabelle mit 6 Spalten (Zellen) -->  
  </td>  
  </tr>  
  </table> 
  </body> 
  </html>

Entweder ich steh jetzt auf der Leitung und hab irgendwas übersehen...ODER ich weiss nicht mehr weiter O_o
Kann mir bitte jemand helfen..Ich zerbreche mir schon meinen Kopf :-S
 
Zuletzt bearbeitet:
Hallo cinpix,

das liegt sicherlich daran, dass die Browser mit der angegebenen Dokumenttyp-Deklaration im Standardmode und ohne DOCTYPE-Angaben im Quirksmode arbeiten.

Im Standardmode halten sie sich eben an die HTML 4.01-Spezifikation. und ignorieren das height-Attribut für das TABLE-Element. Für die TD-Elemente wird es noch ausgewertet, obwohl durch die Spezifikation missbilligt.

Wenn du übrigens bei der Dokumenttyp-Deklaration die URI weglässt (also nur <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> schreibst), dann versetzt du die Browser in den Quirksmode und es funktioniert wieder . Eine Übersicht zum Zusammenhang zwischen Dokumenttyp-Deklaration und Darstellungsmodus verschiedener Browser wird in iX 3/2004 gegeben.
 
@ hela /alle:
Hi,
ich habe das gleiche Problem, jedoch möchte ich XHTML-konform bleiben. Wie ist es denn hier möglich, den Seiteninhalt immer zentriert zu setzen? Vielleicht via JS?
Habe schon gegoooogelt, hier im Forum gesucht, aber nischt...
:(
Gruß,
MIcha
 
Hallo tantebootsy,

du kannst einen DIV-Block mit absoluten Größenwerten mit Hilfe der absoluten Positionierung in die Fenstermitte bringen, siehe den Beitrag von Quaese im CSS-Forum. Die Sache hat allerdings einen kleinen Haken: Wenn die Fenstergröße kleiner als der DIV-Block wird, dann kann nicht mehr über die ganze Blockgröße gescrollt werden.

Mit JavaScript kann man die Zentrierung auch vornehmen. In den Webmaster-FAQ gibt es einen Beitrag, wobei das Script von Chris Poole ganz interessant ist.
 
Das Script von Chris Poole hat hingehauen, obwohl da ja ziemlich viele "Schreibfehler" drin sind, oder?
Es hatte erst funktioniert, dann hab ich 'n bisschen dran "rumgespielt" und dann tat es plötzlich nicht mehr ...
Bis sich herausstellte, dass es an dieser Tag-Beschreibung, welcher vor dem Code von Poole stand, lag:

<script src="js_css/zentriert.js" type="text/javascript" />

Erst als ich mit

<script src="js_css/zentriert.js" type="text/javascript"></script>

beendet habe, ging auch der nachfolgende "centerAll-Code".
Auf sowas muss man auch erst mal kommen...
Jedenfalls vielen Dank auch!
Gruß,
Micha
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück