CSS Input types - Textbox und Submitbutton auf eine Höhe bringen

[raven16]

Hi,

wollte mal nachfragen wie ich am besten Textbox und Button von Typ <input> so auf eine Höhe bringen kann, dass die Ränder dieser Bauteile auf einer Linie gebracht werden und nicht voneinander abweichen...

wäre schön wenn jemand dort eine Lösung weiß...

hab es schon mit margin probiert aber damit konnte ich nicht wirklich ein tolles ergebnis erzielen

lg

so sieht es derzeit aus :-/

 

[Hanni2k]

ohne quelltext wirds schwer. Zeig mal den quelltext abschnitt des formulares

 

[User007]

Hallo raven16,

formatier' beide HTML-Elemente einfach per CSS-Eigenschaft "height" auf die gleiche Höhe.
Alternativ kannst du kleinere Objekte auch mithilfe verschiedener Attribute vertikal (z.B. vertical-align:middle) anordnen ;-)

 

[raven16]

ohne quelltext wirds schwer. Zeig mal den quelltext abschnitt des formulares

<div class="box-top">
     <label>Beitrag-Schnellsuche</label>
</div>
<div class="box-middle">
     <form action="search.php" method="post">
          <label>#</label><input type="textbox" name="search-text" style="width:110px;height:18px;background:#ABADA9;border:1px solid #494949;margin-bottom:2px;">

          <input type="submit" name="search" style="height:18px;background:#A4A4A4;border:1px solid #494949;" value="suchen" >
     </form>
</div>
<div class="box-bottom"></div>

css für die grafiken die dahinter liegen:

div.box-top{
	background: url(design/aufbau/menu_submenu/menu_top.gif);
	width: 189px;
	height: 20px;
	margin-top: 5px;
	padding-left: 3px;
}
div.box-middle{
	background: #A2A2A2;
	width: 190px;
	min-height: 20px;
	height: auto !important;
	height: 20px;
	border: 1px solid #494949;
	border-top: none;
	padding-top: 5px;
	padding-bottom: 5px;
}
div.box-bottom{
	background: url(design/aufbau/menu_submenu/menu_bottom.gif);
	width: 192px;
	height: 10px;
}

In FF sieht es mit diesem Quelltext so aus:

und im IE7 ist der Button total anders:

 

[Hanni2k]

          <input type="submit" name="search" style="height:18px;background:#A4A4A4;border:1px solid #494949;" value="suchen" >

da fehlt ein:

margin-bottom:2px;

Jedenfalls ist das dann bei mir auf gleicher höhe. (IE undFF)

 

[Fatal Error]

oder du gibst beide elemente einfach in eine tabelle, in ein tr und für jedes element ein td

 

[raven16]

margin-bottom:2px;

Jedenfalls ist das dann bei mir auf gleicher höhe. (IE undFF)

Jo, mit den margin-bottom: 2px; habe ich die unterkanten auf eine höhe bekommen und mit height: 20px; statt 18px hab ich die oberkante auf gleiche höhe bekommen... danke

aber im FF weicht das bei mir noch ganz leicht ab, im IE ist beides auf gleicher Höhe dadurch :-/
Und kann man auch den abstand zwischen den beiden Objekten entfernen?
sodass es ungefähr so aussieht:

 

[QXARE]

Nach links floaten oder dem Button ein negatives margin-left mitgeben.

 

[Hanni2k]

würds auch mal mit einer tabelle probieren, oder als listenpunkte. mit <li>