Problem mit Div-Containern

teqqy

Aktives Mitglied
Thread Starter
Dabei seit
13.06.2006
Beiträge
1.010
Reaktionspunkte
27
Hallo,

ich bin im mom irgendwie am Verzweifeln. Habe folgendes Problem



So sieht das ganz im Moment aus. Wie ihr seht, verschieben sich die unteren Tabellen nach links. Das möchte ich verständlicherweise aber nicht.

html-Seite sieht folgendermaßen aus:
Code:
<body>
<div id="over">
	<div id="header">
		<img src="gfx/header.gif" alt="header" />
	</div>
	<div id="site">
		<div id="navi">   
   Navigation
		</div>
		<div id="login">
   loginformular
		</div>
		<div id="content">
   content
		</div>
	</div>
	<div id="footer">
		<img src="gfx/footer.gif" alt="footer" />
	</div>
</div>
</body>

Der relevante Code der CSS-Datei so:
Code:
body
	{	background-color:#FFFFCC;
		text-align:center;}
		
#over
	{	width:800px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#990000;
		margin: 0 auto;}
		
#header
	{	height:120px;
		width:100%;}
		
#site
	{	width:800px;
		border-left:#990000 thin solid;
		border-right:#990000 thin solid;}
		
#navi
	{	height:40px;
		vertical-align:middle;
		background-color:#990000;
		width:100%;
		text-align:center;}
		
#login
	{	width:160px;
		height:100%;
		float:left;
		text-align:left;
		padding:10px 10px 10px 10px}
		
#myamore
	{	width:160px;
		float:left;
		text-align:left;
		padding:10px 10px 10px 10px}
		
#content
	{	width:600px;
		text-align:left;
		padding:10px 20px 20px 20px;}

#footer
	{	height:20px;
		width:100%;}

Könnt ihr mir dabei helfen? Vlt. hab ich nur etwas übersehen.
Vielen Dank
 
ich denk mal du musst das float clearen ;)

HTML:
{clear:left}
 
Habs mal im content-Container versucht, aber dann schiebt er mir alles ganz nach links, was ja nicht der Sinn und Zweck der Sache ist ;)
 
ist zwar nicht sehr elegant, aber versuchs mal mit nem leeren clear container ...
 
Also ich hab
Code:
		<div id="clear">
			&nbsp;
		</div>
in die HTML und
Code:
#clear
	{	float:left;}
in die CSS-Datei eingefügt.
Funktioniert nicht.

Wenn ich mit clear:left arbeite habe ich wieder den content-Container ganz links.
Leider kann man auch nicht den Navi-Container auf 100 % der Höhe bringen.
 
HTML:
#clear  {clear:left}
:cake:
 
Ja ne...
So solls ja nicht sein :) Die position der oberen beiden Tabellen ist richtig. Die unten drunter sind falsch. Vlt. hab ich mich diesbezüglich falsch ausgedrückt ;)

Weil mit clear:left siehts so aus:
 
Da kann was nicht stimmen. Ist der gesamte Content (alle Einzelblöcke) wirklich in dem einen Container #content? Wenn ja, würde dieser nicht wieder aufgesplittet. Poste mal den gesamten HTML-Code.
 
Wie gewünscht:
Code:
<?php
	session_start();
	require "inc/....php";
	include "inc/.....inc.php";
	sessionAuthentificate();
	
?>

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

<body>
<div id="over">
	<div id="header">
		<img src="gfx/header.gif" alt="header" />
	</div>
	<div id="site">
		<div id="navi">
			<a href="search.php" class="navi"><img src="gfx/suchen.gif" alt="Suchen" border="0" /></a>
			<a href="start.php" class="navi"><img src="gfx/myamore.gif" alt="MyAmore" border="0" /></a>
			<a href="messagein.php" class="navi"><img src="gfx/nachrichten.gif" alt="Nachrichten" border="0" /></a>
			<a href="logout.php" class="navi"><img src="gfx/logout.gif" alt="logout" border="0" /></a>
		</div>
		<div id="login">
			<form method="post" action="log.php">
				Nickname:<br /><input type="text" name="loginnickname" class="login"/><br />
				Passwort:<br /><input type="password" name="loginpassword" class="login" /><br />
				<input type="submit"  name="login" value="login" />
			</form>
		</div>
		<div id="clear">
			&nbsp;
		</div>
		<div id="content">
			<?php				
				$sql = "SELECT *
						FROM userdetails";
				$result = mysql_query($sql);
				$today = date("Y-m-d");
				while($row = mysql_fetch_assoc($result))
					{
					echo "<table width=\"500px\" class=\"search\">";
					echo "<tr><td rowspan=\"3\" width=\"100px\"><img src=\"userpic/".$row['picture']."\" border=\"0\" width=\"60px\"></td>";
					echo "<td width=\"100px\">Name:</td><td width=\"150px\">".$row['nickname']."</td><td><a href=\"userdetail.php?nickname=".$row['nickname']."\">".$row['nickname']." anzeigen</a></td></tr>";
						if($row['sex'] > '0')
							{
							echo "<tr><td>Geschlecht:</td><td>";if ($row['sex'] == 'm') { echo "m&auml;nnlich"; } else { echo "weiblich"; }"</td>";
							echo "<td><a href=\"sendmessage.php?nickname=".$row['nickname']."\">Nachricht schicken</a></td></tr>";
							}
						else
							{
							echo "<tr><td>&nbsp;</td><td>&nbsp;</td>";
							echo "<td><a href=\"sendmessage.php?nickname=".$row['nickname']."\">Nachricht schicken</a></td></tr>";
							}
						if($row['plz'] > '0')
							{
							echo "<tr valign=\"top\"><td>PLZ:</td><td>".$row['plz']."</td></tr>";
							}
						else
							{
							echo "<tr><td>&nbsp;</td><td>&nbsp;</td></tr>";
							}
					echo "</table>";
					echo "<br>";
					}
			?>
		</div>
	</div>
	<div id="footer">
		<img src="gfx/footer.gif" alt="footer" />
	</div>
</div>
</body>
</html>
 
Gib Deinem DIV#content einen linken Aussenrand. Der margin sollte die Breite des Login-Formulares haben:

Code:
div#content {
	margin-left: 160px;
}

Das funktioniert im IE6+, FF und Safari auf X und XP. Die Gesamtbreite solltest Du dabei beachten, die ändert sich natürlich mit dem Aussrand (+160px).

2nd
 
  • Gefällt mir
Reaktionen: teqqy
Super. Vielen dank 2nd, hat funktioniert. :clap:
 
Zurück
Oben Unten