zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Kontaktformular Eingabefelder linksbündig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.05.2012, 20:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2012
Beiträge: 2
ewaldo befindet sich auf einem aufstrebenden Ast
Standard Kontaktformular Eingabefelder linksbündig

Vorerst möchte ich als Neuankömmling alle in diesem Forum recht herzlich begrüßen.

Um gleich zur Sache zu kommen. Ich stecke noch in den Anfängerschuhen bzgl. HTML u. CSS, habe aber mit viel Aufwand und Mühe unter Contao eine Webseite erstellt, die bis auf ein paar Kleinigkeiten eigentlich schon nach meinen Wünschen fertig wäre.

Da ich nicht vor dem Ziel das Handtuch werfen möchte, wende ich mich mit meinem Problem vertrauensvoll an dieses Forum.

Die Problembeschreibung dreht sich um das Kontaktformular. Ich scheitere nach dutzenden Versuchen die Eingabefelder des Formulars linksbündig auszurichten.

Im Anhang befindet sich
  • Derzeitige Ansicht des Formular
  • Formular mit Web Developer
  • Soll-Zustand

und der CSS-Code:
Code:
/* ======================================
   Kontaktformular gestalten
   ====================================== */

form#kontaktformular {
  line-height: 1;
  background-color: #ADCBE6;
  padding: 0 18px 18px 18px;
  border-top: 1px solid #89ADCD;
  border-bottom: 1px solid #89ADCD;
  margin: 0 0 2em 0;
}
#kontaktformular label {
  display:inline;	
  cursor: pointer;
  margin: 18px 0 3px 0;
}
	
#kontaktformular .checkbox_container label {
  display: inline;
  /*position: relative;
  bottom: 2px; */
}
#kontaktformular .checkbox_container {
  margin-top: 1em;
}
#kontaktformular input,
#kontaktformular textarea {
  margin-top:5px;
  padding: 1px;
}
	
#kontaktformular input:focus,
#kontaktformular textarea:focus {
  background-color: #ECECEC;
  color: #000;
}
#kontaktformular p.error {
  background: #FFC0CB; /* pink */
  color: #000;
  max-width: 400px;
  padding: 3px;
  border: 1px solid #f00; /* rot */
  margin-bottom: 3px;
}
Vielleicht kann mir jemand weiter helfen.

lg
ewaldo
Angehängte Grafiken
Dateityp: png formular.png (26,9 KB, 7x aufgerufen)
Dateityp: png formular_webdeveloper.png (61,1 KB, 7x aufgerufen)
Dateityp: png SOLL_form.png (23,2 KB, 6x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.05.2012, 21:12
eas eas ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 10.03.2011
Beiträge: 5
eas befindet sich auf einem aufstrebenden Ast
Standard

Geht am einfachsten mit einer Tabelle

Code:
<table>
   <tr>
      <td colspan="2">Kontakt</td>
   </tr>
      <td>Name/First Name*</td>
      <td> <input type="text" /> </td>
   </tr>
...
</table>
Falls es möglich ist, dann bau es so um. Falls nicht, dann kannst du auch aus Div-Containern eine Tabelle basteln
Tabellenlayout zu CSS Div Layout
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.05.2012, 21:37
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 30.04.2012
Beiträge: 163
schatzi sorgt für eine eindrucksvolle Atmosphäreschatzi sorgt für eine eindrucksvolle Atmosphäre
Standard

Hmmm, Tabellen sollten eigentlich nur dort verwendet werden, wo ein tabellarischer Aufbau auch Sinn macht...

Daher (z.B.):
Gib den Labels das Attribut "inline-block" und eine feste Breite.
Mit Zitat antworten
  #4 (permalink)  
Alt 22.05.2012, 21:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2012
Beiträge: 2
ewaldo befindet sich auf einem aufstrebenden Ast
Standard

Hmmm, Tabellen sollten eigentlich nur dort verwendet werden, wo ein tabellarischer Aufbau auch Sinn macht...

Daher (z.B.):
Zitat:
Zitat von schatzi Beitrag anzeigen
Gib den Labels das Attribut "inline-block" und eine feste Breite.

SUPER! SUPER!

Das war es.

Vielen Dank!
Mit Zitat antworten
  #5 (permalink)  
Alt 22.05.2012, 22:37
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.379
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

Zitat:
Zitat von eas Beitrag anzeigen
Geht am einfachsten mit einer Tabelle

Code:
<table>
   <tr>
      <td colspan="2">Kontakt</td>
   </tr>
      <td>Name/First Name*</td>
      <td> <input type="text" /> </td>
   </tr>
...
</table>
Falls es möglich ist, dann bau es so um. Falls nicht, dann kannst du auch aus Div-Containern eine Tabelle basteln
Tabellenlayout zu CSS Div Layout
Man braucht weder eine Tabelle noch eine Tabellenähnliche Struktur..
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
PHP Kontaktformular Eingabefelder überprüfen talkuvit Serveradministration und serverseitige Scripte 22 14.03.2011 16:35
Kontaktformular Fehler ... root-2k (X)HTML 3 22.11.2010 20:05
Kontaktformular von fox - Anpassungen Sand10 Serveradministration und serverseitige Scripte 4 08.07.2010 12:26
Kontaktformular von fox: Fehlermeldung schon im ersten Schritt Sand10 Serveradministration und serverseitige Scripte 3 07.07.2010 08:43
PHP Kontaktformular und verschiedene Browser HTMLLernender (X)HTML 1 22.01.2010 11:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:24 Uhr.