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

Formular

Schneider

New member
Hi ich habe ein Suchformular gestaltet jetzt habe ich ein kleines Problem das eigentlich zu lösen sein sollte aber ich komme einfach nicht drauf!

Ich habe jedes mal einen <label> tag um das input Feld zu beschreiben, normalerweise wird nach jedem <label>Tag und dem Inputfeld umgebrochen und die neue Zeile beginnt.

Folgendes Problem:
Jetzt habe ich ein 2 Labels 2 Input Felder (von: "inputfeld" bis: "inputfeld") in einer Reihe. Beim IE legt er mir es schön neben einander, beim Firefox sieht das ganze anders aus!

Sobald ich noch Radio Boxen udn ein Dropdown Menü dazumache passt das alles nicht mehr so richtig zusammen.

Es wäre super wenn mir jemand helfen könnte?!

Hier der Code
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Suche</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
label.left {float: left; text-align: right; width: 7em; margin-right: 0.3em; margin-top: 0.2em; margin-left:0em;}
input[type=text], select {float: left;}
input.right {float: left; width: auto; clear: both; margin-left: 5.3em; margin-right: .3em;}
input[type=checkbox].right, input[type=radio].right, input[type=submit].right {margin-left: 8.5em;}
form br {clear: both;}
select {float: left; marign-left: 5.5em;}
--> 
</style>
<body>
<form action="search.php">
	<fieldset>
		<legend>Wann wurde die Datei geädert</legend>
			<label for="search_from" class="left">von:</label>
			<input id="search_from" type="text" size="6">
			<label for="search_to">bis</label>
			<input id="search_to" type="text" size="2" style="">
			<br />					
			<label class="left">Auswahl:</label>
			<select size="1">
				<option value="auswahl1">Auswahl 1</option>
				<option value="auswahl2">Auswahl 2</option>
			</select><br />
			<input type="radio" name="rb" value="ja" class="right">
			<label>Entweder</label><br />
			<input type="radio" name="rb" value="nein" class="right">
			<label>Oder</label><br />
	</fieldset>
</form>
</body>
</html>

Hier wäre eine Livedemo:
Suche
 
die Antwort ist relativ einfach
Code:
[COLOR="Red"]label 
 {float: left}[/COLOR]
label.left 
 {text-align: right;
   width: 7em;
   margin-right: 0.3em; 
   margin-top: 0.2em;
   margin-left:0em;}
input[type=text], select 
  {float: left;}

und warum ein clear: both, wenn du nur links floatest!

derTrallala
 
danke für die Info, allerdings wenn ich hier float:left reintue
dann kommt zuerst das Label ("Überschrift) und in der nächsten Zeile dann das Input Feld, ich hätte aber gerne das die "Überschrift" dann das Input dann nochmal die Überschrift und dann nochmal ein Input kommt!
Platz genug wäre ja
 
ich hätte aber gerne das die "Überschrift" dann das Input dann nochmal die Überschrift und dann nochmal ein Input kommt!

Öhm! Du meinst jetzt ungefähr so:

oder so:

oder so:




oder, und ich denke das kommt am ehesten hin, wie folgt:
CSS Schneider » mit Zeilenumbruch, mit ´float:left´ IE und Fifo gleiche Darstellung



???

Oder habe ich das jetzt komplett falsch verstanden?

Grüße
Stephan
 
Zuletzt bearbeitet:

Jup genau so war das gemeint, super !!!!

jetzt habe ich noch eine Frage und zwar ist dieses Formular (später mal eine Suchmaske) in vier Fieldset's aufgeteilt!
wie kann ich diese nebeneiander positionieren?
ich habe versucht diese zu floaten (float:left;) allerding fliegen diese dann dem übergeordnetem div raus!

falls mir jetzt noch jemand helfen kann, dann wäre ich wunschlos glücklich
und danke nochmals für die bisherige Hilfe!
 
Zurück
Oben