nieselfriem
Mitglied
Hallo!
Die beiden DIVS clientnavi und head sollen untereinander dargestellt werden. Leider werden sie nebeneinander dargestellt. Was muss ich ändern?
Grüße
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ß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ü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ö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ü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ä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;
}