Darstellungsfehler in Kontaktformular

img · 27.05.08

Heo,

bin gerade dabei nochmals ein Kontaktformular zu überarbeiten, habe jetzt 2 Darstellungsfehler wie folgt:

wie gut sichtbar ist der Abstand nach oben rießig, ich weiß leider nicht woher das kommt?

Fehler 2, ich hätte gerne die Höhe der Felder bei Kontakt,Anfrage & Aktion niedriger.. irgendwie reagiert er aber nicht wenn ich etwas einstelle, daraus resultiert (glaube ich) auch die Verschebung der Texte vor den Eingabefelder nach unten..

HTML+PHP

Code:

<?php
if(isset($_POST['ueberpruefung'])) { 
    $allesok = true; 
    
    
    if(empty($_POST['firma'])){
        $allesok = false; 
        $error['firma'] = "<span class='farbe'>Bitte eine Firma oder <em>Privat</em> eingeben!</span> <br>" ;
    } 
    
    if(empty($_POST['betreff'])){
        $allesok = false; 
        $error['betreff'] = "<span class='farbe'>Bitte einen Betreff  eingeben!</span>  <br>";
    } 
    
    if(empty($_POST['ansprechpartner'])){
        $allesok = false; 
        $error['ansprechpartner'] = "<span class='farbe'>Bitte einen Ansprechpartner eingeben!</span>  <br>";
    } 
    
    if(empty($_POST['telefon'])){
        $allesok = false; 
        $error['telefon'] = "<span class='farbe'>Bitte eine Telefonnummer eingeben!</span> <br>";
    } 
    if(empty($_POST['nachricht'])){
        $allesok = false; 
        $error['nachricht'] = "<span class='farbe'>Bitte eine Nachricht eingeben!</span> <br>";
    } 
    if(empty($_POST['email'])){
        $allesok = false; 
        $error['email'] = "<span class='farbe'>Bitte eine Email eingeben!</span> <br>";
    } 
   
}




  if($allesok){ 
    echo "Ihre Mitteilung wurde erfolgreich versendet.<br />";
    echo "<br />";
    echo "<b>Firma:</b> ".$_POST['firma'] . "<br />";
    echo "<b>Ansprechpartner:</b> ".$_POST['ansprechpartner'] . "<br />";
    echo "<b>Betreff:</b> ".$_POST['betreff'] . "<br />";
    echo "<b>Telefon:</b> ".$_POST['telefon'] . "<br />";
    echo "<b>Email:</b> ".$_POST['email'] . "<br />";
    echo "<b>Nachricht:</b> ".$_POST['nachricht'] . "<br />";
  
    $text = "Ansprechpartner: ".$_POST['ansprechpartner']. "\r\n"."Firma: ".$_POST['firma'] . "\r\n"."Telefon: ".$_POST['telefon'] ."\r\n"."eMail: ".$_POST['email'] . "\r\n" . "Nachricht: ".$_POST['nachricht'];
    mail('[email protected]', $_POST['betreff'], $text);  
      }
    
    
  else
  {
  ?>


<div class="kontaktformular">
<form name="versenden" method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
<p><input style="width:0px; height:0px; visibility:hidden;" type="hidden" name="submit" value="smail" /></p>
<p><input style="width:0px; height:0px; visibility:hidden;" type="hidden" name="content" value="formular"/></p>

<?php echo $error['email'];?>
<?php echo $error['telefon'];?>
<?php echo $error['firma'];?> 
<?php echo $error['ansprechpartner'];?>
<?php echo $error['betreff'];?>
<?php echo $error['nachricht'];?>

 <fieldset class="kontaktdaten">
    <legend>Kontaktdaten</legend>
    
    
    <label>Ansprechpartner</label><input type="text" name="ansprechpartner" maxlength="25" value="<?php echo $_POST['ansprechpartner'];?>" size="20" />
    
    
    <label>Firma</label><input type="text" name="firma" maxlength="200" value="<?php echo $_POST['firma'];?>" size="20"/>
    
    
    <label>Telefon</label><input type="text" name="telefon" maxlength="200" value="<?php echo $_POST['telefon'];?>" size="20"/>
    
    
    <label>eMail</label><input type="text" name="email" maxlength="200" value="<?php echo $_POST['email'];?>" size="20"/>
 </fieldset>

 <fieldset class="anfrage">
    <legend>Anfrage</legend>
    
    <label>Betreff*</label><input type="text" name="betreff" maxlength="150" value="<?php echo $_POST['betreff'];?>" size="20"/><br />
    
    
    <label>Nachricht*</label>
    <textarea name="nachricht" cols="30" rows="8"><?php echo $_POST['nachricht'];?></textarea>
 </fieldset>
 
 
 

 </fieldset>


 <fieldset class="buttons">
   <legend>Ihre Aktion</legend>
   <input type="hidden" name="ueberpruefung" value="1"> 
   <input type="submit" name="Tutorial" value="Absenden">
   <input type="reset" name="delete" value="L&ouml;schen" />
 </fieldset>
 
</form>

  <?php
  }
  ?>

CSS

Code:

html, body {
    margin: 0;
    padding: 0;
    }

body {
    
    font-family:Verdana, Sans-serif;
    font-size: 11px;
    color: #666666;
    line-height: 18px;
    color: #666666;
    background: #ffffff
                url(../images/background/background_right.gif);
    background-repeat: repeat-x;
    text-align: center;
    }
    
    

body.ueber dt#wir,
body.ueber dt#wir a,
body.neues dt#neuheiten,
body.neues dt#neuheiten a,
body.portfolio dt#produkte,
body.portfolio dt#produkte a,
body.anfragen dt#anfragen,
body.anfragen dt#anfragen a,
body.imp dt#impressum,
body.imp dt#impressum a  {
    background-position: 0 -150px;
    }

h1 {
    margin: 0;
    padding: 0;
    }
    
h2 {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    }
    
h3 {
    font:Helvetica;
    font-size: 11px;
    color:#2f526d;
    }
    
.farbe {color: #2f526d;}

.farbe2 {color: #e2801d;}



.dick {font-weight: bold;}     

.dick2 {
    font-weight: bold;
    margin-top: 50px;
    display:block
    }
    
.dick3 {
    text-align:right;
    border-bottom: 1px solid #efefef;
    line-height:10px;
    font-size:9px;
    font-weight:normal;
    margin-bottom: 70px;
    display:block;
    }
    

#page-container {
    margin: auto;
    width: 953px;
    text-align: left;
    }
    

body #header {
    height: 85px;
    width: 909px;
    background: #ffffff
                url(../images/headers/heading.png);
    background-repeat: no-repeat;
    margin-left: 20px;
    border-left: 1px solid #4f4f4f;
    border-right: 1px solid #4f4f4f;
    }
    

#main-nav {
    height: 150px;
    }
    
/* IE5 Mac Hack \*/ 
/* #main-nav { padding-left: 11px; } 
/*/ 
/* #main-nav { padding-left: 11px; overflow: hidden; } 
/* End Hack */

#main-nav dt { float: left; }
#main-nav dt a {
    display: block;
    height: 0px !important;
    height /**/:150px; /* IE 5/Win hack */ 
    padding: 150px 0 0 0;
    overflow: hidden;
    background-repeat: no-repeat;
    }
    
#main-nav dt a:hover {
    background-position: 0 -150px;
    }

#main-nav dt#willkommen,
#main-nav dt#willkommen a { width: 235px; background-image: url(../images/nav/willkommen.gif); }

#main-nav dt#wir,
#main-nav dt#wir a { width: 129px; background-image: url(../images/nav/uns.gif); }

#main-nav dt#neuheiten,
#main-nav dt#neuheiten a { width: 129px; background-image: url(../images/nav/neuheiten.gif); }

#main-nav dt#produkte,
#main-nav dt#produkte a { width: 129px; background-image: url(../images/nav/produkte.gif); }

#main-nav dt#anfragen,
#main-nav dt#anfragen a { width: 129px; background-image: url(../images/nav/anfragen.gif); }
    
#main-nav dt#impressum,
#main-nav dt#impressum a { width: 202px; background-image: url(../images/nav/impressum.gif); }
    
#main-nav dl { margin: 0; padding: 0; }

#content_border {

    width: 909px;
    min-height: 304px;
    margin-left: 20px;
    display:inline;
    border-left: 1px solid #4f4f4f;
    border-right: 1px solid #4f4f4f;
    float:left;
    background: #ffffff url(../images/background/background_sidebar.gif) repeat-y 0% 0;    
    }
    
*html #content_border {
    height: 304px;
    }        
    
#sidebar-a {
    font-family:Verdana, Sans-serif;
    font-size: 10px;
    float: left;
    width: 215px;
    line-height: 15px;
    background: #fcfcfc;
    border-top: 35px solid #2f526d;
    border-right: 1px solid #efefef;
    }


#sidebar-a .padding {
    padding: 25px;
    }

#sidebar-a a {
    color: #666666;
    text-decoration: none;
    }
    
#sidebar-a a:hover {
    color: #db6d16;
    }
        
#content {
    margin-left: 240px;
    padding-left: 15px;
    padding-top: 15px;
    margin-right: 22px;
    line-height: 18px;
    }


#content .padding {
    padding: 25px;
    }
    
#content p {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    }
    
#content a {
    color: #666666;
    text-decoration: none;
    }
    
#content a:hover {
    color: #db6d16;
    }
        
#footer {
    margin-left: 20px;
    width: 861px;
    height: 45px;
    clear: both;
    background: #ffffff
                url(../images/background/background_footer.png);
    background-repeat:repeat-x;
    font-family: Tahoma, Arial, Helvetica, Sans-serif;
    font-size: 10px;
    color: #c9c9c9;
    border-top: 1px solid #4f4f4f;
    padding: 13px 25px;
    line-height: 18px;
    }
    
* html #footer {
    width: 911px;
    w\idth: 861px;
    }
        
#footer #altnav {
    width: 350px;
    padding-top: 25px;
    float: right;
    text-align: right;
    }
    
#footer a {
    color: #c9c9c9;
    text-decoration: none;
    }
    
#footer a:hover {
    color: #db6d16;
    }
    


.kontaktformular  {
     width:  400px;
     margin: 10px 0;
     padding: 10px;
     font-size: 11px;
     font-family: Tahoma, Verdana, Arial;
     background: #F5F5F5;
     float: left;
     clear: both;
     }

.kontaktformular fieldset {margin: 10px 0;}
.kontaktformular a {color: #990000; text-decoration: none;}
.kontaktformular a:hover {color: #483D8A;}
  
.kontaktformular legend {
     background: #2f526d;
     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: #ddc;
     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: #555555; 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: #555555; color: #fff; border-top:2px solid #ddd; border-left:2px solid #ddd; border-bottom:2px solid #fff; border-right:2px solid #fff;}

vielleicht kann mir da ja jemand helfen

grüße img

Hairy · 27.05.08

1. Ich empfehle dir, Größenangaben in em anstatt in px zu machen.
2. Ich würde label und input Elemente immer zusammen in ein p packen, das dürfte das Problem schon beheben. Ansonsten mal im CSS einiges streichen, das kommt mir etwas sehr viel vor.

img · 27.05.08

mist, jetzt sind mir noch ein paar Kleinigkeiten aufgefallen

1. woher kommen die Zeilenumbrüche bzw der abstand über dem Formular?
2. leider verzerrt es mir diesmal wieder den footer, das Problem hatte ich schonmal, letztes mal lags daran das ich den footer-div falsch positioniert habe, aber das is es diesmal nicht. ERLEDIGT
3. der letzte blaue kasten ist im Safari zentriert, er sollte jedoch linksbündig sein
4. Die Bezeichnungen der Felder sind leider nicht auf einer horizontalen Linie mit den zugehörigen Feldern ERLEDIGT

wäre für Hilfe dankbar.
grüße img

Kenso · 27.05.08

<p><input style="width:0px; height:0px; visibility:hidden;" type="hidden" name="submit" value="smail" /></p>
<p><input style="width:0px; height:0px; visibility:hidden;" type="hidden" name="content" value="formular"/></p>

Das sind deine ersten beide Elemente im Formular. Du hast ihre Sichtbarkeit auf versteckt geschaltet, aber nicht ihre Darstellung (schuldigung, mir fallen keine besseren Übersetzungen ein) - d.h. sie sind zwar nicht zu sehen, aber ihr Platz wird trotzdem reserviert. Deshalb solltest du statt visibiliy:hidden einfach display:none setzen.

Mit Formularlegenden kenn ich mich leider nicht aus.

Drei Fragen zum Quellcode:

Wenn du eine deutsche Seite schreibst, warum gibts du dann in den Metatags als Sprache englisch an?
Was für ein Metatag hat den Namen "Jan Schuhmacher"? Keiner? Warum verwendest du ihn dann?
Bist du dir sicher, dass du den Sinn der Metatags "Desciption" und "Keywords" verstanden hast? Die hast du nämlich beide falsch eingesetzt - in deiner Beschreibung steht ein Seitentitel und bei den Stichwörtern gibts du eine Seitenbeschreibung ab!

Ich schließe mich Hairy an: em sind besser als px!

Gruß, Micha

img · 28.05.08

Kenso schrieb:
Das sind deine ersten beide Elemente im Formular. Du hast ihre Sichtbarkeit auf versteckt geschaltet, aber nicht ihre Darstellung (schuldigung, mir fallen keine besseren Übersetzungen ein) - d.h. sie sind zwar nicht zu sehen, aber ihr Platz wird trotzdem reserviert. Deshalb solltest du statt visibiliy:hidden einfach display:none setzen.

Mit Formularlegenden kenn ich mich leider nicht aus.

Drei Fragen zum Quellcode:

Wenn du eine deutsche Seite schreibst, warum gibts du dann in den Metatags als Sprache englisch an?

Was für ein Metatag hat den Namen "Jan Schuhmacher"? Keiner? Warum verwendest du ihn dann?

Bist du dir sicher, dass du den Sinn der Metatags "Desciption" und "Keywords" verstanden hast? Die hast du nämlich beide falsch eingesetzt - in deiner Beschreibung steht ein Seitentitel und bei den Stichwörtern gibts du eine Seitenbeschreibung ab!

Ich schließe mich Hairy an: em sind besser als px!

Gruß, Micha

so konnte die Probleme beheben, mit den Metatags werd ich mich nochmals befassen.

Suche

Suche

Darstellungsfehler in Kontaktformular

img

Celler Dickstiel

Hairy

Sonnenwirtsapfel

img

Celler Dickstiel

Kenso

Pomme au Mors

img

Celler Dickstiel

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)