Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form insert is stretching out my table

    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!

  • #2
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:


    Here is the code (HTML):
    Code:
    <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>

  • #3
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bump.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?"

    Code:
    <!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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    Last edited by _Aerospace_Eng_; 10-26-2006 at 01:27 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •