tabelle zentrieren? @ tutorials.de: Tutorials, Forum & Hilfe

passenger · 08.02.09 01:26

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"> </td>
</tr>
<tr>
<td align="left" valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"> </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

Maik · 08.02.09 01:42

Hi,

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

HTML-Code:

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

passenger · 08.02.09 10:06

Das ging ja fix. Vielen Dank. Probier das gleich mal aus!

passenger · 08.02.09 10:37

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

Maik · 08.02.09 10:45

Moin,

das ginge dann in diese Richtung:

Code :

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

Code :

table#inner {
width: 700px;
[b]/*height: 280px;*/[/b] /* auskommentiert = deaktiviert */
background: #dadada;
}
 
[b]table#inner thead {
height: 30px;
}
 
table#inner tbody {
height: 200px;
}
 
table#inner tfoot {
height: 50px;
}[/b]

mfg Maik

passenger · 08.02.09 11:18

hm. das isses, nur sind die 3 Zeilen jetzt alle gleich breit, trotz der verschiedenen Höhenangaben?! Ergibt das nen Sinn?

Maik · 08.02.09 11:20

Zitat von passenger

nur sind die 3 Zeilen jetzt alle gleich breit, trotz der verschiedenen Höhenangaben?! Ergibt das nen Sinn?

Gleich breit, trotz verschiedener Höhenangaben?

Nö, das ergibt tatsächlich keinen Sinn

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

mfg Maik

passenger · 08.02.09 11:32

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>

passenger · 08.02.09 11:34

Oh mann. Nochmal . 'Gleich hoch'! Jetzt aber

passenger · 08.02.09 11:39

Na super. Sorry das war ein Darstellungsfehler von Dreamweaver. Im netz gehts. Nur is da jetzt leider der table bei FF etwas höher.

Maik · 08.02.09 11:39

Ich kann da browserübergreifend keinen Fehler ausmachen:

mfg Maik

passenger · 08.02.09 11:44

kann mir das gerade irgendwie auch nicht erklären. Habe den background hinter der Tabelle liegen mit den Flaggen unten dran (Sprachauswahl). Und die gucken halt jetzt im FF ein paar pixel unter der Tabelle raus und beim IE nicht. Hm.
Naja, jedenfalls schonmal vielen Dank für deine Hilfe Habe in den letzten 2 Tagen einiges an Nerven gelassen

Gruss, Sandro

passenger · 08.02.09 12:14

Mir ist da noch was eingefallen was ich wohl vergessen habe. Könntest du mir vielleicht noch eine Ergänzung zeigen? Und zwar bräuchte ich noch den head-bereich des tables in 6 Teile unterteilt (6 Oberpunkte).
Dann geh ich Dir nicht mehr auf die Nerven

Schöne Grüsse, Sandro

Maik · 08.02.09 12:17

Diese Unterteilung ist doch in deinem eingangs gezeigten Code enthalten

Ansonsten empfehle ich dir, dich in das Kapitel Aufbau einer Tabelle einzulesen, damit du weitere Aus- und/oder Umbauarbeiten im Tabellengerüst selbständig durchführen kannst.

mfg Maik

passenger · 08.02.09 12:27

ok das mach ich! Wo ich jetzt einmal dabei bin hätte ich doch noch ein kleines Problem. Und zwar habe ich 5 verschiedene Hintergrundbilder für die Startseite. Weisst du vielleicht wie ich es einstellen kann das die per Zufall wechseln? Also bei jedem Aufrufen der Seite ein anderes angezeigt wird? Habe schon in vielen Foren was dazu gesehen aber irgendwie hat mir nichts geholfen?!
Hast da vielleicht ne Idee?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Tabelle zentrieren

Tabelle zentrieren...

Tabelle Zentrieren

Tabelle Zentrieren

Tabelle zentrieren

Stichworte

E-Mail:

Abonnieren Abbestellen