...

View Full Version : Form insert is stretching out my table



nickchrisless
10-23-2006, 08:56 PM
I have a vBulletin forum myself, and I'm trying to make a header for it. Whenever I try to copy the search form information from the template and paste it into the appropriate <td>, it stretches out my table leaving the header unaligned.

I could post all of my code in here... or as a simplified option you can just go to www.sportstalknet.net/header_new.html and view the source code.

Thank you!

nickchrisless
10-24-2006, 06:55 PM
Here is my table... like said, it's all laid out perfectly until the search form is entered. Then it becomes a bit stretched out vertically. You'll notice this by looking at the middle links, or the "remember me" section to the right...

The form of the table should continue to look like:


http://www.sportstalknet.net/header.jpg

Here is the code (HTML):

<table id="Table_01" width="778" height="87" border="0" cellpadding="0" cellspacing="0" background="images/header_bg.jpg">
<tr>
<td rowspan="10" width="295" height="87"></td>
<td colspan="5" rowspan="2" width="332" height="34" align="center">
<!-- Search Form -->
<form action="search.php?do=process" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="text" class="bginput" name="query" style="font-size:9px;" value="Search SportsTalkNet.net" size="29" tabindex="1001" />
<input type="image" src="images/go.jpg" class="button" value="go" tabindex="1004" />
</form>
<!-- End Search Form -->
</td>
<td width="150" height="19"></td>
<td>
<img src="images/spacer.gif" width="1" height="19" border="0"></td>
</tr>
<tr>
<td rowspan="9" width="150" height="68" align="right">
<!-- login form -->
<form action="http://www.sportstalknet.net/forums/login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>

<div class="logintext"><label for="navbar_username">User Name:</label>
<input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="User Name" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" />
<br><label for="navbar_password">Password:</label>
<input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" />
<br>Remember Me?<input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />
<input type="image" class="button" src="images/login.gif" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />
</div>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</td>
<td>
<img src="images/spacer.gif" width="1" height="15" border="0"></td>
</tr>
<tr>
<td rowspan="3" width="1" height="17"></td>
<td rowspan="2">
<a href="advertise.html">
<img src="images/advertise.jpg" width="68" height="11" border="0"></a></td>
<td colspan="3" width="263" height="8"></td>
<td>
<img src="images/spacer.gif" width="1" height="8" border="0"></td>
</tr>
<tr>
<td rowspan="6" width="44" height="38"></td>
<td rowspan="5">
<a href="forums/register.php">
<img src="images/register.gif" width="108" height="33" border="0"></a></td>
<td rowspan="6" width="111" height="38"></td>
<td>
<img src="images/spacer.gif" width="1" height="3" border="0"></td>
</tr>
<tr>
<td width="68" height="6"></td>
<td>
<img src="images/spacer.gif" width="1" height="6" border="0"></td>
</tr>
<tr>
<td colspan="2">
<a href="forums/sendmessage.php">
<img src="images/contact_us.jpg" width="69" height="10" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<tr>
<td colspan="2" width="69" height="9"></td>
<td>
<img src="images/spacer.gif" width="1" height="9" border="0"></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href="about_us.html">
<img src="images/about_us.jpg" width="69" height="10" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td width="108" height="5"></td>
<td>
<img src="images/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td colspan="5" width="332" height="7"></td>
<td>
<img src="images/spacer.gif" width="1" height="7" border="0"></td>
</tr>
</table>

nickchrisless
10-25-2006, 07:01 PM
bump.

_Aerospace_Eng_
10-25-2006, 08:56 PM
Hmm 3 posts and already bumping. We are all volunteers here. Sometimes a post slips by. Something you need to understand is that you are not the only person that needs help. Be patient or no one will want to help you. Forms have default margins and padding that vary among browsers.

