SELFHTML Forum Doku Wiki Blog

Forumsarchiv 2008, September
Tabelle Mittig ausrichten?

archivierte Beiträge lesen

  1. CSS Tabelle Mittig ausrichten? baeckerman83 01. 09. 2008, 18:30

Tabelle Mittig ausrichten?

baeckerman83 01. 09. 2008, 18:30

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>

Tabelle Mittig ausrichten?

steckl 01. 09. 2008, 18:38

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

Tabelle Mittig ausrichten?

Harlequin 01. 09. 2008, 18:41

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

Tabelle Mittig ausrichten?

baeckerman83 01. 09. 2008, 20:09

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.

Tabelle Mittig ausrichten?

Gunnar Bittersmann 02. 09. 2008, 08:54

@@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.

© 1998-2014 SELFHTMLImpressumSoftware: Classic Forum 3.4