mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 12:00 Benutzername: Passwort: Auto-Login

Thema: html Formular-Ausrichten vom 11.10.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> html Formular-Ausrichten
Autor Nachricht
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 37
Geschlecht: Männlich
Verfasst Di 11.10.2005 08:36
Titel

html Formular-Ausrichten

Antworten mit Zitat Zum Seitenanfang

Menno! Wunderschönen guten Morgen! Hoffe jeder hat seine 2-3 L Frühstückskaffee schon intus...

Folgendes Problem:

Ich hab per html ein Formular definiert das solche typischen Angaben wie Name, Telefon usw. wissen will.

Und irgendwie kriege ich das greade nicht hin alles schön per css auszurichten!

alá

Name:
Vorname:
Adresse:
Telefon:

naja, eben alles hübsch mit den doppelpunkten untereinander....und ich will dass ganze nicht einzeln per &nbsp machen.

Ich bin mir sicher dass es ne ganz simple Lösung ist, trotzdem: Helft mir bitte! * Ich bin unwürdig *

Danke mit Sahne im Vorraus!
  View user's profile Private Nachricht senden
way2hot

Dabei seit: 14.03.2004
Ort: Jüchen-Gierath
Alter: 41
Geschlecht: Männlich
Verfasst Di 11.10.2005 09:27
Titel

Antworten mit Zitat Zum Seitenanfang

Benutze immer dieses Formular:
Code:
<form name="Kontaktformular" method="post" action="cgi-bin/formmail.pl">
<script type="text/javascript" language="JavaScript">
<!--
   var name = "info";
   var domain = "domain.de";
   document.write('<input type=\"hidden\" name=\"recipient\" value='+ name + '@' + domain + '>');
// -->
</script>
<input type="hidden" name="redirect" value="../danke.php" />
<input type="hidden" name="subject" value="Kontaktformular" />
<div class="clear">&nbsp;</div>
<div class="form">
   
   <label for="Name">Name:</label>
   <input id="Name" name="realname" /><span>*</span><br />
   <label for="Strasse">Stra&szlig;e:</label>
   <input id="Strasse" name="Strasse" /><br />
   <label for="PLZ-Ort">PLZ und Ort:</label>
   <input id="PLZ-Ort" name="PLZ-Ort" /><br />
   <label for="Telefon">Telefon:</label>
   <input id="Telefon" name="Telefon" /><br />
   <label for="E-Mail">E-Mail:</label>
   <input id="E-Mail" name="email" /><span>*</span><br />
   
</div>
<div class="clear">&nbsp;</div>
<div class="form">
   <label for="Nachricht">Nachricht:</label>
   <textarea id="Nachricht" name="Nachricht" rows="10" cols="20"></textarea><span>*</span><br />
</div>
<div class="clear">&nbsp;</div>
<div id="submitbox">
   <input name="submit" type="submit" id="submit" value="Abschicken" /><br />
   <p>Pflichtangaben sind mit * gekennzeichnet</p>
</div>
</form>


Das zugehörige CSS-File:
Code:
label, input, textarea {
   display: block;
   width: 185px;
   float: left;
   margin: 5px 5px 0 0;
   color: #0A3485;
}
* html label, * html input, * html textarea  {
   m\argin: 5px 5px 0 6px;
}
textarea {
   height: 80px;
   overflow: auto;
}
input, textarea {
   background-color: #FFF;
   border: 1px solid #0A3485;
   padding: 1px 2px;
   font: 11px Georgia, "Times New Roman", Times, serif;
}
input:focus, textarea:focus {
   background-color: #F0F6FA;
   border: 1px solid #0A3485;
}
label {
   font: 11px Georgia, "Times New Roman", Times, serif;
   text-align: right;
   width: 80px;
   padding: 2px 5px 0 0;
}
form br {
   clear: left;
}
form div {
   float: left;
}
input#submit {
   font: bold 11px Georgia, "Times New Roman", Times, serif;
   width: 191px;
   background-color: #F0F6FA;
   color: #0A3485;
   margin: 5px 0 0 90px;
}
* html input#submit {
   margin: 5px 0 0 30px;
}
* html div#submitbox {
   padding: 0 0 10px 0;
}
div#submitbox p {
   font: 9px Georgia, "Times New Roman", Times, serif;
   padding: 0 0 0 90px;
   color: #0A3485;
}
input[type=hidden] {
   border: 0;
   padding: 0;
   display: none;
}
div.form span {
   font: 15px Georgia, "Times New Roman", Times, serif;
   color: #0A3485;
   display: block;
   float: left;
   padding: 5px 0 0 0;
}


Farbangaben sowie Schriften etc müssen natürlich individuell angepasst werden. Bevor Fragen aufkommen: Für den IE sind mittels Hacks ein paar Extra-Würste gebraten... Lächel


Zuletzt bearbeitet von way2hot am Di 11.10.2005 09:31, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
mtk
Threadersteller

Dabei seit: 29.11.2004
Ort: weit,weit weg
Alter: 37
Geschlecht: Männlich
Verfasst Di 11.10.2005 09:46
Titel

Antworten mit Zitat Zum Seitenanfang

*Thumbs up!*

WOW!

Das ist mal ne Antwort! Vielen Dank!......Hätt ja eigentlich mal den code laden können..... Ooops

Aber kann ich ja nachholen!

html

Code:
   <div id="inhalt">
   
      <h1>Geprächsnotizen hinzufügen</h1>
      <br /><br />
      <form enctype="multipart/form-data" method="post" action="" name="notizen_formular">

<!-- Beginn Formular Gesprächsnotiz hinzufuegen -->         
         <p class="fuellfeld">&nbsp;Datum:<input type="text" name="notizen_datum" value="" /><br /><br />
         Uhrzeit:<input type="text" name="notizen_zeit" value="" /><br /><br />
         <select name="notizen_art_auswahl" size="1">
            <option class="option_notizen">Anruf</option>
         </select>
         <br /><br />
         Notiz:<textarea name="notizen_notizfeld"></textarea>
         </p>
         <h6>Gesprochen mit</h6><br />
         
<!-- Beginn Auswalbox Gesprächsnotizen Personen -->
         <form name="auswahlbox_notizen_gespraechspartner" id="auswahlbox_notizen_gespraechspartner" enctype="multipart/form-data" method="post" action="">
            
            <div id="selectfenster_1">verfügbare<br />
                   Personen<br />
               <select size="5" name="box verfügbare Personen " id="notiz_personen_liste">
                  <option>zxsdsffy</option>
               </select>
            </div>
            
            <div id="buttoncontainer2">
               <input type="submit" name="gp_hinzufuegen" value=">>" />
               <br />
               <input type="submit" name="gp_entfernen" value="<<" />
            </div>

            <div id="selectfenster_2">zu Gesprächsnotiz<br /> zugeordnete Personen<br />
               <select size="5" name="box zugehoerige Personen" id="notiz_personen_liste">
                  <option>zasdadadxy</option>
               </select>
            </div>
<!-- Beginn Auswahlbox Gesprächsnotizen Personen -->
         
         </form>
         <br /><br />
         <input id="button_person_hinzufuegen" type="submit" name="neue Person hinzufuegen" value="neue Person hinzufügen" /><br /><br />
         
<!-- Beginn neue Person hinzufügen -->
      
         <form name="ap_hinzufuegen" enctype="multipart/form-data" method="post" action="">

   
      <p class="fuellfeld">Anrede:
        <select name="person_anrede" size="1" >
          <option value="">Frau</option>
          <option value="">Herr</option>
        </select>
      </p>
      <p class="fuellfeld">Name:<br />
        <input id="input_name" type="text" name="person_name" />
      </p>
      <p class="fuellfeld">Vorname:<br />
        <input type="text" name="person_vorname" />
      </p>
      <p class="fuellfeld">Firma/Einrichtung:<br />
       <input type="text" name="person_firma" />   
     </p>
      <p class="textfeld">Anschrift:<br />
        <textarea name="person_anschrift">
                  </textarea>
      </p>
      <p class="fuellfeld">Telefon:<br />
        <input type="text" name="person_tel" />
      </p>
      <p class="fuellfeld">Mobil:<br />
        <input type="text" name="person_mobil" />
      </p>
      <p class="fuellfeld">Fax:<br />
        <input type="text" name="person_fax" />
      </p>
      <p class="fuellfeld">E-Mail:<br />
        <input type="text" name="person_mail" />
      </p>
 
     <p class="fuellfeld">
        <input type="submit" name="hinzufuegen" value="hinzufügen" />    
     </p>
    
   </form>
<!-- Ende neue Person hinzufügen -->   
         
</form>
<!-- Ende Gesprächsnotiz hinzufuegen -->         

          <br class="clearfloat" />
    

   </div>
    <!-- Ende Inhaltsbereich -->
  </div>
<!-- Ende Inhalts_Container -->


css
Code:

/* CSS Document */

/* Allgemeine site-atrribute*/

body {
background-image:url(../pics/holz2.gif);
margin: 0em 0em 0em 0em;
font-size:100.01%;
}

h1 {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:larger;
text-align:left
}

h6 {
font-size:medium;
margin-bottom:1em;
}

.fuellfeld   {
margin: 1em 0em 1em 1em;
padding: 0em 0em 0em 0em;
text-align:left;
}
.textfeld   {
margin: 0em 0em 0em 1em;
text-align:left;
}

.option_notizen   {
display:block
text-indent:3em;
margin: 0em 0em 0em 5em;
padding: 0em 0em 0em 0em;
}

.clearfloat {
clear:both;
}


/* Attribute für Gundstruktur*/

div#login_container   {
border:30em #336699;
position:relative;
left:2em; top:10em;
text-align:left;
width:8em; height:60em;
line-height:2em;
}

ul#navi_liste {
list-style:none;
padding:0em 0em 0em 0.5em;
}

div#deko_1 {
background-image:url(../pics/kaffee.gif);
width:90px; height:90px;
position:relativ;
top:5em; left:2em;
z-index:920;
}

div#hauptnavi   {
position:relative;
top:3em; left:0em;
font-weight:regular;
margin: 0em;
height:17em; width:14em;
border-style:solid;
border-left-style:none;
padding: 1em 1em 1em 0em;
line-height:1.5em;
background-color:#cccccc;
font-family:sans-serif;
}

div#projektnavi   {
height:10em; width:8em;
position:relative;
top:4em; left:11em;
text-align: right;
z-index:111;
}

p#projektdaten_hintergrund {
background-image:url(../pics/schnipsel.gif);
background-repeat:repeat;
}

div#unterlage {
position:absolute;
left:17em; top:3em;
width:50em;
background-color:#996600;
z-index:99;
}

div#inhalt {
margin:2em;
background-color:#fff;
padding:2em 2em 2em 3em;
border:1px; border-style:solid;
background-image:url(../pics/Papier.gif);
font-family:Geneva, Arial, Helvetica, sans-serif;
 }

div#inhalt_container {
background-color:#FFCC33;
}   

div#termin_zettel   {
position:absolute;
left:65em; top:8em;
z-index:222;
/*width:13em; height:10em; */
background-color:#CCC;
padding: 1em 1em 2em 1em;
background-image:url(../pics/Papier.gif);
border:2px;
border-style:solid grey;
margin-right: 1em;
list-style-image:url(../pics/uhr_b.gif);
}

.projektnavi_p {
background-image:url(../pics/schnipsel.gif);
font-size:larger;
}

/* Ende Attribute für Grundstruktur*/




/* Atrribute für die Ausfüllformulare */

form#auswahlbox   {
padding: 1em 2em 4em 2em;
/*background-color:#999*/;
}

div#dokument_liste   {
border:2px; border-style:inset;
list-style-type:none;
padding:1em 1em 1em 1em;
}

div#ma_liste   {
border:2px; border-style:inset;
list-style-type:none;
padding:1em 1em 2em 1em; }

select#notiz_personen_liste {
border:2px; border-style:inset;
list-style-type:none;
padding:1em 1em 2em 1em;
}

div#selectfenster_1 {
display:block;
float:left;
margin-right:3em;
font-size:small;
}

div#selectfenster_2 {
display:block;
font-size:small;
margin: 0em 3em 0em 0em;
}

div#buttoncontainer {
display:block;
float:left;
margin:5em 3em 2em 0em;
height:3em;
}

div#buttoncontainer2 {
display:block;
float:left;
margin:4em 3em 2em 0em;
height:3em;
}

input#button_person_hinzufuegen {
display:block;
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;

}

.li   {
border-bottom:2px solid grey;
list-style:none outside;
margin: 0em 0em 0em 0em;
padding: 1em 0em 1em 0em;
}

form#ma_hinzufuegen {
text-align:left;
}

form#auswahlbox_partnerprojekte   {
}

select#notizen_personen_liste {

}

form#auswahlbox_notizen_gespraechspartner   {
}

form#auswahlbox_teilnehmer {
}

textarea#dokument_notizen   {
margin-bottom:1em;
}

div#aufruf_button   {
margin-left:4em; margin-bottom:2em;
clear:both   
}

input#MA_neu {
}

input#input_name {
/* position:absolute; left:24em;*/
}
   
/* Ende Atrribute für die Ausfüllformulare */

/* Anfang Atrribute für die Eingabefelder der Ausfüllformulare */

/*input {position:absolute; left:33em; width:22em;}*/


so, und ich guck mir jetzt mal in ruhe deines css an! ich denke da find was!

dank dir! * Applaus, Applaus *
  View user's profile Private Nachricht senden
 
Ähnliche Themen [HTML] Tabellenreihe ausrichten
HTML Tabelle ausrichten
[html] Problem mit mittig ausrichten
Ganzes HTML auf die Mitte ausrichten in DW
[html] inhalt in der mitte zentrieren / ausrichten
HTML - 2 Objekte links und rechts ausrichten
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.