Frage stellen
ich habe anbei einen Auszug aus einem Kontaktformular. Es handelte sich um eine vorgefertigte Version, die ich meinen Entsprechungen (Funktionen & Design) angepasst habe. Meine Homepage ist aufgebaut auf einer div-box in der header, content und footer liegen, welche die Tochterdivs der "box" sind. Das funktioniert so eigentlich auch nur das Problem, dass ich beim Kontaktformular bekomme lässt mich nicht ruhig schlafen.
Sobald das Kontaktfeld in die Nähe des footers kommt, überschreitet es diesen und ignoriert ihn sozusagen. nicht nur das, ich habe zum Test einen Text über und einen Text unter das Kontaktfeld geschrieben, beide Male wird der Text über der Box dargestellt - das Problem ist also, dass das Kontaktfeld sich einfach allem unterordnet und am Ende der Seite steht - egal, was ich tue. Ich habe die Vermutung dass es mit den unterschiedlichen <div id>, <div class> und <fieldset> zu tun hat, da ich aber noch nie zuvor mit fieldset gearbeitet habe, weiß ich nicht, was zu tun ist. Habe schon versucht die fieldsets mit divs zu ersetzen aber da macht mein css dann nicht mehr mit, auch, wenn es von technischer Seite her stimmt.
Vielen Dank schonmal für jegliche Hilfe, hier der versprochene Code:
- Code: Alles auswählen
<body>
<div id="box">
<div id="header">
<br /><br /><br /><p>
<p><?php include("header.php"); ?>
</p>
</div>
<div id="content">
<img src="img/pfeil_oben.jpg" alt="oben" />Dieser Text steht über dem Kontaktfeld.
<div class="kontaktformular">
<form action="<?=$_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
<p><input style="width:0px; height:0px; visibility:hidden;" type="hidden" name="action" value="smail" /></p>
<p><input style="width:0px; height:0px; visibility:hidden;" type="hidden" name="content" value="formular"/></p>
<? // Ausgabe des Fehler (assoziatives Array) "/^[0-9]+$/" if ($plz != '' && !preg
if (is_array($fehler))
{
print "<p>FEHLER:</p>\n<p>";
foreach ($fehler as $feldname => $wert)
{
print $wert;
}
print " </p>\n";
} ?>
<fieldset class="kontaktdaten">
<legend>Kontaktdaten</legend>
<label>Name</label><input type="text" name="name" maxlength="25" value="<?php echo $_POST[name]; ?>" size="23" />
<label>Betrieb</label><input type="text" name="betrieb" maxlength="25" value="<?php echo $_POST[betrieb]; ?>" size="23" />
<label>Position</label><input type="text" name="position" maxlength="25" value="<?php echo $_POST[position]; ?>" size="23" />
<label><abbr title="Straße und Hausnummer">Adresse</abbr></label><input type="text" name="adresse" maxlength="150" value="<?php echo $_POST[adresse]; ?>" size="23"/><br>
<label>PLZ / Ort</label><input type="text" name="plz" maxlength="8" value="<?php echo $_POST[plz]; ?>" size="3" /> <input type="text" name="ort" maxlength="25" value="<?php echo $_POST[ort]; ?>" size="14" />
<label>Telefon</label><input type="text" name="telefon" maxlength="25" value="<?php echo $_POST[telefon]; ?>" size="23" />
<label>E-Mail</label><input type="text" name="email" maxlength="200" value="<?php echo $_POST[email]; ?>" size="23"/>
</fieldset>
<fieldset class="anfrage">
<legend>Anfrage</legend>
<label>Betreff</label><input type="text" name="betreff" maxlength="150" value="<?php echo $_POST[betreff]; ?>" size="23"/><br />
<label>Nachricht</label>
<textarea name="nachricht" cols="30" rows="8"><?php echo $_POST[nachricht]; ?></textarea>
</fieldset>
<fieldset class="buttons">
<input type="submit" name="sendKontakt" value="Senden"/>
<input type="submit" name="delete" value="Löschen" />
</fieldset>
</form>
</div>
<img src="img/pfeil_unten.jpg" alt="unten" /> Dieser Text steht unter dem Kontaktfeld
</div>
<div id="footer">
<br /><?php include("footer.php"); ?>
</div>
</div>
</body>
und hier die dazugehörige css:
- Code: Alles auswählen
/* main document style */
body {
min-width: 887px;
text-align:center;
}
/* box, header & content style */
div#box {
min-height: 600px;
text-align:left;
width: 887px;
margin:0 auto;
background-image: url("img/bg.jpg");
}
div#header {
background-image: url("img/logo_bg.jpg");
width: 887px;
height: 85px;
margin-top: 15px;
font-family: arial, sans-serif;
font-size: 14px;
text-align: center;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #004495;
text-decoration: none;
}
a:visited:hover {
color: #004495;
text-decoration: none;
}
a:visited {
color: #ffffff;
text-decoration: none;
}
div#content {
text-align:left;
font-size: 12px;
margin:0 auto;
margin-top: 20px;
margin-left: 15px;
font-family: verdana, sans-serif;
max-width: 877px;
min-height: 600px;
}
.kontaktformular {
width: 400px;
margin: 10px 0;
padding: 10px;
font-size: 11px;
font-family: Tahoma, Verdana, Arial;
border: 0px;
background: #ffffff;
float: left;
clear: both;
}
.fieldset {margin: 10px 0;}
.kontaktformular a {color: #990000; text-decoration: none;}
.kontaktformular a:hover {color: #483D8A;}
.kontaktformular legend {
background: #014495;
color: #fff;
padding: 3px 5px;
border: 1px solid #ddd;
text-transform: uppercase;
}
.kontaktformular label {
width: 100px;
float: left;
clear: both;
padding: 3px 10px;
margin: 3px 0;
}
.kontaktformular input, .kontaktformular textarea {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #666666;
border-top: 1px solid #666666;
background: #ffffff;
padding: 0px 3px;
margin: 3px 0;
}
.kontaktformular input:active, .kontaktformular input:focus, .kontaktformular input:hover { background: #ffffff;}
.kontaktformular textarea:active, .kontaktformular textarea:focus, .kontaktformular textarea:hover { background: #ffffff;}
.buttons {text-align: center;}
.buttons input {background: #014495; color: #fff; border-top:2px solid #fff; border-left:2px solid #fff; border-bottom:2px solid #666666; border-right:2px solid #666666;}
.buttons input:hover {background: #014495; color: #fff; border-top:2px solid #ddd; border-left:2px solid #ddd; border-bottom:2px solid #fff; border-right:2px solid #fff;}
h1 {
font-size: 14px;
font-weight: bold;
color: #004492;
}
h2 {
font-weight: bold;
color: #014495;
font-size: 12px;
}
div#footer {
text-align:right;
font-size: 10px;
margin: 0 auto;
background-image: url("img/footer_bg.jpg");
height: 30px;
font-family: arial, sans-serif;
}
Gruß,
tino