...

View Full Version : 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:



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:



/* 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:


<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:


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum