Form in einer Reihe

**DenisCGN** · 15.09.2010, 23:55

Nabend,

kann mir jemand sagen, wie ich die Formelemente in eine Riehe bekommen?

https://www.ssl-id.de/ichbinmusiker.de/form.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#formContainer {
	position: relative;
	width: 400px;
	height: 40px;
	background-color: #99CC66;
}
#formLogin {
	height: 22px;
	width: 400px;
	position: absolute;
	top: 9px;
	left: 0px;
	background-color: #FFCCFF;
}
#formLogin ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
#formLogin li {
	padding: 0px;
	display: inline;
	margin: 0px;
}
#formLogin input {
	background-color: #4F4F4F;
	padding: 0px;
	border: 1px solid #00CCCC;
	color: #CCCCCC;
	height: 20px;
}
.loginButton {
background: url("_fireworks/layout/loginButton.png") 0% 50%;
width: 22px;
height: 22px;
border: none;
}
-->
</style>
</head>
<body>
<div id="formContainer">
  <form id="formLogin" name="formLogin" method="post" action="">
    <input name="username" type="text" id="username" value="Benutzername" />
    <input name="pasword" type="password" id="pasword" value="Passwort" />
    <input name="loginButton" type="submit" id="loginButton" value=" " class="loginButton" />
  </form>
</div>
</body>
</html>

Vielen Dank!
derDenis

**Cybergreek** · 16.09.2010, 00:19

Die sind doch in einer Reihe?!

**DenisCGN** · 16.09.2010, 00:31

horizontal ausgerichtet :-)

**max.m** · 16.09.2010, 16:54

Also die Formelemente jedes Formulars sind horizontal nebeneinander.

Möchtest Du alle Formulare nebeneinander? Dann floate sie am besten.

Beispiel:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#formLogin {
	float: left;
}

#formTest {
	float: left;
}

#form2 {
	float: left;
}

.clearer {
	clear: both;
}
-->
</style>
</head>
<body>

<form id="formLogin" name="formLogin" method="post" action="">
<input name="username" type="text" id="username" value="Benutzername" />
<input name="pasword" type="password" id="pasword" value="Passwort" />

<input name="loginButton" type="submit" id="loginButton" value=" "
	class="loginButton" />
</form>

<form id="formTest" method="post" action="">
<input name="textfield" type="text" class="input" id="textfield" />
<input name="textfield2" type="text" class="input" id="textfield2" />
</form>
<form id="form2" method="post" action="">
<input name="textfield3" type="text" class="input" id="textfield3" />
<input name="textfield4" type="text" class="input" id="textfield4" />
</form>
<div class="clearer"></div>
</body>
</html>

Ist zwar nicht valide, sollte aber als Anschauungsmaterial reichen.

**DenisCGN** · 18.09.2010, 09:51

Moin zusammen,

ich möchte nicht alle Formulare nebeneinander, ich möchte, das das Formular, egal welches horizontal und dieses dann vertikal ausgerichtet ist.

So wie die Logins in facebook und wer-kennt-wen.

Und jetzt war ich so fuchsig und habe mir das CSS dort mal angesehen :-)

Hätte ich gleich drauf kommen können :-)

Besten Dank für eure Tipps,
Denis

**Zer0** · 18.09.2010, 10:02

Dann poste doch mal eben für die Nachwelt auch ein paar Schnipsel, wenn du so lieb wärest

**DenisCGN** · 18.09.2010, 10:35

Ich schaue doch noch :-)

Aber da wird auch satt gefloated! Und irgendwie sieht es sehr chaotisch aus :-)

Wenn ichs habe, poste ich mein Ergebnis.

**max.m** · 19.09.2010, 00:38

Zitat von DenisCGN

Moin zusammen,

ich möchte nicht alle Formulare nebeneinander, ich möchte, das das Formular, egal welches horizontal und dieses dann vertikal ausgerichtet ist.

Sorry, ich verstehe nix.

**wildmieze** · 19.09.2010, 01:45

.. bei facebook und wer-kennt-wen stehen label und input untereinander. Also so:

Code:

label1           label2             label3
inputfeld1       inputfeld2         inputfeld3

Ich nehme an, das will er erreichen^^

Facebook nimmt dafür ne Tabelle .. wer-kennt-wen packt um jeden "Block" ein div. Im obigen Beispiel also 3 Stück. Und die kann man dann floaten.

zur Startseite vom TP

Thema: Form in einer Reihe

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Form in einer Reihe

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[CSS] Dynamische Boxen in einer Reihe

Formänderung einer Form

Bildmodul: mehrere Bilder in einer Reihe

Problem mit dem erstellen einer Form

Veränderung einer Form möglich?

Aktive Benutzer

Aktive Benutzer

Berechtigungen