Resolved Image and form alignment please help

Money88 · 04-30-2009, 01:58 AM

Okay so if you look at this site

**URL REMOVED BY POSTER**

you can see that the forms at the top are a little off. I have taken away the top image and the one below the issue for now. but i am those work fine already.

The question is how can i align the input images and the actual input fields in the middle of that div?

Here is the HTML:

Code:

BEGINNING CODE CUT OUT....

<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>

<body>
<div id="outer">
	
	<!-- Header -->
	<div id="header_top"> 
		<div align="right" class="wlcme_usr">
		Welcome <strong>Guest</strong>, Please <a class="wlcme_usr" href="#">login</a>or <a class="wlcme_usr" href="#">register</a> 
		</div>
	</div>
	<div id="header_middle">
		<form method="post" action="">
			<span style="margin-left: 350px; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
				<input type="text" size="7" style="color:#FFFFFF; background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="site"/>
				&nbsp; 
				<input type="image" name="search" src="images/search_go.gif" BORDER="0" ALT="Search">
			</span>
	  		<span style="margin-left: 32px;">
	  			<img src="images/user_login.gif" /> 
	  		</span>
	 		<span style="margin-left: 5px; background-image: url(images/search_input_box.gif); background-repeat: no-repeat;"> 
		 		<input type="text" size="7" style="color:#FFFFFF; background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="username"/>
			</span>
			<span style="margin-left: 2px; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
		 		<input type="text" size="7" style="color:#FFFFFF; background-color: transparent; border: solid 0px #FFF;" maxlength="100" name="password"/>
			</span>
			<span style="margin-left: 1px; ">
				<input name="login" type="image" src="images/login_button.gif" alt="Login" border="0" />
			</span>
		</form>
	</div>
	<div id="header_bottom"></div>
	<!-- Header End -->
	
ENDING CODE CUT OUT...

HERE is the CSS well part of it. the part we need:

Code:

/* Layout Stylesheet */ 

body {
 margin:20px;
 background:#808080;
 color: #333333;
 text-align:center;
 padding:0;
 }

#outer {
 text-align:left;
 border:1px solid #000000;
 width:760px;
 margin:auto;
 
 }
 
#header_top {
	height:37px;
	background-image: url('images/header_top11.gif');
}

#header_middle {
	height:23px;
	background-image: url('images/header_top2.gif');
}

#header_bottom {
	height: 128px;
	background-image: url('images/header_bottom1_big.gif');
}	

#bar {
 height:35px;
 background:#c0c0c0;
 color: #333333;
 /* border:solid #000000;	
 border-width:1px 0 1px 0; */
 
 }

#bodyblock {
 /* position:relative; */
 margin: auto;
 background: #dcdcdc;
 color: #333333;
 width:760px;
 padding:0;
 }

#l-col {
 float:left;
 background:#dcdcdc;
 color: #333333;
 width:145px;
 }

#cont {
 width:495px;
 background:#ffffff;
 color: #333333;
 border:solid #000000;	
 border-width:0 0 0 1px;
 text-align:left;
 }

#ftr {
 height:25px;
 background:#c0c0c0;
 color: #333333;
 border:solid black;
 border-width:1px 0 0 0;
 margin:0;
 width: 760px;
 }

Money88 · 04-30-2009, 02:26 AM

wow always figures whenever i look for help i figure it out haha. Well if anyone else is looking to do the same type of thing...

Its sloppy but works.

HTML:

Code:

	<form method="post" action="http://www.tipjar.com/cgi-bin/test">
			<span style="margin-left:350px; vertical-align:top; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
				<input type="text" size="7" class="top" maxlength="100" name="site"/>
				&nbsp; 
				<input type="image" name="search" src="images/search_go.gif" BORDER="0" ALT="Search">
			</span>
	  		<span style="margin-left: 32px;">
	  			<img src="images/user_login.gif" /> 
	  		</span>
	 		<span style="margin-left:5px; vertical-align:top; background-image: url(images/search_input_box.gif); background-repeat: no-repeat;"> 
		 		<input type="text" size="7" class="top" maxlength="100" name="username"/>
			</span>
			<span style="margin-left:2px; vertical-align:top; background-image: url(images/search_input_box.gif);  background-repeat: no-repeat;"> 
		 		<input type="text" size="7" class="top" maxlength="100" name="password"/>
			</span>
			<span style="margin-left: 1px; ">
				<input name="login" type="image" src="images/login_button.gif" alt="Login" border="0" />
			</span>
		</form>

CSS TOP for the input:

Code:

input.top {
	vertical-align:top; 
	margin-top: .5%; 
	height: 10px; 
	color:#FFFFFF; 
	background-color: transparent; 
	border: solid 0px #FFF;
}