You should also read this: "Why Tables for Layout is Stupid?" (http://www.hotdesign.com/seybold/)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
form {
margin:0;
padding:0;
}
#Table_01 {
height:87px;
background:url(images/header_bg.jpg);
width:778px;
}
</style>
</head>
<body>
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="10" width="295" height="87"></td>
<td colspan="5" rowspan="2" width="332" height="34" align="center"><!-- Search Form -->
<form action="search.php?do=process" method="post">
<input type="hidden" name="do" value="process">
<input type="hidden" name="quicksearch" value="1">
<input type="hidden" name="childforums" value="1">
<input type="hidden" name="exactname" value="1">
<input type="hidden" name="s" value="$session[sessionhash]">
<input type="text" class="bginput" name="query" style="font-size:9px;" value="Search SportsTalkNet.net" size="29" tabindex="1001">
<input type="image" src="images/go.jpg" class="button" value="go" tabindex="1004">
</form>
<!-- End Search Form --> </td>
<td width="150" height="19"></td>
<td><img src="images/spacer.gif" width="1" height="19" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="9" width="150" height="68" align="right"><!-- login form -->
<form action="http://www.sportstalknet.net/forums/login.php?do=login" method="post" onSubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<div class="logintext">
<label for="navbar_username">User Name:</label>
<input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="User Name" onFocus="if (this.value == '$vbphrase[username]') this.value = '';">
<br>
<label for="navbar_password">Password:</label>
<input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102">
<br>
Remember Me?
<input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c">
<input type="image" class="button" src="images/login.gif" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s">
</div>
<input type="hidden" name="s" value="$session[sessionhash]">
<input type="hidden" name="do" value="login">
<input type="hidden" name="vb_login_md5password">
<input type="hidden" name="vb_login_md5password_utf">
</form>
<!-- / login form --> </td>
<td><img src="images/spacer.gif" width="1" height="15" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="3" width="1" height="17"></td>
<td rowspan="2"><a href="advertise.html"> <img src="images/advertise.jpg" width="68" height="11" border="0" alt=""></a></td>
<td colspan="3" width="263" height="8"></td>
<td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
</tr>
<tr>
<td rowspan="6" width="44" height="38"></td>
<td rowspan="5"><a href="forums/register.php"> <img src="images/register.gif" width="108" height="33" border="0" alt=""></a></td>
<td rowspan="6" width="111" height="38"></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td>
</tr>
<tr>
<td width="68" height="6"></td>
<td><img src="images/spacer.gif" width="1" height="6" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2"><a href="forums/sendmessage.php"> <img src="images/contact_us.jpg" width="69" height="10" border="0" alt=""></a></td>
<td><img src="images/spacer.gif" width="1" height="10" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2" width="69" height="9"></td>
<td><img src="images/spacer.gif" width="1" height="9" border="0" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><a href="about_us.html"> <img src="images/about_us.jpg" width="69" height="10" border="0" alt=""></a></td>
<td><img src="images/spacer.gif" width="1" height="5" border="0" alt=""></td>
</tr>
<tr>
<td width="108" height="5"></td>
<td><img src="images/spacer.gif" width="1" height="5" border="0" alt=""></td>
</tr>
<tr>
<td colspan="5" width="332" height="7"></td>
<td><img src="images/spacer.gif" width="1" height="7" border="0" alt=""></td>
</tr>
</table>
</body>
</html>

nickchrisless
10-25-2006, 10:39 PM
I apologize for offending you with my bump. I read the rules and guidelines first to check on anything that was against bumping.

Then I did the 24 hour thing until I bumped. Again, I'm sorry.

Now... what all did you do? Added CSS instead of dragging out the <table> tag and set the form's margin and padding to 0? That's nifty.

This CSS + <div>s is amazing, and I never knew any of it. I'm still a little vague on it though after reading. Let me tell you what my process is, and then maybe you can tell me a step or 2 around that to make it easier.

I typically design my layout in Photoshop and export my slices in ImageReady... I then just set the <td>s to the height and width that I need them to be and take out the extra image, since I have a background image in the <table> tag.

I then set my CSS for all of my text and spacings that I may need...

With that process, is there a way to use <div>s instead? I really don't want to cut out the ImageReady part, I realize that it might not be the best code in the world that it spits out, but it's so dang easy. After I got the code from ImageReady could I change it to <div>s instead?

I guess my biggest issue is wanting to avoid having to code my layout from scratch. That sounds very time consuming and difficult.

_Aerospace_Eng_
10-26-2006, 12:18 AM
Yeah that is what most real web designers do. They design in Photoshop and export just the images. We code our layouts from scratch. If its for personal use then do what you think is easiest just don't go offering your services for hire because you don't seem to be ready for it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum