[Erledigt] Formular mit CSS gestalten: Probleme mit Ausrichtung

Julian · 16.08.2010, 03:53

Hallo miteinander,

ich stehe vor einem kleinen Problem bei der Ausrichtung eines Input-Feldes.
In einem 20px hohen Div-Container (+2px padding) sind zwei <input>-Felder (1x type=text und 1x type=image), die eine Suche darstellen sollen.

Die Abstände, Abmessungen etc. sollten eigentlich soweit korrekt sein, aber das Eingabefeld hängt um einige Pixel runter, was ich mir nicht so recht erklären kann.

An anderen CSS-Angaben kann es auch nicht liegen, da ich es in einer unabhängigen Datei getestet habe.

Was mich etwas verwirrt: Setze ich die font-size des Eingabefeldes auf einen hohen Wert (>=26), so rückt das Eingabefeld auf die gewünschte Position. Das ist natürlich kein gewünschtes Workaround.

Das Phänomen tritt bei Firefox, Opera sowie auch Chrome auf (IE nicht getestet).

Um Euch das Problem zu Visualisieren, habe ich mal Screenshots zusammengestellt:

Und zum Schluss der Code zu dem Drama:

Code:

<form action="index.php" method="post">
<div class="search">
<input type="text" class="search_input" tabindex="1" name="s" id="s" value="Suche..."  onfocus="this.value=''" />
<input type="image"  src="/images/magnifier.png" class="search_send" alt="Suchen"  tabindex="2" />
</div>
</form>

Code:

.search {
	height: 20px;
	float: right;
	background-color: #21496f;	
	padding: 2px;
}
.search input {
	background-color: #4682b4;
	color: #FFFFFF;
	border: 0;
	padding: 0;
}
.search_input {
	width: 200px;
	height: 20px;
	font-size: 12px;
	margin: 0 2px 0 0;
}

.search_send {
	width: 20px; 
	height: 20px;
	background-color: #21496f;

}

Hoffe auf Eure Hilfe

ChrisB · 16.08.2010, 03:57

Ich sehe weder Angaben zu vertical-align noch line-height ...

TrueEdge · 16.08.2010, 13:01

Wie ChrisB auch schon sagt, du hast ja nichts angegeben, wie der Abstand nach oben bzw. nach unten sein soll. Und die Höhe des Eingabe Feldes hast du auch nicht mit line-height angegeben.

nikosch · 16.08.2010, 13:17

Das hängt damit zusammen, dass das Bild auf der Baseline des Eingabefeldes sitzt.

Trainmaster · 16.08.2010, 13:35

Code:

.search input {
        float: left;
}

Julian · 16.08.2010, 14:17

Hmm okay...

Besten Dank für Eure Hilfe. Mit float: left; oder auch vertical-align: top; komme ich zum Ziel.
Keine Ahnung wieso ich da nicht selber auf gekommen bin. Vielleicht habe ich auch so viel rumprobiert, dass meine Lösungsvorschläge sich gegenseitig behindert haben.

Wie auch immer, das Problem ist gelöst.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Hilfe bei Formular	Singular	PHP Tipps 2009	8	12.12.2009 22:34
[Erledigt] Formular ergebnisse direkt unter Formular ausgeben	www.donald.com^	PHP Tipps 2009	3	16.11.2009 17:20
Dynamisches Formular funktioniert nicht	bingo	JavaScript, Ajax und mehr	7	26.10.2009 15:59
Probleme mit Affe formular	kleiner57990	PHP Tipps 2009	41	19.09.2009 15:54
[Erledigt] Aus Formular verschiedene andere Formulare aufrufen	melz	PHP Tipps 2009	11	11.09.2009 12:27
Probleme mit PHP nach Formular Auswahl	BjoernSchmitt	PHP Tipps 2009	18	29.03.2009 16:52
PDF Formular ausfüllen mit PHP Formular	oomworld	PHP Tipps 2009	1	26.03.2009 19:09
Probleme mit formular...	skytrance	PHP Tipps 2006	25	27.04.2006 16:21
formular includen	samspa5	PHP Tipps 2006	13	18.03.2006 11:37
[Erledigt] Formular in Formular		HTML, Usability und Barrierefreiheit	4	19.10.2005 12:18
Probleme mit Formular		PHP Tipps 2005-2	3	08.09.2005 16:00
Probleme mit sehr großem Formular		PHP Tipps 2005-2	4	01.09.2005 09:52
[Erledigt] Probleme mit "		PHP Tipps 2005-2	3	23.06.2005 22:38
Probleme mit POST ohne Formular		PHP-Fortgeschrittene	7	20.09.2004 21:52

16.08.2010, 03:53
Julian Neuer Benutzer Registriert seit: 22.05.2009 Beiträge: 13 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Formular mit CSS gestalten: Probleme mit Ausrichtung Hallo miteinander, ich stehe vor einem kleinen Problem bei der Ausrichtung eines Input-Feldes. In einem 20px hohen Div-Container (+2px padding) sind zwei <input>-Felder (1x type=text und 1x type=image), die eine Suche darstellen sollen. Die Abstände, Abmessungen etc. sollten eigentlich soweit korrekt sein, aber das Eingabefeld hängt um einige Pixel runter, was ich mir nicht so recht erklären kann. An anderen CSS-Angaben kann es auch nicht liegen, da ich es in einer unabhängigen Datei getestet habe. Was mich etwas verwirrt: Setze ich die font-size des Eingabefeldes auf einen hohen Wert (>=26), so rückt das Eingabefeld auf die gewünschte Position. Das ist natürlich kein gewünschtes Workaround. Das Phänomen tritt bei Firefox, Opera sowie auch Chrome auf (IE nicht getestet). Um Euch das Problem zu Visualisieren, habe ich mal Screenshots zusammengestellt: Und zum Schluss der Code zu dem Drama: Code: <form action="index.php" method="post"> <div class="search"> <input type="text" class="search_input" tabindex="1" name="s" id="s" value="Suche..." onfocus="this.value=''" /> <input type="image" src="/images/magnifier.png" class="search_send" alt="Suchen" tabindex="2" /> </div> </form> Code: .search { height: 20px; float: right; background-color: #21496f; padding: 2px; } .search input { background-color: #4682b4; color: #FFFFFF; border: 0; padding: 0; } .search_input { width: 200px; height: 20px; font-size: 12px; margin: 0 2px 0 0; } .search_send { width: 20px; height: 20px; background-color: #21496f; } Hoffe auf Eure Hilfe


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.08.2010, 03:57
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Ich sehe weder Angaben zu vertical-align noch line-height ... __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

16.08.2010, 13:01
TrueEdge Erfahrener Benutzer Registriert seit: 22.04.2010 Beiträge: 101 PHP-Kenntnisse: Anfänger	Wie ChrisB auch schon sagt, du hast ja nichts angegeben, wie der Abstand nach oben bzw. nach unten sein soll. Und die Höhe des Eingabe Feldes hast du auch nicht mit line-height angegeben.

16.08.2010, 13:17
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.257 PHP-Kenntnisse: Fortgeschritten	Das hängt damit zusammen, dass das Bild auf der Baseline des Eingabefeldes sitzt. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

16.08.2010, 13:35
Trainmaster Erfahrener Benutzer Registriert seit: 25.05.2010 Beiträge: 793 PHP-Kenntnisse: Anfänger	Code: .search input { float: left; }

16.08.2010, 14:17
Julian Neuer Benutzer Registriert seit: 22.05.2009 Beiträge: 13 PHP-Kenntnisse: Fortgeschritten	Hmm okay... Besten Dank für Eure Hilfe. Mit float: left; oder auch vertical-align: top; komme ich zum Ziel. Keine Ahnung wieso ich da nicht selber auf gekommen bin. Vielleicht habe ich auch so viel rumprobiert, dass meine Lösungsvorschläge sich gegenseitig behindert haben. Wie auch immer, das Problem ist gelöst.