✔ Frage bezüglich Formular formatierung mit div und css

Status
Nicht offen für weitere Antworten.
D

Darian

Erfahrenes Mitglied
Hallo Leute,

wollte mir ein paar Sachen machen, damit ich für meine Projekte in Zukunft Formulare immer schön und einfach formatieren kann.

Ich habe euch ein Bild angefügt, beachtet bitte dass der Text, und die Texteingabefelder nicht auf der selben Höhe liegen (habe es makiert um es besser ersichtlich zu machen)

Meinen CSS Code:
HTML: 
.form_text {float:left; white-space:pre}
.form_element {white-space:pre}

Meinen HTML Code:
HTML: 
<div class="form_text">
		Name:
		Mail:
		Gutscheine:
	</div>
	<div class="form_element">
		<input type="text" name="name" value="{$hotel->name}" />
		<input type="text" name="mail" value="{$hotel->mail}" />
		<input type="text" name="ticket" value="{$hotel->ticket_count}" />
	</div>

Also so funktioniert es einmal nicht, es sei denn es gibt etwas mit CSS womit ich es ausrichten kann

Oder gibt es eine Möglichkeit wenn ich immer den Text, und das dazugehörige Eingabeelement mit einer div-Box verbinden, und es die Eingabeemelente, dann schön untereinander ausrichtet

Oder muß ich sowieso wieder extrem viel divs Verwenden, dann Frage ich mich nicht ob einfach wieder eine unsichtbare Tabelle geschickter wäre?

Bitte um Infos, ich hoffe ich habe mein Anliegen gut genug erklärt, wenn nicht bitte noch fragen.

lg und Danke für eventuelle Antworten
Daniel
 

Anhänge

  • aufteilung.jpg
    aufteilung.jpg
    13,9 KB · Aufrufe: 170
Hi,

bekanntermaßen führen viele Wege nach Rom.

Code: 
<form>
      <ul>
          <li><label>Name:</label><input type="text" name="name" value="{$hotel->name}" /></li>
          <li><label>Mail:</label><input type="text" name="mail" value="{$hotel->mail}" /></li>
          <li><label>Gutscheine:</label><input type="text" name="ticket" value="{$hotel->ticket_count}" /></li>
      </ul>
</form>
Code: 
ul {
list-style:none;
margin:0;
padding:0;
}

li label {
float:left;
width:150px;
}
 
Stimmt schon, das viele Wege führen nach Rom, und dieser kommt mir auch ganz gut vor.

Ist es auch sauber eine Liste für sowas zu Missbrauchen, habe es jetzt gemacht, und gefällt mir ganz gut.

Wie würdest du dann zwei Button unten schön angeben. Mache es gerade in die Liste rein, und jeder kriegt ein eigenes div, und dann schaue ich dass der Abstand passt(mit margin und padding). Das Problem ist nur dass ich dass vermutlich nicht für alle Sachen anwenden kann?

Hättest du da vielleicht noch eine Idee?

Danke für die Infos, echt ein guter Tipp.

lg Darian
 
Zuletzt bearbeitet:
Ich wüsste nicht, was hier gegen den Einsatz einer unsortierten Liste zum Strukturieren der Formularelemente spricht.

Das wäre meine Fortsetzung im Stylesheet für die Buttons:

Code: 
li input[type=submit], li input[type=reset] {
margin:10px 5px 0 0;
}
Und für die Vorgängerversionen des IE7, die den Attribut-Selektor nicht unterstützen, wird nach dem Stylesheet folgender "Conditional Comment" notiert:

Code: 
<!--[if lt IE 7]>
<style type="text/css">
li input.button {
margin:10px 5px 0 0;
}
</style>
<![endif]-->
Der HTML-Code lautet nun:

Code: 
<form>
      <ul>
          <li><label>Name:</label><input type="text" name="name" value="{$hotel->name}" /></li>
          <li><label>Mail:</label><input type="text" name="mail" value="{$hotel->mail}" /></li>
          <li><label>Gutscheine:</label><input type="text" name="ticket" value="{$hotel->ticket_count}" /></li>
          <li><input type="submit" value="Speichern" class="button" /><input type="reset" value="Zurück" class="button" /></li>
      </ul>
</form>
 
Hallo,

habe das probiert, und funktioniert echt ganz fein.

Aber was hat es mit dem "Conditional Comment" auf sich, den muß ich einfach ins CSS File unten rein schreiben, kann ich mir fast nicht vorstellen :)

Also nach dem deklarieren das CSS Datei in der HTML Datei?
Ich habe sowas zumindest noch nie gesehen, und werde mal dannach googeln, ist wohl wieder so eine Bildungslücke von mir.

lg aus Guatemala
Darian
 
Na dann will ich mal noch ne 3te Variante nennen ^^
Is zwar vermutlich nen bissl ekelig, aber ich bastel mir solche Formulare in Tabellen...

Die Formatierung is, meiner Meinung nach, relativ einfach, man kann alles entsprechend anordnen und wenn man mal für was ne extra Formatirung brauch, kann man ja immer noch ne id oder ne class festlegen dafür...
Die input felder, belege ich meistens noch zusätzlich mit den classen "txt" für Textfelder und "button" für submit-Buttons oder auch reset ^^
 
Hallo, jetzt geht es noch einmal um eines weiter. *g* Sorry, aber ich habe da noch zu wenig Erfahrung.

Was ist wenn ich jetzt gerne Text so ein Dropdown Feld haben will, und das selbe noch einmal.

Erwachsene [Feld] Kinder [Feld]

Und das alles innerhalb des Formulares.

Ich verspreche, bald habe ich das ganze verstanden.

lg Darian
 
Naja, wir bleiben dann mal lieber bei der zweiten Variante mit der Liste, und packen deinen Senf beiseite.

Code: 
<form>
      <ul>
          <li>
              <label>Name:</label><input type="text" name="name" value="{$hotel->name}" />
          </li>
          <li>
              <label>Mail:</label><input type="text" name="mail" value="{$hotel->mail}" />
          </li>
          <li>
              <label>Gutscheine:</label><input type="text" name="ticket" value="{$hotel->ticket_count}" />
          </li>
          <li>
              <label class="select">Erwachsene:</label><select size="1"><option>option 1</option></select>
              <label class="select">Kinder:</label><select size="1"><option>option 1</option></select>
          </li>
          <li id="buttons">
              <input type="submit" value="Speichern" class="button"><input type="reset" value="Zurück" class="button">
          </li>
      </ul>
</form>
Code: 
ul {
list-style:none;
margin:0;
padding:0;
}

li label {
float:left;
width:150px;
}

li label.select {
width:auto;
}

li select {
float:left;
}

li#buttons {
clear:left;
}

li input[type=submit], li input[type=reset] {
margin:10px 5px 0 0;
}
 
Hallo, ja so funktioniert das alles auch relativ super.

Hätte jetzt aber noch einmal eine Frage, weil da wo der Hinweis hinkommen soll, das div bis zum Linkenrand geht, was es ja eigentlich auch nicht machen sollte.

Ist nur so dass ich es gerne schön und sauber machen möchte, und daher das alles verstehen und lernen möchte.

CSS-Code
HTML: 
/*CUSTOMER REQUEST PAGE */

#form {
float:left;
border-style:solid;
border-width:1Px;
}

ul {
list-style:none;
margin:20Px;
margin-top:40Px;
padding:0Px;
}

li label {
float:left;
width:200px;
margin-left:20Px;
}

li label.select {
width:200Px;
margin-bottom:15Px;
}

li select {
float:left;
}

li#buttons {
clear:left;
}

li input[type=submit], li input[type=reset] {
margin:15Px 40Px 0 70Px;
float:left
}

#hinweis {
font-size:0.8em;
white-space:normal;
border-style:solid;
border-width:1Px;

}

<!--[if lt IE 7]>
<style type="text/css">
li input.button {
margin:10px 5px 0 0;
}
</style>
<![endif]-->

HTML-Code:
HTML: 
{if $switch != "send"}

<style type="text/css">
  @import url("datepicker.css");
</style>

<h2>Buchungsanfrage absenden</h2>
	
<div id="form">
	<form name="customer_request" action="{$smarty.const.DOCUMENT_ROOT|cat:'index.php'}?action=customer_request&menu=off" method="post">
		<ul>
			<li><label>Name:</label>
			<input type="text" size="40" name="name" value="{$request.name}"></li>
			<li><label>Adresse:</label>
			<input type="text"  size="40" name="direction" value="{$request.direction}"></li>
			<li><label>E-Mail:</label>
			<input type="text" size="40" name="email" value="{$request.email}"></li>
			<li><label>Telefon:</label>
			<input type="text" size="40" name="tel" value="{$request.tel}"></li>
			<li><label class="select">Erwachsene:</label>
			<select name="num_adult" size="1">
				<option value="0">-</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
			</select></li>
			<li><label class="select">Kinder:</label>
			<select name="num_kids" size="1">
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
			</select></li>
			<li id="buttons">
				<li><label>von</label>
				<input type="text" size="10" id="date_start" name="date_start" ></li>
				<li><label>bis</label>
				<input type="text" size="10" id="date_end" name="date_end" ></li>
			</li>
			<li>
				<input type="submit" class="button" name="submit" value="Absenden">
				<input type="reset" class="button" name="reset" value="Löschen">
				<input type="hidden" name="hotel_id" value="{$request.hotel_id}">
			</li>
		</ul>
	</form>
	{literal}
	<script type="text/javascript">
  /*<[CDATA[*/
  var dpck1	= new DatePicker({
			relative	: 'date_start',
			relativePosition: true,
			cellCallback	: function ( t ) {}
			});
			/*]]>*/
	</script>
	
	{/literal}
	{literal}
	<script type="text/javascript">
  /*<[CDATA[*/
  var dpck1	= new DatePicker({
			relative	: 'date_end',
			relativePosition: true,
			cellCallback	: function ( t ) {}
			});
			/*]]>*/
	</script>
</div>
<div id="hinweis">
	Keine Ess- und Trinkwaren ins Hotel mitbringen.<br>
  Beim Verlassen der Zimmer Türen und Fenster schliessen<br>
  Wertsachen können im Hotelsafe abgegeben werden.<br>
  Vor dem Benutzen des Schwimmbades duschen<br>
  WC Papier und Hygieneartikel - wie überall in Guatemala - nicht im sondern im Kübel daneben entsorgen<br>
  Um Wartezeiten zu vermeiden, bei grösseren Gruppen bitte
  Essen frühzeitig bestellen.<br>
      

</div>
	{/literal}
{else	}
	Anfrage wurde erfolgreich abgesendet!
{/if}
Hier sind einige Sachen von Smarty, die könnt ihr gerne übersehen.

Ist so den sauber gemacht, und wieso geht die eine Box der Infos bis zum Linkenrand.

Wie könnte ich es machen wenn ich es jetzt nur dort so haben will, weil überall bei meinem Projekt wo ich jetzt Listenanwenden möchte, wird das angewendet.

Würde das mit #form ul {}..usw gehen, also wenn ich alles nur unter der id form vereinige, dann wird es ja bei anderen nicht angewendet?

Wie gefällt es euch, und was würdet ihr noch ändern?

lg aus Guatemala
Darian
 

Anhänge

  • form.jpg
    form.jpg
    27 KB · Aufrufe: 156
Hi,

versuch es mal mit diesen Regelerweiterungen:

Code: 
#form {
float:left;
border-style:solid;
border-width:1px;
width:600px;
}

#hinweis {
font-size:0.8em;
white-space:normal;
border-style:solid;
border-width:1px;
margin-left:610px;
}
Selbstverständlich lassen sich die Regeln für das DIV #form spezifizieren.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück