Tabelle im div positionieren

bigbootykilla

Hi Leute,

ich bastel gerade an meiner eigenen Homepage und manchmal versteh ich gewisse Vorgänge einfach nicht.

Ich möchte eine Tabelle anlegen mit 2 Spalten und mehreren Zeilen. Dies klappt soweit auch, jedoch positioniert sich, sobald ich die Tabelle in html code anlegen möchte, die Tabelle unten links. Die Fußzeile versetzt sich in die Mitte der Homepage. Das Layout ist praktisch zerschossen.

Ich möchte die Tabelle zentriert unter der Überschrift <h2> eingefügt haben.

Am besten ich hänge die beiden Dateien mal mit an, so daß ihr vielleicht versteht was ich meine.

Wäre cool wenn mir jemand mal den Fehler erklären könnte, da ich schon seit 2 Tagen denke irgendwas ist da falsch.

Danke im voraus

gruß bigbootykilla

Code aus html Datei:

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>private Homepage von Andre Sommer</title>
	<link rel="stylesheet" type="text/css"  href="index.css" /> 
</head>

<body>
	<!--komplettes Dokument wird definiert-->
	<div id="container">

		<!--Banner oben wird definiert-->
		<div id="header">
			<img src="Bilder/wasserturm.jpg">
		</div>

		<!--Navigation links wird definiert-->
		<div id="navlinks">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="ueber_mich.html">Ueber Mich</a></li>
				<li><a href="lebenslauf.html">Lebenslauf</a></li>
				<li><a href="meine_reisen.html">Meine Reisen</a></li>
				<li><a href="meine_projekte.html">Meine Projekte</a></li>
				<li><a href="wakusi.html">Wakusi</a></li>
			</ul>
		</div>

		<!--Inhalt der index.html wird definiert-->
		<div id="content">
			<!--1. Überschrift-->
			<h1>Mein Lebenslauf</h1>
			<!--Tabelle für Lebenslauf-->
			<h2>Persoenliche Daten</h2>
				<table border="1" align="center" valign="middle">
					<colgroup>
						<col width="300">
						<col width="500">
					</colgroup>
							<thead>
								<th>Persoenliche Daten</th>
								<th>wird in der ersten Zeile freigelassen</th>
							</thead>
								<tr>
									<td>Name</td>
									<td>Andre</td>
								</tr>

		</div>

		<!--footer wird hier definiert-->
		<div id="footer">
			<a href="mailto:xxx@xxx.de"> e-Mail an Andre Sommer</a>
		</div>

	<!--Ende Container-->
	</div>

</body>
</html>

Code aus aus der CSS Datei:

body {
	background-color: black;  /*Hintergrundfarbe der kompletten Seite*/
	font-size: 16px;
	text-align: justify;
	}

#container {
	width: 1024px;
	margin: auto;
	border: 2px solid red;
	border-style: ridge;
}

#header {
	height: 150px;
	border: 2px solid red;
	border-style: ridge;
}

#navlinks {
	width: 150px;
	min-height: 600px;
	float: left;
	background-color: black;
	color: white;
}		

	#navlinks ul {
		width: 160px;
		margin: 0;
	}

	#navlinks li {
		font-size: 16px;
	}

	#navlinks a {
		color: white;
	}

#content {
	width: 874px;
	min-height: 600px;
	float: right;
	background-color: silver;
	}

	#content h1 {
		font-family: arial;
		font-size: 30px;
		padding: 10px;
	}

	#content h2 {
		font-family: arial;
		padding: 10px;
	}

	#content p {
		font-family: arial;
		font-size: 14px;
		padding: 10px;
	}

	#content li {
		font-family: arial;
		font-size: 12px;
		padding-left: 30px;
	}

#footer {
	width: 1024px;
	height: 620px;
	margin-top: 0;
	text-align: center;
	background-color: silver;
}
	#footer a {
		color: black;
	}

So am besten mit copy & paste mal ausprobieren! Oder kann man hier kleine Dateien hochladen? Das wäre natürlich auch eine alternative

Hallo,

du solltest den table-tag auch wieder schließen wenn die Tabelle "zu ende" ist!

<table border="1" align="center" valign="middle"> 
                    <colgroup> 
                        <col width="300"> 
                        <col width="500"> 
                    </colgroup> 
                            <thead> 
                                <th>Persoenliche Daten</th> 
                                <th>wird in der ersten Zeile freigelassen</th> 
                            </thead> 
                                <tr> 
                                    <td>Name</td> 
                                    <td>Andre</td> 
                                </tr> 
                  </table>

LG, Micha

bigbootykilla

Hehe,,, danke, in der Tat. Das hab ich komplett übersehen. Aber okay... muß auch sagen das ich mit html und css noch nicht so 100% vertraut bin. :p

für dich :xmas1: :xmas1:

gruß und vielen Dank