Danny: Seite zentrieren

Beitrag lesen

Hallo alle zusammen!

Nach dem ich eine weile im Internet gesucht habe und auch die Tipps von selfhtml probiert habe, komm ich jetzt gar nicht mehr weiter und bitte euch um Hilfe.

Ich habe die Tipps ausprobiert, besonders auch das hier:

  
body  {  
   text-align:center;  
}  
  
#AllesDiv {  
   text-align:left;  
   margin:0 auto;  
   width: 780px; /* oder eine andere gewuenschte Breite */  
}

Nur klappt jetzt leider gar nichts mehr! Ich komme einfach nicht mehr weiter. Hab keine Ahnung was ich alles ändern muss. Ich gebe euch hier mal eine html Unterseite von mir:

  
<?xml version="1.0" ?>  
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<meta http-equiv="imagetoolbar" content="no" />  
<meta name="robots" content="index, follow" />  
<meta name="author" content="xxxxxxxxxx" />  
<meta http-equiv="content-language" content="de" />  
<meta name="description" content=" " />  
<meta name="keywords" content=" " />  
  
<title>Das Wissensportal: Web 2.0 und RFID</title>  
  
  
  
  
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, projection" title="Default"/>  
  
</head>  
<body>  
  
<table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>  
  
<img src="images/bg-oben.gif" alt=" " /><br />  
<div id="hintergrund-div">  
	<div id="inhalt-div">  
		<div id="inhalt-container-div">  
  
			  
			<div id="linksoben"><img src="images/header.jpg" alt="Insel des Wissens"  /></div>  
      <div id="mitteoben"><img src="images/banner01.gif" alt="Seitename" /></div>  
      <div id="rechtsoben"><img src="images/logo.gif" alt="Modifizierter Portalschlüssel aus dem Film Startrek" /></div>  
  
			<div id="navigation-div">  
				<a href="index.html"><span class="place">Startseite</span></a>  
			  <a href="web_2.0.html">Web 2.0</a>  
				<a href="rfid.html">RFID</a>  
				<a href="kontakt.html">Kontakt</a>  
				<a href="impressum.html">Impressum</a>  
				  
			</div>  
			  
			<div id="text-div">  
				<h2>Willkommen auf der Homepage von Daniel Rogg und Steffen Altenhof</h2>  
			  <h3>Ihrem Wissensportal</h3>  
				<p>&nbsp;</p>  
				<p>Aufgrund der Vorlesung Web-Grundtechniken an der Hochschule Ravensburg-Weingarten, ist diese Homepage entstanden.  
        Sie beschäftigt sich mit den Themen Web 2.0 und RFID. Wir hoffen Ihnen einen Üblick über diese Themenbereiche geben zu können  
        und wünschen Ihnen viel Spaß beim Surfen.</p>  
				<p>&nbsp;</p>  
				<p>Zu unseren Themegebieten gehören:</p>  
				<p>&nbsp;</p>  
        <table  cellspacing="0" cellpadding="0" border="0" rules="none" frame="box">  
  
        <colgroup>  
          <col width="150"/>  
          <col width="250"/>  
          <col width="150"/>  
          <col width="350"/>  
  
        </colgroup>  
        <tbody valign="top" align="left">  
  
          <tr><td rowspan="7" class="web"> Web 2.0 </td>  
          <td><td rowspan="7" class="rfid">RFID </td></td></tr>  
  
          <tr><td><a href="web_2.0.html">Der Begriff "Web 2.0"</a></td>  
          <td><a href="rfid.html">Der Begriff "Rfid"</a></td></tr>  
  
          <tr><td><a href="netzwerke.html">Soziale Netzwerke</a></td>  
          <td><a href="transponder.html">Der Rfid Transponder</a></td></tr>  
  
          <tr><td><a href="wikis.html">Wikis</a></td>  
          <td><a href="schreib_lesegerät.html">Die Rfid Schreib- und Lesegeräte</a></td></tr>  
  
          <tr><td><a href="foren.html">Foren</a></td>  
          <td><a href="einsatzgebiet.html">RFID im Haushalt</a></td></tr>  
  
  
          <tr><td><a href="cloud.html">Cloud Computing</a></td>  
          <td><a href="vorteile-nachteile.html">Vor-/Nachteile</a></td></tr>  
  
  
        </tbody>  
        </table>  
			 </div>  
  
    		<div id="balken-div">&nbsp;</div>  
		    <div id="footer-div">  
				  <div class="anschrift">xxxxxxxxxxxxxx - xxxxxxxxxxxxxxxxxxxxxl</div>  
				 xxxxxxxxxxxxxxxxxx Email: <a href="mailto:xxxxxxxxxxxxxxxxxxxxxxxx">xxxxxxxxxxxxxx</a>  
				  <div class="anschrift">xxxxxxxxxxxxxx - xxxxxxxxxxx - xxxxxxxx</div>  
				  Tel.: xxxxxxxxxx- Emai: <a href="mailto:xxxxxxxxxxxxxxxxxxx">xxxxxxxxxxxxxxxxxxx</a>  
			  </div>  
  		</div>  
	</div>  
</div>  
<img src="images/bg-unten.gif" alt=" " /><br />  
  
</td></tr></table>  
</body>  
  
</html>  

hier möchte ich die tabelle, die noch gleich unter dem <body> tag ist raus bekommen und das ganze eben in CSS machen bzw. so muss es auf jeden Fall gemacht werden. Meine CSS Datei sieht so aus:

  
body					{ margin:0; padding:0; font-family:arial,helvetica,sans-serif; background-color:#f1f1f1; }  
  
#hintergrund-div		  { width:970px; background-image:url(images/bg-mitte.gif); background-repeat:repeat-y; }  
#inhalt-div				    { padding:0 13px 0 10px; }  
#inhalt-container-div	{ width:947px; background-color:#ffdede; }  
  
#logo-div				  { background-color:#fff; }  
#logo-cell				{ text-align: right; vertical-align: top; padding-right: 10px; padding-bottom: 10px; }  
#header-cell			{ width: 410px; }  
  
#navigation-div			{ clear:left; border: none; height: 18px; padding-top:2px; background-image:url(images/navi-bg.jpg); background-repeat:repeat-x; background-color:#6e1a1a; font-size: 12px; }  
#navigation-div	a		{ padding-left: 60px; color:#ffffff; font-size: 14px; font-weight:bold; }  
  
#text-div				  { background-image:url(images/bg-content.jpg); background-repeat:repeat; padding: 20px 40px 10px 30px; font-size: 13px; }  
#text-div td			{ border: 0; padding: 20px 50px 10px 30px; font-size: 12px; }  
#text-div tr			{ border: 0;}  
#text-div a       { color:black;}  
  
  
#balken-div				{ width:947px; background-image:url(images/navi-bg.jpg); height:10px; font-size: 1px; background-color:#6e1a1a; }  
#footer-div				{ padding: 5px; background-color:#fff; color: #222; text-align:center; font-size: 12px; }  
#footer-div p			{ margin: 5px 0; }  
#footer-div	a			{ color: #222; }  
  
#linksoben    {float: left; position: relative; }  
#mitteoben    {float: left;}  
#rechtsoben   {float: left;}  
  
  
.navigation-class			  { clear:left; border: none; height:27px; padding-top:2px; background-image:url(images/navi-bg.jpg); background-repeat:repeat-x; background-color:#6e1a1a; font-size: 12px; }  
.navigation-class	a		  { padding-left: 60px; color:#ffffff; font-size: 14px; font-weight:bold; }  
.navigation-class2			{ clear:left; border: none; height:18px; padding-top:2px; background-image:url(images/navi-bg.jpg); background-repeat:repeat-x; background-color:#6e1a1a; font-size: 12px; }  
.navigation-class2 a		{ padding-left: 60px; color:#ffffff; font-size: 12px;}  
  
.mitte        {  text-align:center; }  
  
.web          { font-weight:bold; font-size: 14px; }  
.rfid         { font-weight:bold; font-size: 20px; }  
.anschrift	  { font-size:13px; font-weight:bold; }  
.ausstellung	{ font-size:13px; font-weight:bold; }  
.place        { color:orange }  
  
p						  { margin-top:0; margin-bottom:0; text-align:justify; }  
  
h2						{ font-size:20px; color:#6e1a1a; font-weight:bold; margin:-4px 0 10px 0; }  
h3						{ font-size:16px; color:#ff8400; font-weight:bold; margin:-4px 0 10px; }  
h4						{ margin:0; }  
  
img						{ border:0; }  
ul						{ margin-top:0; }  
  
a:link					{ color:#ffffff; text-decoration:none; }  
a:visited				{ color:#ffffff; text-decoration:none; }  
a:focus					{ color:#ffffff; text-decoration:none; }  
a:hover					{ text-decoration:underline; }  
a:active				{ color:#ffffff; text-decoration:none; }  

Ihr könnt es ja probieren und die Lösung die klappt und auch nicht sehr aufwendig/kompliziert ist, mir dann erklären.

Vielen lieben Dank!

Grüße