Kriege Seite nicht in die Mitte!

Status
Nicht offen für weitere Antworten.

cille

Erfahrenes Mitglied
Hi ho,
habe ein Problem.
Normalerweise geht das ohne mit dem Auge zu zucken,
aber heute naja, warscheinlich die Aufregung wegen Deutschland-Italien.

Nun zum Problem:
Ich habe eine Tabelle in der Tabelle sind die Tags so,
dass der ganze nächste Inhalt in die Mitte gesetzt wird,
aber irgendwie funkt das heute nicht.

Hier mal der Code:

HTML:
<!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" />
<title>Unbenanntes Dokument</title>
</head>

<style type="text/css">
<!--
body,td,th {
	color: #000000;
}
body {
	background-color: #6FA0C8;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-bottom:auto;

}
a {
	font-size: 10px;
	color: #CCCCCC;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #CCCCCC;
}
a:hover {
	text-decoration: underline;
	color: #0066CC;
}
a:active {
	text-decoration: none;
	color: #CCCCCC;
}

middle {
	algin: center;
	valgin: middle;
}
-->
</style>

<body>

<table width="100%" height="100%" border="0" valgin="middle" align="center" cellpadding="0" cellspacing="0"> // Ab dem Inhalt muss es Mittig stehen
  <tr>
    <td align="center" valign="middle">
	<div id="middle" align="center">
      <table width="1000" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
        <tr>
          <td width="1247" align="center" valign="middle"><table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td><img src="images/01.gif" width="1000" height="228" /></td>
              </tr>
              <tr>
                <td><table width="1000" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="409" valign="top"><table width="409" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="106" height="107" valign="top"><img src="images/02.gif" width="109" height="107" border="0" align="top" /></td>
                            <td width="300" height="107" colspan="3" valign="top"><img src="images/03.gif" width="300" height="107" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="106" height="99" valign="top"><img src="images/09.gif" width="109" height="99" border="0" align="top" /></td>
                            <td width="99" height="99" valign="top"><img src="images/10.gif" width="99" height="99" border="0" align="top" /></td>
                            <td width="201" height="99" colspan="2" valign="top"><img src="images/11.gif" width="201" height="99" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="109" height="101" valign="top"><img src="images/12.gif" width="109" height="101" border="0" align="top" /></td>
                            <td width="99" height="101" valign="top"><img src="images/13.gif" width="99" height="101" border="0" align="top" /></td>
                            <td width="50" height="101" valign="top"><img src="images/14.gif" width="103" height="101" border="0" align="top" /></td>
                            <td width="98" height="101" valign="top"><img src="images/15.gif" width="98" height="101" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="109" height="115" valign="top"><img src="images/16.gif" width="109" height="115" border="0" align="top" /></td>
                            <td width="99" height="115" valign="top"><img src="images/17.gif" width="99" height="115" border="0" align="top" /></td>
                            <td width="103" height="115" valign="top"><img src="images/18.gif" width="103" height="115" border="0" align="top" /></td>
                            <td width="98" height="115" valign="top"><img src="images/19.gif" width="98" height="115" border="0" align="top" /></td>
                          </tr>
                      </table></td>
                      <td width="26" height="422" valign="top"><img src="images/04.gif" width="26" height="422" /></td>
                      <td valign="top"><table width="402" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="402" height="17" valign="top"><img src="images/05.gif" width="402" height="17" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="402" height="378" valign="top" bgcolor="#FFFFFF">&nbsp;</td>
                          </tr>
                          <tr>
                            <td width="402" height="27" valign="top"><img src="images/20.gif" width="402" height="27" align="top" /></td>
                          </tr>
                      </table></td>
                      <td width="29" height="422" valign="top"><img src="images/06.gif" width="29" height="422" align="top" /></td>
                      <td width="134" height="422" valign="top"><img src="images/07.gif" width="134" height="422" align="top" /></td>
                    </tr>
                </table></td>
              </tr>
          </table></td>
        </tr>
      </table>
    </div>
    </td>
  </tr>
</table>

</body>
</html>

Hoffe Ihr könnt mir helfen ich verzweifle.
 
M

Maik

Dann betrachte diese Zeilen mal etwas genauer:

Code:
middle {
        algin: center;
        valgin: middle;
}

  1. Es fehlt das Gatterzeichen # für den ID-Selektor.

  2. Eine CSS-Eigenschaft namens algin gibt es nicht, dafür aber text-align.

  3. Das gleiche gilt für valgin, diese heißt vertical-align.
 

cille

Erfahrenes Mitglied
Wenn ich morgen auf Arbeit bin, weis ich genaueres,
bis dahin schonmal DICKES dankeschön.
 

cille

Erfahrenes Mitglied
Hi ho,
habe dies geändert,
aber irgendwie funktioniert das ganze nicht.

michaelsinterface hat gesagt.:
Dann betrachte diese Zeilen mal etwas genauer:

Code:
middle {
        algin: center;
        valgin: middle;
}

  1. Es fehlt das Gatterzeichen # für den ID-Selektor.

  2. Eine CSS-Eigenschaft namens algin gibt es nicht, dafür aber text-align.

  3. Das gleiche gilt für valgin, diese heißt vertical-align.

Habt ihr vieleicht noch ein paar Tips,
wie ich die HP centriert in die Mitte kriege.
 
M

Maik

Warum sollte es nicht funktionieren?

Du hast doch die äußere Tabelle incl. Tabellenzelle und das DIV, in dem die Tabelle eingebunden ist, horizontal ausgerichtet.
 

cille

Erfahrenes Mitglied
Jop, diese frage stelle ich mich auch, bei allen anderen Homepages funktioniert dies,
aber bei der nicht. es ist schon kurios.

Hier nochmal der code zum rüberschaun, vieleicht entdeckt ihr ja auch was mit ein bisschen glück,
schaue auch schon seit stunden.

HTML:
<!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" />
	<title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<?php
include("function_load.inc.php");
?>

<body>

<table width="100%" height="100%" border="0" valgin="middle" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle">
	<div id="middle" align="center">
      <table width="1000" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
        <tr>
          <td width="1247" align="center" valign="middle"><table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td width="1000" height="228" background="http://www.tutorials.de/forum/images/01.gif"><table width="1000" height="149" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="860">
					
					<marquee behavior="scroll" direction="left" width="864" scrollamount="1" scrolldelay="20" truespeed="yes">
						<?php include("lauf/index.php"); ?>
					</marquee>					</td>
                    <td width="140">&nbsp;</td>
                  </tr>
                </table></td>
              </tr>
              <tr>
                <td><table width="1000" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="409" valign="top"><table width="409" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="106" height="107" valign="top"><a href="die_druckerei.php" onMouseOver="austausch1.src='images/02_roll.gif';" onmouseout="austausch1.src='images/02.gif';" ><img name="austausch1" src="http://www.tutorials.de/forum/images/02.gif" width="109" height="107" border="0" align="top" /></a></td>
                            <td width="300" height="107" colspan="3" valign="top"><img src="http://www.tutorials.de/forum/images/03.gif" width="300" height="107" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="106" height="99" valign="top"><a href="siebdruck.php" onMouseOver="austausch2.src='images/09_roll.gif';" onmouseout="austausch2.src='images/09.gif';"><img name="austausch2" src="http://www.tutorials.de/forum/images/09.gif" width="109" height="99" border="0" align="top" /></a></td>
                            <td width="99" height="99" valign="top"><a href="leistungen.php" onMouseOver="austausch3.src='images/10_roll.gif';" onmouseout="austausch3.src='images/10.gif';"><img name="austausch3" src="http://www.tutorials.de/forum/images/10.gif" width="99" height="99" border="0" align="top" /></a></td>
                            <td width="201" height="99" colspan="2" valign="top"><img src="http://www.tutorials.de/forum/images/11.gif" width="201" height="99" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="109" height="101" valign="top"><a href="plakate.php" onMouseOver="austausch4.src='images/12_roll.gif';" onmouseout="austausch4.src='images/12.gif';"><img name="austausch4" src="http://www.tutorials.de/forum/images/12.gif" width="109" height="101" border="0" align="top" /></a></td>
                            <td width="99" height="101" valign="top"><a href="bucher.php" onMouseOver="austausch5.src='images/13_roll.gif';" onmouseout="austausch5.src='images/13.gif';"><img name="austausch5" src="http://www.tutorials.de/forum/images/13.gif" width="99" height="101" border="0" align="top" /></a></td>
                            <td width="50" height="101" valign="top"><a href="kunstdruck_am_bau.php" onMouseOver="austausch6.src='images/14_roll.gif';" onmouseout="austausch6.src='images/14.gif';"><img name="austausch6" src="http://www.tutorials.de/forum/images/14.gif" width="103" height="101" border="0" align="top" /></a></td>
                            <td width="98" height="101" valign="top"><img src="http://www.tutorials.de/forum/images/15.gif" width="98" height="101" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="109" height="115" valign="top"><a href="referenzen.php" onMouseOver="austausch7.src='images/16_roll.gif';" onmouseout="austausch7.src='images/16.gif';"><img name="austausch7" src="http://www.tutorials.de/forum/images/16.gif" width="109" height="115" border="0" align="top" /></a></td>
                            <td width="99" height="115" valign="top"><a href="kontakt.php" onMouseOver="austausch8.src='images/17_roll.gif';" onmouseout="austausch8.src='images/17.gif';"><img name="austausch8" src="http://www.tutorials.de/forum/images/17.gif" width="99" height="115" border="0" align="top" /></a></td>
                            <td width="103" height="115" valign="top"><a href="links.php" onMouseOver="austausch9.src='images/18_roll.gif';" onmouseout="austausch9.src='images/18.gif';"><img name="austausch9" src="http://www.tutorials.de/forum/images/18.gif" width="103" height="115" border="0" align="top" /></a></td>
                            <td width="98" height="115" valign="top"><a href="login.php" onMouseOver="austausch10.src='images/19_roll.gif';" onmouseout="austausch10.src='images/19.gif';"><img name="austausch10" src="http://www.tutorials.de/forum/images/19.gif" width="98" height="115" border="0" align="top" /></a></td>
                          </tr>
                      </table></td>
                      <td width="26" height="422" valign="top"><img src="http://www.tutorials.de/forum/images/04.gif" width="26" height="422" /></td>
                      <td valign="top"><table width="402" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="402" height="17" valign="top"><img src="http://www.tutorials.de/forum/images/05.gif" width="402" height="17" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="402" height="378" valign="top" bgcolor="#FFFFFF">
								<div style="width:402px; height:378px; overflow:auto; text-align:left; font-size:14px; font-family:Tahoma, Verdana, Arial, Helvetica;">
								
								Hier wird der Inhalt ausgegeben
								
								</div>
							</td>
                          </tr>
                          <tr>
                            <td width="402" height="27" valign="top"><img src="http://www.tutorials.de/forum/images/20.gif" width="402" height="27" align="top" /></td>
                          </tr>
                      </table></td>
                      <td width="29" height="422" valign="top"><img src="http://www.tutorials.de/forum/images/06.gif" width="29" height="422" align="top" /></td>
                      <td width="134" height="422" valign="top"><img src="http://www.tutorials.de/forum/images/07.gif" width="134" height="422" align="top" /></td>
                    </tr>
                </table></td>
              </tr>
          </table></td>
        </tr>
      </table>
    </div>
    </td>
  </tr>
</table>

</body>
</html>

Dickes THX für eure Hilfe
 

Azi

Erfahrenes Mitglied
Hi!

Wenn du was in der Mitte haben möchtest UND CSS verwendest, geht das ganz einfach mit "margin: auto;", das übergeordnete Element sollte für den IE noch "text-align: center;" haben. Ein Beispiel ist meine Website, http://www.aquanasoft.de :). Keine Sorge, die ist noch ganz leer, ich werbe hier also nicht.

Azi
 
M

Maik

Also bei mir wird die Seite erwartungsgemäß im Browserfenster horizontal zentriert.
 

cille

Erfahrenes Mitglied
Mhhh komisch,
bei mir funktioniert dies nicht im IE,FF und im OP.

das ist komisch.

von allem die neuste version installiert.

//edit

habe es hingekrigt, war ein doppel algin="middle" dran schuld.

THX für eure gedanken
 
Status
Nicht offen für weitere Antworten.