✔ tabelle zentrieren?

P

passenger

Grünschnabel
Hi

Ich bin noch ziemlich unerfahren was programmierungsgeschichten angeht. Bin dabei meine erste Seite zu bauen und bräuchte dringend einen Rat. Habe einen table eingefügt und ich auch eigentlich zentriert (horizontal & vertikal). Nur leider wird der im IE total versetzt dargestellt. Kann mir vielleicht jemand von euch sagen wie ich da Problem beheben kann? Hier ist mal der Code ( Ist sicher ein ziemliches Durcheinander, aber er scheint seinen Zweck zu erfüllen)..

<!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>

<style type="text/css">

body {
background-image: url(pics/bg1.jpg);
background-repeat: repeat-x;
background-position: 50%;
background-attachment:fixed;
background-color: #000000;
}

table {
position:absolute;
top:50%;
left:50%;
margin-left:-350px;
margin-top:-132px;


}


.style5 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFCC;
font-size: 11px;
}
</style>




<body>
<table width="100%" border="1" height="100%">

<tr align="center" valign="middle">
<td><table width="700" height="280" border="1">
<tr valign="top">
<td align="left" valign="top"><table width="600" border="1">
<tr>
<td><span class="style5">home</span></td>
<td><span class="style5">about us</span></td>
<td><span class="style5">gallery</span></td>
<td><span class="style5">store</span></td>
<td><span class="style5">contact</span></td>
<td><span class="style5">impressum</span></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" valign="top" height="230">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td align="left" valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>



</body>

</html>



Wenn mir jemand sagen kann wie ich es einstellen kann das es in jedem Browser gleich aussieht wäre ich echt dankbar
 
Hi,

dieses Modell läuft in allen mir zur Verfügung stehenden Browser, darunter auch im IE :)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-02-08">

<title>tutorials.de | demo_passenger</title>

<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}

table#outer {
width: 100%;
height: 100%;
text-align: center;
}

table#inner {
width: 700px;
height: 280px;
background: #dadada;
}

table#inner td {
text-align: center;
vertical-align: middle;
}
-->
</style>

</head>
<body>

<table id="outer">
       <tr>
           <td align="center">
               <table id="inner">
                      <tr>
                          <td>test</td>
                      </tr>
               </table>
           </td>
       </tr>
</table>

</body>
</html>


Und wenn es mal anstelle der Tabellenkonstruktion ein CSS-gestütztes Layout sein darf, empfehle ich dir Zentrieren mit nur einem Element und CSS vertical centering using float and clear.

mfg Maik
 
Hey das funktioniert tatsächlich. Vielen Dank Maik! Habe mich 2 Tage damit rumgequält und gefühlte 5000 codes ausprobiert!
Hätte dann nur noch eine vielleicht blöde Frage. Wie kriege ich jetzt die Tabelle in 3 Zeilen unterteilt? Also in der oberen sind die Oberpunkte, in der Mitte das Hauptfenster in dem sich alles abspielt und im unteren kommen eine Sprachenauswahl und ebenfalls noch links rein..Hab jetzt ein paar Sachen ausprobiert, kriegs aber nicht hin. Könntest mir da vielleicht noch helfen?
Gruss, Sandro
 

Anhänge

  • table.gif
    table.gif
    1,1 KB · Aufrufe: 19
Moin,

das ginge dann in diese Richtung:

Code: 
<table id="outer">
       <tr>
           <td align="center">
               <table id="inner" border="1">
                      <thead>
                             <tr><th>thead</th></tr>
                      </thead>
                      <tfoot>
                             <tr><th>tfoot</th></tr>
                      </tfoot>
                      <tbody>
                             <tr><td>tbody</td></tr>
                      </tbody>
               </table>
           </td>
       </tr>
</table>
Code: 
table#inner {
width: 700px;
/*height: 280px;*/ /* auskommentiert = deaktiviert */
background: #dadada;
}

table#inner thead {
height: 30px;
}

table#inner tbody {
height: 200px;
}

table#inner tfoot {
height: 50px;
}


mfg Maik
 
hm. das isses, nur sind die 3 Zeilen jetzt alle gleich breit, trotz der verschiedenen Höhenangaben?! Ergibt das nen Sinn?:)
 
passenger hat gesagt.:
nur sind die 3 Zeilen jetzt alle gleich breit, trotz der verschiedenen Höhenangaben?! Ergibt das nen Sinn?:)
Zum Vergrößern anklicken....
Gleich breit, trotz verschiedener Höhenangaben? :suspekt: Nö, das ergibt tatsächlich keinen Sinn :p

Bei mir stimmen die festgelegten Höhen, wenn die Höhendeklaration der inneren Tabelle entfernt wird.

mfg Maik
 
Gleich breit natürlich:)
Hm, wo liegt der Fehler?

html, body {
height: 100%;
margin: 0;
padding: 0;
}

table#outer {
width: 100%;
height: 100%;
text-align: center;
}

table#inner {
width: 700px;
/*height: 280px;*/ /* auskommentiert = deaktiviert */
background: #dadada;
}

table#inner thead {
height: 30px;
}

table#inner tbody {
height: 200px;
}

table#inner tfoot {
height: 50px;
}

table#inner td {
text-align: center;
vertical-align: middle;
}
-->
</style>

</head>
<body>

<table id="outer">
<tr>
<td align="center">
<table id="inner" border="1">
<thead>
<tr><th>thead</th></tr>
</thead>
<tfoot>
<tr><th>tfoot</th></tr>
</tfoot>
<tbody>
<tr><td>tbody</td></tr>
</tbody>

</table>
</td>
</tr>
</table>

</body>
</html>
 
Na super. Sorry das war ein Darstellungsfehler von Dreamweaver. Im netz gehts. Nur is da jetzt leider der table bei FF etwas höher.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück