• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

...gesamten Inhalt einer Internetseite mittig zentrieren...

Status
Für weitere Antworten geschlossen.

axelspringer23

Neues Mitglied
Hallo Zusammen,

ich bin totaler Anfänger und Amateur also bitte nicht lachen ;-)
Seit einer Weile versuche ich die die Seite die weiter unten als Quelltext zu finden ist, mittig auszurichten. Das heißt, links und rechts der Tabelle sollen zum rand des Bildschirms die gleichen Abstände sein.
Würde mich freuen wenn mich jemand von Euch von meiner Unwissenheit erlösen könnte.

MfG

Dennis

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <link rel="shortcut icon" href="img/Icon.ico" type="image/x-icon">
  <title>www.dennisbuehler.de</title>

  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
A { TEXT-DECORATION: none }
  </style>
</head>

<body style="color: rgb(255, 255, 255); background-image: url(img/0815.jpg); margin-left: 0px; width: 723px; margin-top: 1px; height: 100%;" alink="#ffffff" link="#ffffff" vlink="#ffffff">
<!--Muster f. den hintergrund-->
<table style="border: 1px solid rgb(88, 91, 52); background-position: center; vertical-align: middle; border-collapse: collapse; background-color: rgb(187, 192, 109); text-align: left; margin-left: auto; margin-right: auto; height: 100%; width: 600px;" rules="all">
<!--generelle Regeln f. alle folgenden Tabellen--><tbody>
    <tr>
<!--Feld 1 oben/ Tatra Hintergrund-top--> <th colspan="2" style="border: 1px solid rgb(88, 91, 52); border-collapse: collapse; background-image: url(img/tatra.gif); font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; height: 95px; letter-spacing: 0px; padding-left: 10px; padding-top: 4px; padding-right: 10px; text-align: right; vertical-align: top; word-spacing: 1px;">
      <a href="mailto:[email protected]?subject=Info/Kontakt">www.dennisbuehler.de</a></th>
    </tr>
    <tr>
<!--linke Spalte unten--> <td style="border: 1px solid rgb(88, 91, 52); border-collapse: collapse; font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; height: 300px; letter-spacing: 0px; padding-left: 5px; text-align: left; vertical-align: top; width: 25%; word-spacing: 2px;"><br>
      <a href="http://www.antifa.de"> <img src="img/aa.jpg" alt="antifa" style="margin-left: 12px;" align="middle" border="0" height="97" width="97"></a><br>
      <br>
<a href="ubuntugnulinux.html">&raquo; Ubuntu/GNU/Linux</a><br>
      <a href="studium.html">&raquo; Studium</a><br>
      <a href="foto.html">&raquo; Fotografieren</a><br>
      <a href="kontakt.html">&raquo; Kontakt</a>
      <br>
      <br>
      <a href="http://www.studivz.net/"><img src="img/studivz.gif" alt="studivz" style="margin-left: 22px;" align="middle" border="0" height="15" width="80"></a><br><br>
<a href="mailto:[email protected]?subject=Info/Kontakt">Student sucht <BR>Nebenbesch&auml;ftigung</a><br>

<div style="font-family: Verdana; font-size: 9px; font-variant: normal; letter-spacing: 0px; padding-left: 2px; padding-right: 2px; position: static; text-align: left;" align="justify">
      <p><a href="mailto:[email protected]?subject=Info/Kontakt">
 
...auf 400 Euro Basis im Raum Berlin Ost (A/B). Auch gerne kurzfristig.
Bin zeitlich flexibel, belastbar und zuverl&auml;ssig. Bei
Interesse bitte einfach diesen Textzeilen anklicken und eine kurze
email schreiben. R&uuml;ckmeldung innerhalb 24 Stunden garantiert.</a></p>
      </div>

 <br>
      <img src="http://www.nvu.com/images/madewithNvu80x15clear.png">
      <br>
      </td>
      <br>
<!--rechte Spalte unten--> <td style="border: 1px solid rgb(88, 91, 52); padding: 4px 10px 10px; border-collapse: collapse; font-family: Verdana,Arial,Impact; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; height: 300px; letter-spacing: 0px; text-align: left; vertical-align: top; width: 75%; word-spacing: 0px;">Sie
sind auf einer privaten homepage gelandet. Diese Seite hat kein
bestimmtes Ziel und wird nur zum Spass betrieben.<br>
      <br>
-online seit dem 25.07.2006 14:24<br>
-letztes update 05.05.2007 22:30<br>
-optimiert f&uuml;r <a href="http://www.mozilla-europe.org/de/" target="_blank" style="color: rgb(255, 51, 0);">Mozilla
Firefox</a> <br>
      <br>
      <script type="text/javascript">
if(navigator.javaEnabled());
{document.write("In Ihrem Browser ist Java aktiviert!"); }
document.write(navigator.userAgent);
document.write(navigator.platform);
      </script>
      <br>
      <br>
<!--Bild-->
      <p align="center"><img src="img/pumpe.gif" alt="Pumpe" style="border-color: rgb(88, 91, 52);" align="middle" border="1" height="227" width="388"></p>
      <p>(Alte Pumpstation Kreuzberg)</p>
<!--Text und Erklaerung z.d. links i.d. rechten Spalte-->

      <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Wer
mit mir Kontakt aufnehmen m&ouml;chte findet hier alle
notwendigen Angaben</div>
<!--Text und Erklaerung z.d. links i.d. rechten Spalte-->
      <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;"><a href="ubuntugnulinux.html">&raquo; Ubuntu/GNU/Linux</a></div>
      <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Hier
soll es vorrangig um <a href="http://de.wikipedia.org/wiki/Ubuntu" target="_blank" style="color: rgb(255, 51, 0);">Ubuntu</a>
gehen. Da ich auch einen Beitrag zur sagenhaften Arbeit der Community
leisten m&ouml;chte, habe ich mich entschieden bei <a href="http://forum.ubuntuusers.de/" target="_blank" style="color: rgb(255, 51, 0);">ubuntuusers.de</a> ein
oder mehrere Wikis zu erstellen die dann parallel hier zur
Verf&uuml;gung stehen werden.</div>
      <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;">
      <a href="studium.html">&raquo; Studium</a></div>
      <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Tja,
wie der Name schon sagt. Thema Studium. Ab April werde ich an
der <a href="http://www.fhtw-berlin.de/" target="_blank" style="color: rgb(255, 51, 0);">FHTW Berlin </a>
den Bachelor Studiengang "Bauingenieurswesen" besuchen. Dieser Bereich wird sich damit besch&auml;ftigen. 
</div>
      <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;">
      <a href="page1.html">&raquo; Fotografieren</a></div>

 <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Hier wird eine Art Reisetagebuch mit Erlebnisberichten, Informationsmaterial und vor allem selbstgemachten Fotografien entstehen.</div>
 
      <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;">
      <a href="kontakt.html">&raquo; Kontakt</a></div>
      <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Wer
mit mir Kontakt aufnehmen m&ouml;chte findet hier alle
notwendigen Angaben</div>
      </td>
    </tr>
  </tbody>
</table>
<br>
<br>
</body>
</html>
 
Versuch es mal mit folgendem:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="shortcut icon" href="img/Icon.ico" type="image/x-icon"> <title>www.dennisbuehler.de</title> <meta name="GENERATOR" content="Quanta Plus"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css">
A { TEXT-DECORATION: none }
  </style> </head> <body style="color: rgb(255, 255, 255); background-image: url(img/0815.jpg); margin-left: 0px; width: 723px; margin-top: 1px; height: 100%;" alink="#ffffff" link="#ffffff" vlink="#ffffff"> 
[b]<div style="margin: 0px auto;width: 723px;">[/b]
<!--Muster f. den hintergrund--> <table style="border: 1px solid rgb(88, 91, 52); background-position: center; vertical-align: middle; border-collapse: collapse; background-color: rgb(187, 192, 109); text-align: left; margin-left: auto; margin-right: auto; height: 100%; width: 600px;" rules="all"> <!--generelle Regeln f. alle folgenden Tabellen--><tbody> <tr> <!--Feld 1 oben/ Tatra Hintergrund-top--> <th colspan="2" style="border: 1px solid rgb(88, 91, 52); border-collapse: collapse; background-image: url(img/tatra.gif); font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; height: 95px; letter-spacing: 0px; padding-left: 10px; padding-top: 4px; padding-right: 10px; text-align: right; vertical-align: top; word-spacing: 1px;"> <a href="mailto:[email protected]?subject=Info/Kontakt">www.dennisbuehler.de</a></th> </tr> <tr> <!--linke Spalte unten--> <td style="border: 1px solid rgb(88, 91, 52); border-collapse: collapse; font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; height: 300px; letter-spacing: 0px; padding-left: 5px; text-align: left; vertical-align: top; width: 25%; word-spacing: 2px;"><br> <a href="http://www.antifa.de"> <img src="img/aa.jpg" alt="antifa" style="margin-left: 12px;" align="middle" border="0" height="97" width="97"></a><br> <br> <a href="ubuntugnulinux.html">&raquo; Ubuntu/GNU/Linux</a><br> <a href="studium.html">&raquo; Studium</a><br> <a href="foto.html">&raquo; Fotografieren</a><br> <a href="kontakt.html">&raquo; Kontakt</a> <br> <br> <a href="http://www.studivz.net/"><img src="img/studivz.gif" alt="studivz" style="margin-left: 22px;" align="middle" border="0" height="15" width="80"></a><br><br> <a href="mailto:[email protected]?subject=Info/Kontakt">Student sucht <BR>Nebenbesch&auml;ftigung</a><br> <div style="font-family: Verdana; font-size: 9px; font-variant: normal; letter-spacing: 0px; padding-left: 2px; padding-right: 2px; position: static; text-align: left;" align="justify"> <p><a href="mailto:[email protected]?subject=Info/Kontakt">
 
...auf 400 Euro Basis im Raum Berlin Ost (A/B). Auch gerne kurzfristig.
Bin zeitlich flexibel, belastbar und zuverl&auml;ssig. Bei
Interesse bitte einfach diesen Textzeilen anklicken und eine kurze
email schreiben. R&uuml;ckmeldung innerhalb 24 Stunden garantiert.</a></p> </div> <br> <img src="http://www.nvu.com/images/madewithNvu80x15clear.png"> <br> </td> <br> <!--rechte Spalte unten--> <td style="border: 1px solid rgb(88, 91, 52); padding: 4px 10px 10px; border-collapse: collapse; font-family: Verdana,Arial,Impact; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; height: 300px; letter-spacing: 0px; text-align: left; vertical-align: top; width: 75%; word-spacing: 0px;">Sie
sind auf einer privaten homepage gelandet. Diese Seite hat kein
bestimmtes Ziel und wird nur zum Spass betrieben.<br> <br>
-online seit dem 25.07.2006 14:24<br>
-letztes update 05.05.2007 22:30<br>
-optimiert f&uuml;r <a href="http://www.mozilla-europe.org/de/" target="_blank" style="color: rgb(255, 51, 0);">Mozilla
Firefox</a> <br> <br> <script type="text/javascript">
if(navigator.javaEnabled());
{document.write("In Ihrem Browser ist Java aktiviert!"); }
document.write(navigator.userAgent);
document.write(navigator.platform);
      </script> <br> <br> <!--Bild--> <p align="center"><img src="img/pumpe.gif" alt="Pumpe" style="border-color: rgb(88, 91, 52);" align="middle" border="1" height="227" width="388"></p> <p>(Alte Pumpstation Kreuzberg)</p> <!--Text und Erklaerung z.d. links i.d. rechten Spalte--> <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Wer
mit mir Kontakt aufnehmen m&ouml;chte findet hier alle
notwendigen Angaben</div> <!--Text und Erklaerung z.d. links i.d. rechten Spalte--> <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;"><a href="ubuntugnulinux.html">&raquo; Ubuntu/GNU/Linux</a></div> <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Hier
soll es vorrangig um <a href="http://de.wikipedia.org/wiki/Ubuntu" target="_blank" style="color: rgb(255, 51, 0);">Ubuntu</a>
gehen. Da ich auch einen Beitrag zur sagenhaften Arbeit der Community
leisten m&ouml;chte, habe ich mich entschieden bei <a href="http://forum.ubuntuusers.de/" target="_blank" style="color: rgb(255, 51, 0);">ubuntuusers.de</a> ein
oder mehrere Wikis zu erstellen die dann parallel hier zur
Verf&uuml;gung stehen werden.</div> <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;"> <a href="studium.html">&raquo; Studium</a></div> <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Tja,
wie der Name schon sagt. Thema Studium. Ab April werde ich an
der <a href="http://www.fhtw-berlin.de/" target="_blank" style="color: rgb(255, 51, 0);">FHTW Berlin </a>
den Bachelor Studiengang "Bauingenieurswesen" besuchen. Dieser Bereich wird sich damit besch&auml;ftigen. 
</div> <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;"> <a href="page1.html">&raquo; Fotografieren</a></div> <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Hier wird eine Art Reisetagebuch mit Erlebnisberichten, Informationsmaterial und vor allem selbstgemachten Fotografien entstehen.</div> <div style="font-family: 'Verdana'; font-size: 13px; font-style: normal; font-variant: inherit; font-weight: 300; letter-spacing: 0px; padding-left: 10px; text-align: left; vertical-align: top; word-spacing: 2px;"> <a href="kontakt.html">&raquo; Kontakt</a></div> <div style="padding: 4px 10px 10px; font-family: Verdana; font-size: 9px; font-style: inherit; font-variant: normal; font-weight: normal; letter-spacing: 0px; text-align: left; vertical-align: top; word-spacing: 0px;">Wer
mit mir Kontakt aufnehmen m&ouml;chte findet hier alle
notwendigen Angaben</div> </td> </tr> </tbody> </table> <br> <br> [b]</div>[/b]
</body> </html>
Desweiteren solltest du Tabellen nicht zum Layouten nutzen.
CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
 
Dann nimm mal die breitenangabe für deinen body raus. Ausserdem tust du dir einen großen Gefallen, wenn du das CSS vom HTML trennst ;)
 
Mach es in einer externen CSS am besten, und füge das ein:
Code:
body {
/* Für den IE */
text-align:center;
}

div, table {
/* Für die restlichen Browser */
margin-left:auto;
margin-right:auto;
}
MfG, matibaski
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben