ugrás a tartalomhoz

vertikalisan kozepre rendezes ill. egymas melle tenni

carstepPCE · 2009. Már. 18. (Sze), 14.43
Hali,

segitsegetekre lenne szuksegem egy beviteli mezo grafikus kibovitesehez?:

/igazabol tanulni szeretnem, hogyan lehetne ehhez hasonlot szebben megoldani/

a minta

- a fenti weboldalon a sarga teruleten van egy input mezo, aminek vertikalisan kozepen kellene lennie (nem margin meg padding topos megoldas erdekel, mert ezzel en is meg tudtam csinalni csak nem nez ki egysegesen minden bongeszoben, kiveve ha ugyanugy nez ki mindenhol);
- es szeretnem elerni, hogy a szoveg es a doboz egy vonalban legyen, ahol a szoveg ha lehetseges szinten kozepre igazitva helyezkedjen el;
- termeszetesen IE6+, FF3+,chorme,Safari 3+, opreaban is mukodnie kell

table kivetelevel barmilyen elemet hozzaadhatunk, elvehetunk a forrasbol, amennyiben segit elerni a vegcelt es a funcionalitas nem szenved csorbat.


-cs-
Sanyi

UI: az en megoldasom a kovetkezo lett, ami sajna margin-top-t es padding-top-t is hasznal:
.pceframe-vrnfield-label{
	line-height:		24px;
	vertical-align:		middle;
	float:				left;
}

#pceframe-vrnfield-wrapper{
	background-image:	url(http://admin.madeformycar.com/testService/incl/iframe7/templates/IMG/vrnbkg.gif);
	background-repeat:	no-repeat;
	background-position:left top;
	padding-left:		24px;
	height:				43px;
	width:				183px;
	float:				left;
}

#pceframe-vrnfield{
	background-color:	#ffcc33;
	border:				medium none;
	color:				#000000;
	font-size:			20px;
	margin-top:			2px;
	padding-top:		10px;
	font-weight:		bold;
	width:				147px;
	text-align:			center;
	font-family:		sans-serif;
}
‹ a div és tartalma mindig kövesse a scrollbarral való mozgatást z-index, overflow, position probléma ›
 ■
1

tovabbi probalkozasom eredmenye

carstepPCE · 2009. Már. 18. (Sze), 17.13
hat sikerult kicsit szebb megoldast kieszkozolnom, kiveve, hogy az IE-hez hacket kellett hasznalnom (sajnos):

Az IE a baseline -ra teszi az input elem aljat, ami ugye nem jo :(:

HTML + CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
	body{
		color:#545454;
		font-family:Verdana,Arial,Helvetica,sans-serif;
		font-size:11px;
	}
	.pceframe-vrnfield-label{
	}

	#pceframe-vrnfield-wrapper{
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	  #pceframe-vrnfield-wrapper li {
		  display: inline;
		  * height:	43px;
		  line-height: 43px;
		  background: transparent;
		  vertical-align: middle;
	  }

	#pceframe-vrnfield{
		background-color:	#ffcc33;
		border:				medium none;
		color:				#000000;
		font-size:			20px;
		font-weight:		bold;
		width:				147px;
		text-align:			center;
		font-family:		sans-serif;
		margin-left:		29px;
		* margin-top: 8px;
		* margin-left: 32px;
	}
	  #aaa {
		background-image:	url(http://admin.madeformycar.com/testService/incl/iframe7/templates/IMG/vrnbkg.gif);
		background-repeat:	no-repeat;
		background-position: 120px 0px;
		height:				43px;
		width:				305px;
		float:				left;
		position:			relative;
	  }
  </style>
  </head>
  <body>
    <form action="" name="sss">
		<div id="aaa">
		<ul id="pceframe-vrnfield-wrapper">
			<li><label for="pceframe-vrnfield" class="pceframe-vrnfield-label">Vechile registration:</label></li>
			<li><input type="text" id="pceframe-vrnfield" /></li>
		</ul>
		</div>
	</form>
  </body>
</html>
-cs-
Sanyi