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

divs werden nebeneinander gesetzt statt untereinander

N

nieselfriem

Mitglied
Hallo!

Die beiden DIVS clientnavi und head sollen untereinander dargestellt werden. Leider werden sie nebeneinander dargestellt. Was muss ich ändern?

Grüße

HTML: 
<?xml version="1.0" ?>
<!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=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<title>New Web Project</title>
	</head>
	<body>
		<h1>New Web Project Page</h1>
		<form action="test.php" method="post">
			<div id="wrapper">
				<div id="clientnavi">
					<ul id="simple-navi">
							<li>
								<a href="x">Berufe</a>
							</li>
							<li>
								<a href="x">Vermittlungsversuche</a>
							</li>
						
						</ul>
				</div>
				<div id="head">
					<button name="newAn"><image src="icons/camera.png" /></button>
					<button name="newAn"><image src="icons/media-floppy-2.png"/></button>
					<button name="newAn"><image src="icons/camera.png"/></button>
				</div>
				<div id="left">
					<fieldset>
						<legend>
							Schnellauswahl
						</legend>
						<select>
							<option value="volvo">Volvo</option>
							<option value="saab">Saab</option>
							<option value="mercedes">Mercedes</option>
							<option value="audi">Audi</option>
						</select>
					</fieldset>
				</div>
				<div id ="right">
					<div id="rightup">
						<div id="quickdatasleft">
							<fieldset style ="height: 290px; " >
								<legend> </legend>
								<table border="0">
									<tr>
										<td>Kundenummer:</td><td>
										<input class="formspaces" type="text" name="knr" size="8" readonly="readonly"/>
										<input type="checkbox" name="anrede" readonly="readonly"/>
										Herr
										<input type="checkbox" name="anrede" readonly="readonly"/>
										Frau</td>
									</tr>
									<tr>
										<td>Name:</td><td>
										<input class="formspaces" type="text" name="anname" readonly="readonly" />
										</td>
									</tr>
									<tr>
										<td>Vorname:</td><td>
										<input class="formspaces" type="text" name="anvorname" readonly="readonly" />
										</td>
									</tr>
									<tr>
										<td> Geburtsdatum:</td><td>
										<input class="formspaces" type="text" name="gebDat" size="10" readonly="readonly"/>
										Alter
										<input class="formspaces" type="text" name="anname" size="2" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>Stra&szlig;e/Hausnr.:</td><td>
										<input class="formspaces" type="text" name="adresse" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>PLZ/Ort:</td><td>
										<input class="formspaces" type="text" name="plz" size="5" readonly="readonly"/>
										<input class="formspaces" type="text" name="ort" size="11" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td> F&uuml;hrerschein: </td><td>
										<input class="formspaces" type="text" name="anname" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td> Auto: </td><td>
										<input type="checkbox" name="auto" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td> Arbeitsort: </td><td>
										<input class="formspaces" type="text" name="arbeitsort" readonly="readonly"/>
										</td>
									</tr>
								</table>
							</fieldset>
						</div>
						<div id="quickdatasright">
							<fieldset style ="height: 290px;width: 300px; ">
								<legend></legend>
								<table border="0">
									<tr>
										<td>Vermittlungssvertrag: </td><td>
										<input class="formspaces" type="checkbox" name="vermittlunsv" readonly="readonly"  checked="checked" disabled="disabled"/>
										<input type="text" name="prov" size="5"/>
										</td>
									</tr>
									<tr>
										<td>Aufgenommen von: </td><td>
										<input class="formspaces" type="text" name="aufgenommenV" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>Aufgenommen am: </td><td>
										<input class="formspaces" type="text" name="aufgenommenAm" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>Verdienst: </td><td><textarea class="formspaces" cols="9" rows="6" readonly="readonly"></textarea></td>
									</tr>
									<tr>
										<td>Arbeitslos seit: </td><td>
										<input class="formspaces" type="text" name="arbeitslos" readonly="readonly"/>
										</td>
									</tr>
								</table>
							</fieldset>
						</div>
						<div id="quickdatascenter">
							<fieldset style ="height: 290px;width: 300px; margin-top:6px">
								<legend></legend>
								<table border="0">
									<tr>
										<td>in Arbeit:</td><td>
										<input class="formspaces" type="text" name="inarbeit" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>Note Arbeit: </td><td>
										<input class="formspaces" type="text" name="notearbeit" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>Note pers&ouml;nlich: </td><td>
										<input class="formspaces" type="text" name="notepers" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>Familiestand: </td><td>
										<input class="formspaces" type="text" name="familienstand" readonly="readonly" />
										</td>
									</tr>
									<tr>
										<td>Gutschein: </td><td>
										<input type="checkbox" name="gutschein" readonly="readonly" />
										</td>
									</tr>
									<tr>
										<td>Gutschein g&uuml;ltig:</td><td>
										<input class="formspaces" type="text" name="gutschguelt"/>
										</td>
									</tr>
									<tr>
										<td>Ablage: </td><td>
										<input class="formspaces" type="text" name="ablage" readonly="readonly"/>
										</td>
									</tr>
									<tr>
										<td>Prim&auml;rkontak: </td><td>
										<input class="formspaces" type="text" name="primkon" readonly="readonly"/>
										</td>
									</tr>
								</table>
							</fieldset>
						</div>
					</div>
					<div id="rightdown">
						<div style=" margin-bottom: 6px;"><ul id="simple-navi">
							<li>
								<a href="x">Berufe</a>
							</li>
							<li>
								<a href="x">Vermittlungsversuche</a>
							</li>
							<li>
								<a href="x">Kontakt</a>
							</li>
							<li>
								<a href="x">Weiterbildung/Berufserfahrung</a>
							</li>
							<li>
								<a href="x">Bemerkungen</a>
							</li>
							<li>
								<a href="x">Historie</a>
							</li>
							<li>
								<a href="x">wichtige Bemerkungen</a>
							</li>
							<li>
								<a href="x">Dokumente</a>
							</li>
						</ul>
						</div> 
	
						<div style="width:950px; height: 281px; padding: 5px; margin-top:5px;">
						<br/><br/>
						<table width="925" cellpadding="0" cellspacing="0" border="1">
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
						</table>
						</div>
					</div>
				</div>
			</div>
		</form>
		  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
	</body>
</html>

Code: 
#wrapper {
	width: 1205px;
	height: 737px;
	background-color: #E9E6E6;
	padding: 5px;
}

#head {
	float: left;
	background-color: red;
}

#clientnavi {
	float: left;
	background-color: green;
	
}


#left {
	float: left;
	width: 20%;
	height: 600px;
}

#right {
	height: 600px;
	width:80%;
	float:right;
}

#rightup {
	width: 100%;
	height: 305px;
	margin-bottom: 10px;
}

#rightdown {
	height: 305px;
	height: 275px;
	border-style:solid;
	border-width:thin;
	border-color: grey;
	
}
#quickdatasleft {
	float: left;
	width: 33%;
	height: 305px;
	margin-right:4px;
}

#quickdatasright {
	float: right;
	width: 33.3%;
	height: 305px;

	
}

#quickdatascenter {
	height: 305px;
}

#tablechoice {
	height: 20px;
    border-style: solid;
	border-width:thin;
}


ul#simple-navi {
  list-style-type: none;
  width: 960px;
  float: left;
  font-family: Verdana ,Arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  padding: 5px 0 0 0;
}  

ul#simple-navi li {
  display: block;
  float:left;
   margin: 0 0 0 3px;
}
 
ul#simple-navi li a {
  display: block;
  padding: 5px 8px;
  color: #fff;
  background-color: #999;
  text-decoration: none;
}

ul#simple-navi li.active a,
ul#simple-navi li a:hover {
  background-color: #fff;
  color: #CC3366;
}

ul#clientnavi {
  list-style-type: none;
  width: 960px;
  float: left;
  font-family: Verdana ,Arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  padding: 5px 0 0 0;
}  

ul#clientnavi li {
  display: block;
  float:left;
   margin: 0 0 0 3px;
}
 
ul#clientnavi li a {
  display: block;
  padding: 5px 8px;
  color: #fff;
  background-color: #999;
  text-decoration: none;
}

ul#clientnavi li.active a,
ul#clientnavi li a:hover {
  background-color: #fff;
  color: #CC3366;
}


.formspaces {
	margin: 2px;
}
body {
	font-family: "Arial"
}

form {
	font-size: 12px;
}
 
Werbung:
Ein Anfang wäre, das float: left; zu entfernen. Alternativ beim unteren ein clear: left; dazu. Ich habe mir das jetzt nicht kopiert, um zu gucken, wie es aussehen soll.
 
Werbung:
Das mit clear: left; führt bei mir zum gewünschten Effekt.

Code: 
#head {
	float: left;
    clear: left;
	background-color: red;
}

#clientnavi {
	float: left;
	background-color: green;

}
 
Werbung:
Na ja, ich weiß ja nicht, was das werden soll. Daher ist es schwer zu beurteilen, ob eine Lösung bei dir Anklang findet oder nicht.

Vielleicht vereinfachst du das Beispiel mal.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben