Move The Search Bar To The Left

adham23 · November 14, 2011

i need help moving my search bar on my website to the left. i don't know anything about HTML but I'm learning i just cant figure this out can someone please help? i added a picture of what my site looks like maybe it could help. i don't even know where to start looking please help! i want to get my site up and running before my trial is over. My HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="/v/vspfiles/templates/104/css/Imports.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/v/vspfiles/templates/104/js/v_custom.js"></script></head> <body id="body"><div id="header"> <div class="site_tools"> <div id="display_homepage_title" class="colors_homepage_title"><img src="/clear1x1.gif" style="height: 26px; width: 350px;" border="0" /></div> <div id="search_box"> <label id="search_label">Search:</label> <div id="display_search"> <form action="Config_FullStoreURLSearchResults.asp" method="get" name="SearchBoxForm"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td valign="middle"><input type="text" maxlength="20" value="" name="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" /></td> <td valign="middle"> <img border="0" onclick="document.forms['SearchBoxForm'].submit();" src="/v/vspfiles/templates/104/images/template/btn_go.gif" style="cursor: pointer;" alt="Search"/></td> </tr> </table> </form> </div> </div> </div> <div id="top_nav"> <ul> <li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li> <li><a href="Config_FullStoreURLshoppingcart.asp">View Cart</a></li> <li><a href="Config_FullStoreURLmyaccount.asp">My Account</a></li> <li><a href="Config_FullStoreURLhelp.asp">Help / FAQ</a></li> </ul> </div> <div class="clear"></div> <div id="display_menu_3" class="topmenu"></div></div> <div id="content"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" id="left_nav" width="160"> <div id="main_nav"> <div id="first_nav" class="nav_section"> <h3 style="color: Menu1_Title_TextColor; background-color: Menu1_Title_BgColor;">Menu1_Title</h3> <div id="display_menu_1" class="left_menu"></div> </div> <div id="second_nav" class="nav_section"> <h3 style="color: Menu2_Title_TextColor; background-color: Menu2_Title_BgColor;">Menu2_Title</h3> <div id="display_menu_2" class="left_menu"></div> </div> <div id="fourth_nav" class="nav_section"> <h3 style="color: Menu4_Title_TextColor; background-color: Menu4_Title_BgColor;">Menu4_Title</h3> <div id="display_menu_4" class="left_menu"></div> </div> <div id="fifth_nav" class="nav_section"> <h3 style="color: Menu5_Title_TextColor; background-color: Menu5_Title_BgColor;">Menu5_Title</h3> <div id="display_menu_5" class="left_menu"></div> </div> </div> <div id="display_promotions_999"> <p>Nav Promotions</p> <br /><br /><br /> </div> </td> <td id="content_area" valign="top" ></td> </tr> </table></div> <div id="footer"> <div id="footer_top"> <ul> <li><a href="Config_FullStoreURLaboutus.asp" > Company Info</a></li> <li><a href="Config_FullStoreURLterms.asp" > Terms of Use</a></li> <li><a href="Config_FullStoreURLaffiliate_info.asp">Become an Affiliate</a></li> <li><a href="Config_FullStoreURLpindex.asp" > Product Index</a></li> <li><a href="Config_FullStoreURLcindex.asp" > Category Index</a></li> <li class="last"><a href="Config_FullStoreURLhelp.asp" > Help</a></li> </ul> </div> <div id="footer_bottom"> <p><a href="Config_FullStoreURLterms.asp" >Copyright © <script type="text/javascript">document.write((new Date()).getFullYear());</script> Config_CompanyNameLegal. All Rights Reserved.</a>  Shopping Cart Powered by <a href="http://www.volusion.com" target="_blank">Volusion</a>.</p>  </div> </div></body></html> My CSS: /* ############################### BEGIN FIXES ############################### *//* admin box */.qe_toolbar_ovr{z-index:9999 !important;}/* quick edit toolbar color fix */.qe_toolbar_ovr td{color:#000;}.qe_toolbar_ovr td a{color:#000 !important;} /* --- Color Fixes for Black Templates W09 --- */.description{color: #000 !important;}.product_name{color: #000 !important;}.quantity{color: #000 !important;}.price{color: #000 !important;}#table_checkout_cart0, #table_checkout_cart2, #table_checkout_cart3 {background-color:transparent !important;}#span_Shopping_Cart_UnEditable td {color: #ffffff ! important;}#font_checkout_cart a {color: #ffffff ! important;}#font_checkout_cart a:hover {color: #ffffff ! important; text-decoration: underline ! important;}/* winter09 */.next_page_img{width:auto !important; height:auto !important;}.previous_page_img{width:auto !important; height:auto !important;}.soft_add_content_area span, .quantity{color:#000;}.soft_add_wrapper {z-index:999;}/* ############################### END FIXES ############################### */ body{ text-align:center; margin:0; padding:0; font-size:12px; background:#000 url(../images/Template/body_background.gif) repeat-x top left; font-family: Arial, Tahoma, helvetica, sans-serif; margin: 15px;} #body .clear{clear:both;} #body a{ text-decoration:none;}#body li.last{ margin:0; padding:0; border:none;}#body a:hover{ text-decoration:underline;}#header{ width:984px; height:160px; padding:0; margin:0px auto; text-align:left; background:url(../images/template/header_bg.jpg) no-repeat left top;}#header .site_tools{ float:left; padding-top:40px; width:595px;}#header div#display_homepage_title{ float:left; width:355px; margin:0; padding:0; height:58px; text-align:left; font-size:1em;} #header div#display_homepage_title a{ text-indent:-9999px; display:block; width:100%; height:100%; text-align:left;}#header div#display_homepage_title a#homepage_title{ margin:0; padding:0; text-indent:0; display:block; width:100%; height:100%; font-size:2.2em; background:transparent; text-align:left;} #top_nav { margin:0; padding:0; width:375px; height:19px; background:url(../images/Template/top_nav_menu.gif) no-repeat 0 0; text-align:left; float:right;} #top_nav ul{ margin:0; padding:0; list-style:none; width:100%; padding-left:2em;} #top_nav ul li { display:inline;} #top_nav ul li a{ color:#FFFFFF; padding-right:3em; text-transform:uppercase; font-family: Arial, verdana, sans serif; font-size:10px; } #top_nav ul li a:hover{ color:#B9CED5; text-decoration:none;} div#search_box{ float:right; padding:10; text-align:left; width:200px; height:19px; margin:0;}#search_box label{ color:#939393; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; display:block; }#display_search{ margin:0; padding:0;}#display_search form{ padding:0; margin:0;}#display_search table td{ vertical-align:middle; height:19px; margin:0; padding:0;}#display_search input{ margin:0; padding:3px; vertical-align:middle; width:160px; border:1px solid #353535; font-size:10px;} #display_search img{ margin:0; padding:0; display:block;} #header .topmenu{ margin:28px 0 0 28px; height: 20px;} #content{ padding:0; margin:0; text-align:left; width:984px; margin:0px auto; background:#000 url(../images/Template/content_background.gif) repeat-y right top;} #content > *{ text-align:left;} #left_nav{ margin:0; padding:0; background:#000 url(../images/template/left_nav_tile.gif) repeat-y left top; height:100%; width:197px; } #left_nav h3{ margin:0; padding:0; color:#fff; font-size:12px; font-family:"Trebuchet MS"; background:url(../images/Template/left_nav_title.png) no-repeat right top; text-transform:uppercase; text-align:left; font-weight:bold; height:19px; vertical-align:middle; line-height:19px; padding-left:2.5em; margin-right:.5em; margin-bottom:1.5em;} #left_nav #main_nav{ margin:0; padding:0; padding-top:1em; background:url(../images/template/left_nav_top_background.gif) no-repeat left top;} #left_nav #main_nav div.nav_section{ width:197px; padding:0; margin:0;} #display_promotions_999{ padding-left:2em; text-align:center; width:162px; margin-bottom:2em;} #content #content_area{ margin:0; padding:0em; padding-right:.2em; padding-bottom:3em; padding-left:10px; text-align:left; width:762px;} #content #content_area table{ text-align:left;}#footer{ margin:0; padding:0; text-align:left; width:984px; height:50px; position:relative; margin:0px auto; font-size:.8em; color:#fff; margin-bottom:.2em; font-family:Arial, Helvetica, sans-serif; background:url(../images/template/footer_background.gif) no-repeat left top;} #footer_top{ background:transparent none repeat scroll 0%; color:#FFFFFF; font-size:10px; font-weight:normal; left:1em; position:absolute; text-align:center; top:1.65em; width:547px;} #footer_top ul{ list-style:none; margin:0; padding:0; text-align:left; margin-left:2em;} #footer_top ul li{ border-right:1px solid #6F6F6F; display:inline; font-size:1.1em; font-weight:normal; margin-right:0.5em; padding-right:0.5em; text-align:left;} #footer_top ul li a{ color:#fff; font-weight: normal;} #footer_bottom{ margin:0; padding:0; color:#fff; position:absolute; text-align:right; font-size:10px; font-weight:normal; top:1.65em; right:1em;}#footer_bottom p{ margin:0; padding:0; color:#6d6d6d;} #footer #footer_bottom a{ color:#6d6d6d ;}#footer a{ color:#fff; font-weight:normal;} .dropdown_select{ margin-bottom:1em;}.dropdown_select select{ width:145px; margin:0; padding:0; margin-left:.5em; font-size:9px; border:1px solid #ccc;}

adham23 · November 14, 2011

i meant moving it to the right....

worrall · September 4, 2012

Use a div tag and inside the div tag just write align="left" and in your search bar css code option also you have to put in LEFT margins alignments.Take care of your css code.It will be working in my system.Just do the mentioned changes.Hope so it would work for you.

dsonesuk · September 4, 2012

worrall, please reply to more recent posts, 14 november 2011...come on please!

Sign In

Move The Search Bar To The Left

Recommended Posts

adham23

Link to comment

Share on other sites

adham23

Link to comment

Share on other sites

worrall

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity