1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Darstellungsfehler in Kontaktformular

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von img, 27.05.08.

  1. img

    img Celler Dickstiel

    Dabei seit:
    05.06.06
    Beiträge:
    805
    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('jan@img-media.de', $_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 [​IMG]
    grüße img
     
    #1 img, 27.05.08
    Zuletzt von einem Moderator bearbeitet: 08.08.09
  2. Hairy

    Hairy Sonnenwirtsapfel

    Dabei seit:
    07.08.07
    Beiträge:
    2.397
    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.
     
  3. img

    img Celler Dickstiel

    Dabei seit:
    05.06.06
    Beiträge:
    805
    mist, jetzt sind mir noch ein paar Kleinigkeiten aufgefallen [​IMG]

    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
     
    #3 img, 27.05.08
    Zuletzt von einem Moderator bearbeitet: 08.08.09
  4. Kenso

    Kenso Pomme au Mors

    Dabei seit:
    05.12.07
    Beiträge:
    869
    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:
    1. Wenn du eine deutsche Seite schreibst, warum gibts du dann in den Metatags als Sprache englisch an?
    2. Was für ein Metatag hat den Namen "Jan Schuhmacher"? Keiner? Warum verwendest du ihn dann?
    3. 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
     
  5. img

    img Celler Dickstiel

    Dabei seit:
    05.06.06
    Beiträge:
    805

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

Diese Seite empfehlen