• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

css form mit float

C

clearer

New member
Hallo, ich begrüsse euch auch...​
...denn ich bin der neue...​
...und komme schnell zur Sache!:d​

Bisher habe ich Formulare mit Tabellen erstellt. Jetzt wollte ich mal so richtig auf den Käse hauen und CSS verwenden. Ich habe gegoogelt und einige Seiten gefunden, die ich letztendlich nicht sehr hilfreich fand.

Auf einer Seite wurde das Element label völlig falsch beschrieben und dazu war noch der Quellcode falsch, der mich völlig in die Irre führte.

Meiner Meinung nach kann man sich dieses Element sowieso schenken!

Viel geredet, nix gesagt! Nun also zum Problem.
Warum zerschiessen mir die textareas mein Formular?
Alle Elemente ordnen sich auf Grund von float auf der linken Seite an.
Nur die Textfelder stehen wirr nebeneinander.

Ich denke, das könnte an der unterschiedlichen Höhe liegen und habe alle textareas deswegen u.a. auch schon mit einem extra DIV versehen, was aber nicht Sinn der Sache sein kann...

Übrigens habe ich das Problem vorwiegend im Firefox. Ich habe das Gefühl, dort wird mehr zerschossen als ich Code habe. ;) Im IE passt es eigentlich ganz gut.

Naja, bevor eure Ohren bluten und ihr mich direkt wieder abserviert bevor ich überhaupt losgelegt habe, hier Auschnitte meines Codes:

Formular:
PHP: 
<div id="box">
    <h2>Interne Daten zum Objekt:</h2>
    <div id="bezeichnung">Objektnummer:</div><input name="objektnr" type="text"><br>
    <div id="bezeichnung">Überschrift:</div><input name="titel" type="text"><br>
    <div id="bezeichnung">Standort (PLZ, Ort):</div><input name="plz_standort" type="text"><input name="ort_standort" type="text"><br>
</div>

<div id="box">
    <h2>Textbeschreibungen zum Objekt:</h2>
    	<div id="bezeichnung">Objektbeschreibung:</div><textarea name="beschreibung"></textarea><br>
    	<div id="bezeichnung">Ausstattung:</div><textarea name="ausstattung"></textarea><br>
   	<div id="bezeichnung">Lage:</div><textarea name="lage"></textarea><br>
    	<div id="bezeichnung">Sonstiges:</div><textarea name="sonstiges"></textarea><br>
</div>

css:
PHP: 
html, body {
	margin: 10px; 
	margin-left: 50px;
	font-size: 9pt;
	color: #333;
	font-family: Verdana, Arial, sans-serif;
	background-color: #FFF;
}

div#box {
	width: 75%;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #FFF;
	border: 1px dashed #333;
}

h1 {
	font-size: 11pt;
	color: #333;
}

h2 {
	font-size: 10pt;
	color: #333;
}


div#bezeichnung {
	float: left;
	width: 200px;
	text-align: right;
	margin: 5px 2px;;
}

input, textarea  {
	float: left;
	width: 200px;
}

form br { 
  clear: left;
 
Zuletzt bearbeitet:
Hab Dir mal ein kleines Beispiel gebastelt. Ideen für CSS-Gestaltung kannst Du Dir hier holen:
CSS Design-Wettbewerb: Newsletterbox Designideen | Dr. Web Magazin
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formulare</title>
<style type="text/css">
html, body {
	margin: 10px;
	margin-left: 50px;
	font-size: 9pt;
	color: #333;
	font-family: Verdana, Arial, sans-serif;
	background-color: #FFF;
}

form {
	width: 75%;
	margin:0;
	padding:.5em;
	display: block;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #FFF;
	border: 1px dashed #333;
}

legend {
	font-size: 10pt;
	color: #333;
}

label {
	float: left;
	width: 200px;
	text-align: right;
	margin: 5px 2px;
}

input {
	float: left;
	width: 200px;
}

form br {
	clear: left;
}
</style>
</head>
<body>
<div>
<form action="#">
	<fieldset>
		<legend>Interne Daten zum Objekt:</legend>
		<label for="objektnr">Objektnummer:</label> <input id="objektnr" type="text" name="objektnr" /><br />
		<label for="title">Überschrift:</label> <input id="title" type="text" name="title" /><br />
		<label for="plz_standort">Standort (PLZ, Ort):</label> <input id="plz_standort" type="text" name="plz_standort" /><input id="ort_standort" type="text" name="ort_standort" /><br />
	</fieldset>
</form>
</div>

<div>
<form action="#">
	<fieldset>
		<legend>Textbeschreibungen zum Objekt:</legend>
		<label for="beschreibung">Objektbeschreibung:</label> <input id="beschreibung"  type="text" name="beschreibung" /><br />
		<label for="ausstattung">Ausstattung:</label> <input id="ausstattung" type="text" name="ausstattung" /><br />
		<label for="lage">Lage:</label> <input id="lage" type="text" name="lage" /><br />
		<label for="sonstiges">Sonstiges:</label> <input id="sonstiges" type="text" name="sonstiges" /><br />
	</fieldset>
</form>
</div>
</body>
</html>
 
Hi anna, vielen Dank für Dein Beispiel!
Du hast mir damit sehr weitergeholfen.

Außerdem habe ich mir den Link reingetan.
Da gibt et ja ganz schön hübsche Sachen. Nicht schlecht!
Mal sehen, wann ich dort meine berüchtigten CSS-Formulare sehe. :D

the clearer
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben