✔ Tabelle in Bildmitte

Status
Nicht offen für weitere Antworten.
H

HarryBG

Grünschnabel
Hi Folks,

irgendwie schaffe ich es nicht, eine kleine Tabelle in der Mitte des Bildes zu zentrieren. Alles was ich möchte ist folgendes:

Die Tabelle:

HTML: 
<table class="tab_loginForm">
  <tr>
    <td>Benutzer:</td>
    <td><input type="text" name="username" maxlength="8"></td>
  </tr>
  <tr>
    <td>Kennwort:</td>
    <td><input type="password" name="password" maxlength="12"></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" name="submit" value="Anmelden"></td>
  </tr>
</table>

soll in der Mitte des Browserfensters erscheinen. Tut sie aber nicht. Sie ist weder horizontal noch vertikal zentriert. Was mache ich nur falsch? Ich drehe bald am Rad, da ich schon einige Dinge ausprobiert habe.

Ach ja, die zugehörige Klasse sieht wie folgt aus:

HTML: 
body {
	background-color:#33FF66;
	margin:0px;
	padding:5px;
	height:100%;
	}

.tab_loginForm {
	width:300px;
	text-align:center;
	vertical-align:middle;
	}

Vielen Dank und viele Grüße
Harry
 
Zuletzt bearbeitet:
Wie wäre es mit
Code: 
<table>
 <tr align="center" valign="middle">
  <td>Benutzer:</td>
  <td><input type="text" name="username" maxlength="8"></td>
 </tr>
 <tr align="center" valign="middle">
  <td>Kennwort:</td>
  <td><input type="password" name="password" maxlength="12"></td>
 </tr>
 <tr>
  <td colspan="2"><input type="submit" name="submit" value="Anmelden"></td>
 </tr> 
</table>
?
 
Hi,

könntest es aber auch so machen:

HTML: 
 <table width="100%" height="100%">
    <tr>
        <td align="center" valign="middle">
<table class="tab_loginForm">
  <tr>
    <td>Benutzer:</td>
    <td><input type="text" name="username" maxlength="8"></td>
  </tr>
  <tr>
    <td>Kennwort:</td>
    <td><input type="password" name="password" maxlength="12"></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" name="submit" value="Anmelden"></td>
  </tr>
</table>
      </td>
    </tr>
</table>
Was auch noch möglich wäre ist das ganze mit einem div zu lösen das müsste dann auch funktionieren.

Gruß
max
 
Habe ich bereits ausprobiert, das tut es leider auch nicht.

Abgesehen davon wird das "height" Attribut eine Tabelle nicht von allen Browsern unterstützt. Deswegen möchte ich das alles gerne mit CSS machen. Aber es funktioniert halt zum Verrecken nicht.

Viele Grüße
Harry
 
Also, hier noch mal ne andere Möglichkeit... :-)

der HTML - Teil:

HTML: 
<body>

<div id='content'>
   <table class="tab_loginForm">
      <tr>
         <td>Benutzer:</td>
         <td><input type="text" name="username" maxlength="8"></td>
      </tr>
      <tr>
         <td>Kennwort:</td>
         <td><input type="password" name="password" maxlength="12"></td>
      </tr>
      <tr>
         <td colspan="2"><input type="submit" name="submit" value="Anmelden"></td>
      </tr>
   </table>
</div>
</body>

und der dazugehörige CSS - Teil:

Code: 
body {
  background-color: #33FF66;
  padding:5px;
  margin:0px;
  text-align:center;
}
#content {
  position:absolute;
  left:50%;
  width:300px;
  margin-left:-150px;
  text-align: left;
  padding: 0px;
  background-color: #f5f5f5;
  border: 1px solid #000000;

hält die Tabelle in der Mitte.

Browsertest mit IE6, FF 1.0.6, Opera8 :-)

Grüße
 
Hi,

die Möglichkeit von @exed bietet sich schon an, aber du musst vorher dem Viewport (html) und
dem Dokumentenkörper (body) die Höhe von 100% zuweisen.

Mein Vorschlag:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}
body, html{ height: 100%;          /* Viewport und Dokumentenkörper auf 100% Höhe */}
.outerTable { width: 100%;
              height: 100%;
              text-align: center;  /* Innere Tabelle für IE zentrieren */
              background: #369;    /* Nur zur Demonstration - kann gelöscht werden */}
.tab_loginForm { margin: auto;     /* Innere Tabelle für Nicht-IEs zentrieren */
                 text-align: left; /* Schriftausrichtung wieder zurücksetzen */
                 background: #ccc; /* Nur zur Demonstration - kann gelöscht werden */}
 //-->
</style>
</head>
<body>
<table class="outerTable">
  <tr>
    <td valign="middle">
      <table class="tab_loginForm">
        <tr>
          <td>Benutzer:</td>
          <td><input type="text" name="username" maxlength="8"></td>
        </tr>
        <tr>
          <td>Kennwort:</td>
          <td><input type="password" name="password" maxlength="12"></td>
        </tr>
        <tr>
          <td colspan="2"><input type="submit" name="submit" value="Anmelden"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
Obiges Dokument ist striktes HTML4.01. Das Ganze sollte auch als transitional HTML 4.01
sowie als XHTML 1.0 (strict und transitional) funktionieren.

Getestet in IE 5.01, IE5.5, IE6, Opera 6.06, Opera 7.54, Netscape 6.2, Netscape 7.1, Firefox 1.0.6 und Konqueror.

Ciao
Quaese
 
Gna, gna... natürlich habe ich noch einen <form> Tag darin, ansonsten würden die Eingabefelder mit Button ja recht wenig Sinn machen. Jetzt habe ich festgestellt, dass man dem <form>-Tag auch noch "height:100%" mitgeben muss... Wahrscheinlich war das von Anfang an das einzige Problem... :eek:

Viele Grüße
Harry
 
So, hier noch mal der ganze Quelltext:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="tabelle.css">
</head>

<body>

<form name="loginForm" action="tabelle.html" method="post">
<table class="loginFrame">
  <tr>
    <td class="loginFrame">
      <table class="loginForm">
        <tr>
          <td class="formDesc">Benutzer:</td>
          <td class="formInput"><input type="text" name="username" maxlength="8"></td>
        </tr>
        <tr>
          <td class="formDesc">Kennwort:</td>
          <td class="formInput"><input type="password" name="password" maxlength="12"></td>
        </tr>
        <tr>
          <td class="formButtons" colspan="2"><input type="submit" name="submit" value="Anmelden"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</form>

</body>
</html>

Die CSS Datei:

HTML: 
* {
	margin:0px;
	padding:0px;
	}

html, form {
	height:100%;
	}

body {
	background-color:#33FF66;
	height:100%;
	padding:5px;
	}

table.loginFrame {
	width:100%;
	height:100%;
	text-align:center;
	border:1px solid black;
	}
	
td.loginFrame {
	vertical-align:middle;
	}
	
table.loginForm {
	margin:auto;
	text-align:left;
	}
	
td.formDesc {
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
	font-weight:bold;
	text-align:left;
	}
	
td.formInput {
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
	text-align:left;
	}
	
td.formButtons {
	font-family:Arial, Helvetica, sans-serif;
	text-align:right;
	}

Jetzt habe ich nur noch das Problem, dass in den getesteten Browsern das Dokument 5 Pixel zu hoch ist und deswegen Scrollbalken angezeigt werden (wohlgemerkt nicht zu breit, nur zu hoch... :confused: ). Falls da noch eine ne Idee hat... ist aber nicht so dringend.

Interessanterweise tritt dieser Effekt im IE 6.0 und im Opera 8.02 nicht auf, wenn ich den Doctype weglasse... :suspekt:

Danke für die Hilfsbereitschaft.

Viele Grüße
Harry
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück