baeckerman83: Tabelle Mittig ausrichten?

SELF-Forum

Tabelle Mittig ausrichten?

baeckerman83
– Informationen zu den Bewertungsregeln

ich habe auf meiner Seite eine Tabelle, diese ist aber immer links bündig, und ich bekomme sie nicht mittig.

body {  
    font: normal 100.01% Helvetica, Arial, sans-serif;  
    color: #FFFFFF; background-color: #660000;  
    text-align:center;  
}  
  
  
#container {  
width:70em;  
margin: 0 auto;  
padding:0;  
text-align:left;  
}  
  
#content {  
margin: 5px;  
clear:both;  
}  
  
#header {  
}  
  
#footer {  
color: #FFFFFF; background-color: #660000;  
text-decoration: none;  
font-weight: bold;  
font-size: small;  
clear:both;  
margin-bottom:10px;  
}  
  
#kilometer {  
color: #FFFFFF;  
float: left;  
width:175px;  
}  
  
#menu {  
float:left;  
}  
  
#counter {  
color: #FFFFFF;  
float:right;  
width:175px;  
text-align:right;  
    font-weight: bold;  
    font-size:large  
}  
  
  
#spieltag {  
font-size: small;  
float: left;  
margin-top:25px;  
width:175px;  
padding:0;  
text-align:center;  
}  
  
#bericht {  
margin-top:25px;  
margin-left:25px;  
float:left;  
}  
  
#werbung {  
float:right;  
margin-bottom:75px;  
margin-top:25px;  
}  
  
#name {  
color: #FFFFFF; background-color: #660000;  
float:left;  
width:250px;  
}  
  
#impressum a{  
color: #FFFFFF; background-color: #660000;  
float:right;  
width:250px;  
text-align:right;  
}  
  
  
table {  
    padding: 0;  
    margin: 0;  
   }  
  
#menu  td, #spieltag td {  
    text-decoration: none; font-weight: bold;  
    text-align: center;  
    color: #FFFFFF; background-color: #660000;  
  }  
  
  td a:hover {  
    color: #660000; background-color: #FFFFFF;  
    display: block;  
    }  
  td a {  
 font: normal 125% Helvetica, Arial, sans-serif;  
    color: #FFFFFF; background-color: #660000;  
    text-decoration: none;  
    font-weight: bold;  
    display: block;  
    }  
  td a.active {  
    color: #FAC714; background-color: #660000;  
    display: block;  
    }  
  
#autor {  
float: left;  
margin-right: 20px;  
font-size: small;  
}  
  
#datum {  
font-size: small;  
}  
  
#bericht h1 {  
font-style: italic;  
 font-weight: bold;  
    text-align: center;  
    font-size: x-large;  
}  
  
#bericht h1 {  
font-style: italic;  
 font-weight: bold;  
    text-align: center;  
}  
  
  
#text {  
width: 750px;  
text-align:justify  
}  
  
#blaettern {  
border: 1px solid white;  
}  
  
#blaettern a{  
font-size: small;  
text-decoration: none;  
color: #FFFFFF;  
}  
  
#blaettern a:hover{  
font-size: small;  
text-decoration: none;  
color: #FAC714;  
}  
  
#spieltag table {  
font-size: small;  
border-spacing:0px;  
}  
  
.img {  
float:right;  
margin:5px;  
}  
  
#fotomenu input {  
border: 1px solid black;  
background-color: #FFFFFF;  
color: #660000;  
font-weight: bold;  
}  
  
a {  
    color: #FFFFFF;  
    font-weight: bold;  
    }  
  
#fotomenu a {  
    color: #FFFFFF; background-color: #660000;  
    text-decoration: none;  
    font-weight: bold;  
    width: 175px;  
    display: block;  
}  
#fotomenu a:hover {  
    color: #FFFFFF; background-color: #660000;  
    width: 175px;  
    display: block;  
    }  
  
#fotomenu {  
margin-top: 10px;  
margin-left: 10px;  
margin-right: 75px;  
width: 175px;  
float: left;  
}  
  
#kilometer p {  
text-align:center;  
}  
  
#kilometer a:hover {  
    color: #660000;  
    background-color: #FFFFFF;  
    font-weight: bold;  
    font-size:large  
    }  
#kilometer a{  
    font-weight: bold;  
    font-size:large  
    }  
  
#kilometer a:active {  
    color: #FAC714;  
    background-color: #660000;  
    }  
  
#bericht td, #bericht th{  
text-align: center;  
padding-left:50px;  
}  
  
#fotos {  
margin-left: 250px;  
}  
  
#ausblenden {  
display: none;  
}

  
<head>  
<title>Penalty Crew Hildesheim</title>  
<link rel='stylesheet' type='text/css' href='style.css'>  
  
</head>  
<body>  
  
  
<div id='container'>  
<div id='header'>  
<div id='counter'>  
Besucher:<br><br>  
<!-- Beginn Grafikcounter -->  
<script language='JavaScript' SRC='http://www.hitmaster.de/hm3c.php?cid=171974'></script>  
  
<!-- Ende Grafikcounter -->  
</div>  
  
<div id='kilometer'><a href='tabellekm.php'>Kilometerz&auml;hler</a><p><img src='0.jpg' alt='0' width='25'><img src='.jpg' alt='' width='25'><img src='3.jpg' alt='3' width='25'><img src='0.jpg' alt='0' width='25'><img src='0.jpg' alt='0' width='25'><img src='2.jpg' alt='2' width='25'></p></div>  
  
<div id='menu'>  
<table>  
<tr>  
<td>&nbsp;</td>  
<td><a class='navigation' href='historie.php'>Historie</a></td>  
<td>&nbsp;</td>  
<td><a class='navigation' href='fotos.php'>Fotos</a></td>  
<td>&nbsp;</td>  
  
<td><a class='navigation' href='archiv.php'>Archiv</a></td>  
<td>&nbsp;</td>  
</tr>  
<tr>  
<td><a class='navigation' href='index2.php'>Startseite</a></td>  
<td>&nbsp;</td>  
<td><a class='navigation' href='mitglieder.php'>Mitglieder</a></td>  
<td>&nbsp;</td>  
<td><a class='navigation' href='gaestebuch.php'>G&auml;stebuch</a></td>  
<td>&nbsp;</td>  
<td><a class='' href='links.php'>Links</a></td>  
  
</tr>  
</table>  
</div>  
  
</div>  
<div id='content'>  
<div id='werbung'>  
<script type='text/javascript'><!--  
google_ad_client = 'pub-3687915219611675';  
/* 120x600, Erstellt 21.08.08 */  
google_ad_slot = '3188532128';  
google_ad_width = 120;  
google_ad_height = 600;  
//-->  
</script>  
<script type='text/javascript'  
src='http://pagead2.googlesyndication.com/pagead/show_ads.js'>  
</script>  
</div><div id='spieltag'><div id='ergebnisse'>3. Spieltag<br><br>Duisburg : Augsburg<br>2:0<br>Mainz 05 : Osnabr&uuml;ck<br>4:2<br>Ingolstadt : 1. FCK<br>1:3<br>N&uuml;rnberg : Aachen<br>2:2<br>St. Pauli : Oberhausen<br>4:1<br>Koblenz : Wehen<br>0:0<br>Frankfurt : F&uuml;rth<br>1:1<br>Ahlen : TSV 1860<br>2:1<br>Freiburg : Rostock<br>?:?<br><div id='blaettern'><a href='/index2.php?stawid=2'>-1 Spieltag </a></div></div><br><hr><br><table><tr><th>Pl.</th><th>Team</th><th>Pkt.</th></tr><tr><td>1. </td><td>Mainz 05</td><td>7</td></tr><tr><td>2. </td><td>1. FCK</td><td>7</td></tr><tr><td>3. </td><td>Ahlen</td><td>6</td></tr><tr><td>4. </td><td>Duisburg</td><td>5</td></tr><tr><td>5. </td><td>F&uuml;rth</td><td>4</td></tr><tr><td>6. </td><td>Freiburg</td><td>4</td></tr><tr><td>7. </td><td>Rostock</td><td>4</td></tr><tr><td>8. </td><td>St. Pauli</td><td>4</td></tr><tr><td>9. </td><td>N&uuml;rnberg</td><td>4</td></tr><tr><td>10. </td><td>Aachen</td><td>4</td></tr><tr><td>11. </td><td>Augsburg</td><td>3</td></tr><tr><td>12. </td><td>Ingolstadt</td><td>3</td></tr><tr><td>13. </td><td>Oberhausen</td><td>3</td></tr><tr><td>14. </td><td>Koblenz</td><td>2</td></tr><tr><td>15. </td><td>Frankfurt</td><td>2</td></tr><tr><td>16. </td><td>Wehen</td><td>2</td></tr><tr><td>17. </td><td>Osnabr&uuml;ck</td><td>2</td></tr><tr><td>18. </td><td>TSV 1860</td><td>0</td></tr></table></div><div id='bericht'><div id='text'><h1>Der Osten</h1><p>Um  [..] ebenfalls... <a href='index2.php?textid=19'>weiter lesen</a></p></div><div id=foto'><a href='fotos.php?fotoid=2&spielort=1'>Bilder finden Sie hier</a></div><br><div id='autor'>Erstellt von: Harry die dicke Legende</div><div id='datum'>Erstellt am: 29.5.2008</div></div></div><div id='footer'>  
<hr>  
  
<div id='name'>Penalty-Crew-Hildesheim</div>  
<div id='impressum'><a href='impressum.php'>Impressum</a></div>  
<br>  
  
</div>  
</div>  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Tabelle Mittig ausrichten?

    steckl
    – Informationen zu den Bewertungsregeln

    Hi,

    ich habe auf meiner Seite eine Tabelle, diese ist aber immer links bündig, und ich bekomme sie nicht mittig.

    Um welche Tabelle geht es? Außerdem wäre es gut, wenn du nur ein kleines Code-Beispiel posten würdest, damit man sich nicht erst durch den ganzen Code "kämpfen" muss.

    Aber in deinem Fall reicht wohl eh ein Blick in die FAQ.

    mfG,
    steckl

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Tabelle Mittig ausrichten?

    Harlequin
    – Informationen zu den Bewertungsregeln

    Yerf!

    text-align:center;

    Das zentriert nur Textinhalt, keine Blockelemente (außer im IE <=6, der es natürlich mal wieder falsch macht)

    table {
        padding: 0;
        margin: 0;
       }

    Ein margin 0 auto; sollte das Problem lösen (dadurch erhält die tabelle links und rechts den gleichen Abstand und ist somit zentriert).

    PS: dein Code ist eine ziemliche Tabellen und DIV-Wüste. Da solltest du nochmal drüber gehen. Es hat schon einen Grund, weshalb es in HTML Elemente für Listen, Überschriften usw. gibt...

    Gruß,

    Harlequin

    --
    <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Tabelle Mittig ausrichten?

      baeckerman83
      – Informationen zu den Bewertungsregeln

      Hi!
      Danke, aber das hilft leider auch nicht. Er zeigt dann oben noch einen Abstand an, obwohl da ja 0 steht, links und rechts macht er das Auto.

      Ich hatte extra erst das Box Modell gebaut, mit 12 Boxen, eine um alles und dann Die Seite in 9 Felder geteilt. Erst vertikal 3 und dann noch mal jede Zeile Horizontal in 3. Daher die vielen Divs. Mir kam da leider keine andere Idee.

      Ok bei Autor und Datum das ist etwas viel, das ginge auch mit einer class.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Tabelle Mittig ausrichten?

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@baeckerman83:

        Danke, aber das hilft leider auch nicht. Er zeigt dann oben noch einen Abstand an,

        Vielleicht der untere Abstand der Box darüber? Das Firebug-Plugin fürn Firefox hilft, das herauszufinden.

        Live long and prosper,
        Gunnar

        --
        Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln