Hallo ich habe das Problem, das meine HTML site und das mit meinem CSS bei einer 1024 auflösung ganz nett dargestellt wird. Wen ich jedoch die Bildschirmauflösung z.B. auf 1152x864 stelle verschiebt sich mein dargstelltes Formular nach unten.
HTML:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head><meta http-equiv="Content-type" content="text/html ; CHARSET=iso-8859-1"/>
<title>TestRegistrierung</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
</head>
<body color="ffffff">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head><meta http-equiv="Content-type" content="text/html ; CHARSET=iso-8859-1"/>
<title>Test Registrierung</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" media="screen"/>
</head>
<body color="ffffff">
<div id="header">
<h1>Agent Pepper</h1>
</div>
<div id="navigation">
<ul id="mainnavi">
[*]
[url='index.php']Start[/url]
[*]
[url='about.html']Über uns[/url]
[*]
[url='register.html']Registrierung[/url]
[*]
[url='impressum.html']Impressum[/url]
[*]
[url='kontakt.html']Kontakt[/url]
[*]
[url='formular2.php']Login[/url]
<ul>
</div>
<div id="sidebar">
</div>
<div id="content">
<div id="formset">
<form action="register.php" method="post">
<fieldset><label>Persöhnliche Daten</label>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left" width="150">Vertragsart</td>
<td width="133"><input type="radio" name="accountType" value="p">Privat</td>
<td width="133"><input type="radio" name="accountType" value="f">Firma</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left">
<select name="user_title" size="1">
<option selected>Herr</option>
<option>Frau</option>
</select>
</td>
</tr>
</table>
</td>
<tr/>
<tr>
<td align="left">
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left" >
[b]Vorname:[/b]
<input name="vorname" value="" size="25" type="text" class="maintext"/>
<td align="left" width="*">
[b]Nachname:[/b]
<input name="nachname" value="" size="25" type="text" class="maintext"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left" >[b]Firma:[/b]
<input name="firmenname" value="" size="25" type="text" class="maintext"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left" >
[b]Geburtsdatum:[/b] (TT.MM.JJJJ)
<select class="maintext" name="geburtstag">
<option value="">--</option>
<option value="01" >01</option>
<option value="02" >02</option>
<option value="31" >31</option>
</select>
<select class="maintext" name="geburtsmonat">
<option value="">--</option>
<option value="01" >01</option>
<option value="12" >12</option>
</select>
<select class="maintext" name="geburtsjahr">
<option value="">--</option>
<option value="1989" >1989</option>
<option value="1900" >1900</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left" >
[b]Passwort:[/b]
<input name="pass" value="" size="25" type="password" class="maintext"/>
</td>
<td align="left" width="*">
[b]Passwort bestätigen:[/b]
<input name="conf" value="" size="25" type="password" class="maintext"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fieldset>
<fieldset><label>Adresse</label>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left">[b]Straße / Hausnr:[/b]</td>
<td align="left">[b]PLZ / Ort:[/b]</td>
</tr>
<tr>
<td align="left">
<input name="strasse" maxlength="25" value="" size="14" type="text" class="maintext" />
<input name="hausnr" maxlength="25" value="" size="5" type="text" class="maintext" />
</td>
<td align="left">
<input name="plz" maxlength="5" value="" size="5" type="text" class="maintext" />
<input name="ort" value="" size="14" type="text" class="maintext" />
</td>
</tr>
</table>
</fieldset>
<fieldset><label>Telefon/Fax und E-Mail</label>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td align="left" >
[b]Email:[/b]
<input name="mail" value="" size="25" type="text" class="maintext"/>
</td>
<td align="left" width="*">
[b]Telefon:[/b]
<input name="tel" value="" size="25" type="text" class="maintext"/>
</td>
</tr>
<tr>
<td align="left" >
[b]Email wiederholen:[/b]
<input name="emailconf" value="" size="25" type="text" class="maintext"/>
<td align="left" width="*">
[b]Fax:[/b]
<input name="fax" value="" size="25" type="text" class="maintext"/>
</td>
</tr>
</table>
</fieldset>
<fieldset><label>Absenden</label>
<table border="1" width="400px" cellpadding="0" cellspacing="2" border="0" class="maintext">
<tr>
<td>
<input type="submit" name="senden" value="Absenden"/>
</td>
<td>
<input type="reset" name="reset" value="Eingaben löschen"/>
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</body>
</html>
Alles anzeigen
CSS:
Code
#body {
font-size: 85%;
font-famliy: 'Trebuchet MS', Verdana, Arial, Sans-Serif;
text-align: center;
}
#wrap {
width: 900px;
margin: 0 ;
text-align: center;
}
#formset{
width: 900px;
margin: 0 ;
text-align: left;
}
#header {
float: left;
width: 900px;
height: 100px;
text-align: center;
border-top: 1px solid #999;
}
#navigation {
float: left;
width: 900px;
height: 50px;
border-bottom: 1px solid #999;
border-top: 1px solid #999;
top:0px;
left:0px;
background-color:rgb(100,180,250);
z-index:1;
}
#sidebar {
float: left;
width: 150px;
height: 400px;
top: 0;
}
#content {
float: left;
width: 700px;
height: 400px;
border-right: 1px solid #999;
border-left: 1px solid #999;
top: 0;
}
#current {
background: url(bg_menuitem.gif)
#979797 repeat-x 0px -160px;
color: #fff;
cursor: default;
padding: 0 15px;
}
#mainnavi li {
border-right: 1px solid #676767;
display: inline;
}
#mainnavi li a {
color: #fff;
padding: 0 15px;
text-decoration: none;
}
#mainnavi li a:hover {
background: url(bg_menuitem.gif)
#676767 repeat-x 0px -80px;
text-decoration: none;
}
#form {
text-align:left;
width:700px;
}
#navigation ul {
list-style-type: none;
}
#navigation ul li {
display: inline;
}
h1, h2, h3, h4, h5, h6 {
margin: 20px;
}
p.boxtext {
border: 1px solid #000;
padding: 5px;
}
p {
margin: 15px 20px;
}
#list {
list-style-position:outside;
}
form {
width:500px;
}
#person label {
display:block;
font-weight: bold;
text-align:left;
}
#aktivierung label {
display:block;
font-weight: bold;
}
#login label {
display:block;
font-weight: bold;
}
fieldset {
border: 1px solid #dbd;
width:650px;
background: #fafafa;
}
.fieldset_2 {
border: 1px solid #dbd;
width:625px;
background: #fafafa;
}
legend {
font-weight: bold;
font-size: 120%;
color: #999;
}
textarea {
width: 425px;
heigth: 125px;
}
a.navi,a.navi_first,a.navi_self{
display:block;
white-space:nowrap;
overflow:hidden;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
font-family:Tahoma,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
letter-spacing:0.1em;
padding:3px;
text-align:center;
}
a.navi_first {
border-top:1px solid black;
}
a.navi:link,a.navi:link,a.navi:visited,a.navi_first:visited {
background-color:rgb(115,115,75);
color:white;
}
a.navi_self:link,a.navi_self:visited {
background-color:gray;
color:white;
}
a.navi:hover,a.navi_first:hover,a.navi_self:hover,a.navi:active,a.navi_first:active,a.navi_self:active {
background-color:white;
color:black;
}
#navcontainer
{
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
border-top: 1px solid #999;
z-index: 1;
}
Alles anzeigen
Was kann ich dagegen mache. Ich habe doch egentlich alles mit absoluten Positionen festgelegt.
Danke für den Tipp!
P.S. Sorry für die langes Codes, wollte nur evtl wichtige Details nicht weglassen