# Befehl um eine Site im Browserfenster zu zentrieren



## tobnice (30. November 2007)

Hallo! 
Ich mache meine erste Website und möchte gerne wissen wo ich den Html- Befehl finden kann, um die komplette Site im Browserfenster zu zentrieren.
Vielen dank im Vorraus Bérénice


----------



## Maik (30. November 2007)

Hi,

mit einer Breitenangabe (relativ oder absolut) lässt sich ein Element mit der CSS-Angabe margin:0 auto im Browserfenster horizontal zentrieren.


```
div#wrapper {
width:700px;
margin:0 auto;
}
```


```
<body>
    <div id="wrapper"> <!-- Hier folgen die weiteren Seitenbereiche --> </div>
</body>
```


----------



## tobnice (30. November 2007)

ok.
Es tut mir sehr  leid, aber ich habe wirklich keine Ahnung! 
Ist das die zuständige Zeile,denn ich soll eine bestehende Site verändern :

margin-bottom:0;
margin-left:0; margin-right:0; margin-top:0; background-color:#eeeeee;}

?
gruß B.


----------



## Maik (30. November 2007)

Entweder ersetzt du die vier margin-Angaben durch meinen Vorschlag, oder du schreibst:


```
margin-bottom:0;
margin-left:auto; 
margin-right:auto; 
margin-top:0;
```
was nichts anderes ausdrückt.


----------



## tobnice (30. November 2007)

keiner der  Befehle führte zu irgendeiner veränderung..


----------



## Maik (30. November 2007)

Besitzt denn das Element auch eine feste Breite?


----------



## tobnice (30. November 2007)

Also ich habe nur das gefunden ...(wie gesagt ich habe leider überhaupt keine ahnung von sowas)

/* CSS Document test */
<body style="background:url(./images/background13.jpg);background-repeat:no-repeat;background-color:#dddddd">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tbody>
	<tr>
		<td align="left" valign="top">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tbody>
			<tr>
				<td width="780" align="left" valign="top" 
				<table width="780" border="0" cellspacing="0" cellpadding="0">
					<tbody>

meinen Sie das?


----------



## Maik (30. November 2007)

Mach mal aus


```
<td width="780" align="left" valign="top">
```
das hier:


```
<td width="100%" align="center" valign="top">
```


----------



## tobnice (30. November 2007)

Die site is immer noch da wo sie vorher war. Nur 2 buttons, die sich wenn ich mir die Site im IE anschaue auch immer aus der site herausrutschen. die zentrieren sich dann.


----------



## Maik (30. November 2007)

Bei mir wird die Tabelle mit der 780px-Breite in allen mir zur Verfügung stehenden Browsern im Fenster horizontal zentriert.

Zeig doch bitte mal den vollständigen HTML-Code.


----------



## tobnice (30. November 2007)

```
<!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>
<title>Digital Natur Medien-Agentur</title>
<meta name="description" Digital Natur Fotoagentur vertreibt Online Fotos, Bücher, Poster" />
<meta name="keywords" content="photo, digital,online,display, Deutschland,www.digitalnatur.com" />
<meta http-equiv="author" content="Lightbox Photo (TM) Gallery Software - www.lightboxphoto.com" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<script language="JavaScript" src="./scripts/scripts.js" type="text/javascript"></script>
<link href="./template/vertical_css.css" rel="stylesheet" type="text/css" />
</head>
<body style="background:url(./images/background13.jpg);background-repeat:no-repeat;background-color:#dddddd">
 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
	<tbody>
	<tr>
		<td align="left" valign="top">
		<td width="100%" align="center" valign="top">
			<tbody>
			<tr>
				<td width="100%" align="center" valign="top">
				<table width="780" border="0" cellspacing="0" cellpadding="0">
					<tbody>
					<tr>
						<td align="right">[MEMBERACCOUNT]</td>
						<td width="140" align="left" valign="top">
						<a href="private_gallery.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','images/private_o.gif',1)">
						<img src="http://www.tutorials.de/forum/images/private.gif" alt="private" name="Image13" width="140" height="30" border="0" id="Image13" /></a></td>
						<td width="180" align="left" valign="top">
						<a href="cb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','images/photographer_o.gif',1)">
						<img src="http://www.tutorials.de/forum/images/photographer.gif" alt="photographer" name="Image14" width="180" height="30" border="0" id="Image14" /></a></td>
					</tr>
				</tbody>
				</table>
				</td>
				
			</tr>
		</tbody>
		</table>
		</td>
	</tr>
	<tr>
		<td align="left" valign="top">
		<table width="780" border="0" cellspacing="0" cellpadding="0">
			<tbody>
			<tr>
				<td width="480" align="left" valign="top">
<!-- "[HIER WAR DER BEFEHL FÜR DAS LOGO ]"-->
				<td width="300" align="right" valign="top">
				<table width="300" border="0" cellspacing="0" cellpadding="0">
					<tbody>
					<tr>
						<td align="right" valign="top">[KEYWORDSEARCH]</td>
					</tr>
					<tr>
						<td align="right">[ADVANCED_SEARCH_LINK]</td>
					</tr>
				</tbody>
				</table>
				</td>
			</tr>
		</tbody>
		</table>
		</td>
	</tr>
	<tr>
		<td align="left" valign="top">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="menu_style">
			<tbody>
			<tr>
				<td width="780" align="left" valign="top">
				<table width="780" border="0" cellspacing="0" cellpadding="0">
					<tbody>
					<tr>
						<td align="left" valign="top"><table width="780" border="0" cellspacing="1" cellpadding="1">
              <tbody>
                <tr>
                  <td width="635"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tbody>
                        <tr>
                          <td height="40" align="left" valign="middle">[PAYMENTMETHOD_LINK]</td>
                          <td align="left" valign="middle">[PREVIEW_TOGGLE]</td>
                          <td align="right" valign="middle">[SHOPPINGCARTSTATS]</td>
                        </tr>
                      </tbody>
                  </table></td>
                  <td width="138" align="right">[LOGINOUT] </td>
                </tr>
              </tbody>
            </table>
                     </td>
                      
			</tr>
				</tbody>
				</table>
				</td>
				<td width="208">&nbsp;</td>
			</tr>
		</tbody>
		</table>
		</td>
	</tr>
	<tr>
		<td align="left" valign="top">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tbody>
			<tr>
				<td width="780" align="left" valign="top">
				<table width="780" border="0" cellspacing="0" cellpadding="0" class="right_line">
					<tbody>
					<tr>
						<td width="160" align="left" valign="top" class="right_line">
						<table width="160" border="0" cellspacing="0" cellpadding="0">
							<tbody>
							<tr>
								<td align="left" valign="top">[MENU]</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td align="left" valign="top">
								<table width="160" border="0" cellspacing="0" cellpadding="0" class="featured_style">
									<tbody>
									<tr>
										<td width="20" align="left" valign="top">
										<img src="http://www.tutorials.de/forum/images/circle_icon.gif" alt="" width="20" height="20" /></td>
										<td width="140">Kategorien</td>
									</tr>
								</tbody>
								</table>
								</td>
							</tr>
							<tr>
								<td align="left" valign="top">[CATEGORYDROPDOWN]</td>
							</tr>
							<tr>
								<td align="left" valign="top">
								<table width="160" border="0" cellspacing="0" cellpadding="0" class="featured_style">
									<tbody>
									<tr>
										<td width="20" align="left" valign="top">
										<img src="http://www.tutorials.de/forum/images/circle_icon.gif" alt="" width="20" height="20" /></td>
										<td width="140">Featured Media </td>
									</tr>
								</tbody>
								</table>
								</td>
							</tr>
							<tr>
								<td align="center" valign="top">[FEATUREDMEDIA]</td>
							</tr>
						</tbody>
						</table>
						</td>
						<td width="620" align="center" valign="top">[GALLERY]</td>
					</tr>
				</tbody>
				</table>
				</td>
				<td>&nbsp;</td>
			</tr>
		</tbody>
		</table>
		</td>
	</tr>
	<tr>
		<td align="left" valign="top">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table_bottom_style">
			<tbody>
			<tr>
					<table width="780" border="0" cellspacing="0" cellpadding="0">		
<td align="center" valign="top">

		Copyright by Digital Natur Medien-Agentur Hans-Peter Eckstein 2007</a></td>

	<tr>
				<td width="780" align="center" valign="middle">
				<a href="../images/AGB.htm" target="top">AGB</a>

<a align="center" valign="top">
<img src="./images/referenz.gif" alt="" width="280" height="25" align="top" />
<a href="../images/impressum.pdf" target="top" class="text_private_gallery">

			</tr>
		</tbody>
		</table>
		</td>
	</tr>
</tbody>
</table>

</body>
</html>

</body>
</html>
```


----------



## Maik (30. November 2007)

Meinen Vorschlag musst du natürlich auch bei den nachfolgenden Tabellen wiederholen, und bei denen, die derzeit eine Breite von 100% besitzen, diese auf 780 Pixel umstellen, damit sie sich im Fenster zentrieren lassen.

Und entferne noch am Dokumentende die doppelt vorhandenen Tags:


```
</body>
</html>

</body>
</html>
```


----------



## tobnice (30. November 2007)

also soll ich alle 780 durch 100% ersetzten und alle 100% durch 780 ? warum das denn?

Erstmal vielen Dank und einen schönen Abend noch, ich habe keine Zeit mehr und werde es morgen ausprobieren nochmals Dankeschön!


----------



## Maik (30. November 2007)

Wenn die umschliessende Tabellenzelle td eine fixe Breite von 780 Pixel besitzt, kann die darin eingebundene Tabelle nicht im Browserfenster horizontal zentriert werden, aus diesem Grund erhält diese Zelle eine Breite von 100% und der Zellinhalt wird mit dem Attribut align="center" horizontal zentriert.

Falls die unteren Tabellen, die derzeit eine Breite von 100% besitzen, ebenfalls horizontal zentriert werden sollen, müssen sie eine feste Breitenangabe erhalten.


----------



## 4ever (30. November 2007)

na du kannst doch nix zentrieren wenn die tabelle die alles eröffnet


```
<table width="100%" border="0" cellspacing="0" cellpadding="0">
```

auf 100% eingestellt ist ...
das heißt deine hompage bzw die seite nimmt 100% des browsers ein ..

ergo .. du kannst es so nicht zentrieren ..
und da du viele table tags ineinander verschachtelt hast, befürchte ich, dass du garnicht die komplette seite zentrieren willst... sondern nur ein bestimmtes element ..

aber an sich um eine seite einfach und schnell zu zwentrieren 


```
<body>
<center>
..
..
..
</center>
</body>
```

nur fürt sowas auch nur dann zum ziel wenn man ahnung davon hat


----------



## Maik (30. November 2007)

4ever hat gesagt.:


> na du kannst doch nix zentrieren wenn die tabelle die alles eröffnet
> 
> 
> ```
> ...


@4ever: Dann schau dir mal das hier im Browser deines Vertrauens an:


```
<table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
           <td width="100%" align="center">
               <table width="780" border="1">
                      <tr><td align="left">test</td></tr>
               </table>
           </td>
       </tr>
</table>
```

Und achte bitte in deinen Beiträgen auf die Groß- und Kleinschreibung - siehe hierzu den Punkt 15 unserer Netiquette. Vielen Dank.


----------



## 4ever (30. November 2007)

Oh :-O
Ja, sorry. Habe vergessen, dass ich hier auf Rechtschreibung achten soll ...
Doch glaube ich, dass ich  das Thema gerade falsch verstanden habe ^^

Seine frage bezog sich ja auf die ganze Seit zu zentrieren 
da dachte ich mir .. na einfachste Methode halt .
Aber natürlich ist die Frage, ob er die Tabelle an sich zentrieren will oder den Inhalt der Tabelle ... das war ja nicht so ersichtlich .. 
Wenn ich jetzt genau drüber nachdenke, weiß ich nicht mal warum ich mich hier einmische  ich idel mal weiter ;-D


----------



## Maik (22. Mai 2008)

Hi,


			
				tobnice | PN hat gesagt.:
			
		

> Hallo, ich hatte vor längerer Zeit mal eine Frage im Forum veröffentlicht, welche Sie mir beantworteten.
> Da dieses Problem aber 2.rangig war habe ich es erst einmal nach hinten gestellt. Nun muss ich mich jedoch erneut mit dem Problem auseinandersetzen und habe versucht, anhand Ihrer Vorschläge das Problem zu beheben. Leider funktioniert es nicht nun wollte ich Sie fragen ob SIe mir vielleicht nocheinmal helfen könnten? Es geht um das zentrieren einer Site (ein gekaufte Software für Fotografen welche ich verändern soll).
> Gruß berenice


wie sich die einzelnen Tabellen in dem verschachtelten Tabellenkonstrukt horizontal zentrieren lassen, hab ich hier schon mit dem entsprechenden Codeschnipsel erläutert.

Zusätzlich zur Funktionalität des horizontalen Zentrierens muß der HTML-Code validiert werden, denn das Markup weist in der Tabellenstruktur erhebliche Fehler auf - welche das im Einzelnen sind, erfährst du vom w3c-Validator.

Und das nächste mal antworte doch bitte direkt in dem Thread, denn auf einen möglichen Eingang neuer Nachrichten in meiner PN-Box achte ich nicht ständig während meiner Anwesenheit im Forum, und da ich zudem die Popup-Meldung des Forensystems bei neuen PNs in meinen Einstellungen deaktiviert habe, kann eine PN auch schon mal für eine Weile von mir "unregistriert" bleiben. Vielen Dank.


----------



## tobnice (22. Mai 2008)

das war ein guter tipp aber: "Gratuliere! Keine Fehler gefunden."
und ich habe das mit den tabellen so versucht wie beschrieben aber es funktioniert nicht..


----------



## Maik (22. Mai 2008)

Mit deinem hier zuletzt gezeigten Quellcode werden vom w3c-Validator  53 Fehlermeldungen ausgeworfen:



> Validation Output:  53 Errors
> 
> 1. Error Line 6, Column 33: "Digital" is not a member of a group specified for any attribute.
> 
> ...


Ansonsten solltest du uns hier auf den neuesten Stand bringen.


----------



## tobnice (22. Mai 2008)

Jetzt bin ich völlig verwirrt, was hier drin steht ist die Index Seite....aber um die Seite zu zentrieren hätte ich doch die .css Template zeigen müssen, oder?


----------



## Maik (22. Mai 2008)

Wie ich schon in meinem vorletzten Post darauf hingewiesen habe, weist der HTML-Code unzählige Fehler in der Tabellenstruktur auf, die wohl das Zentrieren der inneren Tabellen verhindern.


----------

