Greetings All ~ Yes this is my 1st Post and I chose this Forum bcuz I like the name of your Forum. But seriously I am in a jam and I need help bigtime. __________ I'm trying to establish my online store and the service does not offer assistance w/o serious payment. I want to show you two images. The 1st is the way looks now and the 2nd is what I want it to look like but all you get to do is access their CSS code and moving things around in CSS I have no idea how to do. In this img the Banner is ok but I want it resting on or close to the brown Menu Bar. If not possible, then I'll live with this. However this is my big pain. The Search Form I am trying to get directly on the Menu Bar as indicated in my example. I included the CSS/DIV coding they give you to work with. Is there something in this code that I can change to Nest the Search onto the Brown Menu far right side ? <div class="Block Moveable Panel" id="SearchPageHeader"> <div class="FloatRight ToggleSearchFormLink" style="display:%%GLOBAL_HideAdvancedLink%%"> <a id="toggle_form_link" href="javascript:void(0)" onclick="ToggleSearchForm()" name="toggle_form_link">%%LNG_HideSearchForm%%</a> <a href="javascript:void(0)" onclick="ToggleSearchForm()"><img id="toggle_form_image" src="%%GLOBAL_IMG_PATH%%/ArrowUp.gif" class="PB2" alt="" name="toggle_form_image" /></a> </div> <h2>%%GLOBAL_SearchTitle%%</h2> <div class="BlockContent"> <div style="display:%%GLOBAL_HideAdvancedOptions%%"> <div class="AdvancedSearch"> <form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return CheckAdvancedSearchForm()"> <input type="hidden" name="mode" value="1" /> <h3>%%LNG_AdvancedSearch%%</h3> <div class="FormContainer HorizontalFormContainer PL20"> <dl> <dt>%%LNG_SearchKeyword%%:</dt> <dd><input type="text" class="Field250" name="search_query_adv" id="search_query_adv" value="%%GLOBAL_FormattedSearchQuery%%" /></dd> <dt>%%LNG_BrandName%%:</dt> <dd> <select class="Field250" name="brand" id="brand"> <option value="">%%LNG_NoPreference%%</option> %%GLOBAL_BrandNameOptions%% </select> </dd> <dt>%%LNG_Categories%%:</dt> <dd> <select multiple="multiple" size="20" class="Field250 ISSelectReplacement" name="category[]" id="category"> %%GLOBAL_CategoryOptions%% </select> </dd> <dd class="Clear"><input type="checkbox" class="CheckBox" name="searchsubs" id="searchsubs" value="ON" checked="checked" /> <label for="searchsubs">%%LNG_AutoSearchSubCats%%</label></dd> </dl> <hr class="Clear" /> </div> <h3 class="Clear">%%LNG_SearchByPrice%%</h3> <div class="FormContainer HorizontalFormContainer PL20"> <dl> <dt>%%LNG_PriceRange%%:</dt> <dd> %%LNG_From%% <input type="text" class="Textbox" name="price_from" id="price_from" size="4" style="width: 40px;" value="%%GLOBAL_PriceFrom%%" /> %%LNG_To%% <input type="text" class="Textbox" size="4" name="price_to" id="price_to" style="width: 40px;" value="%%GLOBAL_PriceTo%%" /> </dd> </dl> <hr class="Clear" /> </div> <h3>%%LNG_SearchBySetting%%</h3> <div class="FormContainer HorizontalFormContainer PL20"> <dl> <dt>%%LNG_FeaturedProduct%%:</dt> <dd> <select class="Field250" name="featured" id="featured"> <option value="">%%LNG_NoPreference%%</option> <option value="1">%%LNG_OnlyFeaturedProducts%%</option> <option value="2">%%LNG_OnlyNonFeaturedProducts%%</option> </select> </dd> <dt>%%LNG_FreeShipping%%:</dt> <dd> <select class="Field250" name="shipping" id="shipping"> <option value="">%%LNG_NoPreference%%</option> <option value="1">%%LNG_OnlyFreeShipping%%</option> <option value="2">%%LNG_OnlyPaidShipping%%</option> </select> </dd> </dl> <br class="Clear" /> <p class="Submit"> <input type="submit" value="%%LNG_Search%%" /> </p> </div> </form> </div> </div> </div> <p class="InfoMessage" style="display:%%GLOBAL_HideRelatedSearches%%"> <strong>%%LNG_RelatedSearches%%:</strong> %%SNIPPET_RelatedSearches%% </p> <p class="SearchSuggest" style="display: %%GLOBAL_ShowSearchSuggestion%%"> <strong>%%LNG_DidYouMean%%:</strong> <a href="%%GLOBAL_ShopPath%%/search.php?search_query=%%GLOBAL_SuggestQueryEscaped%%&correction=%%GLOBAL_SearchId%%">%%GLOBAL_SuggestQuery%%</a> </p> %%Panel.SearchJavaScript%% </div> Code (markup): Thank You All Very Much, Weckl-Head
I would abandon that cart system then - the markup is complete rubbish (again with the asshat definition list abuse - what, have these people never heard of a LABEL!?!) compounded by nonesensical heading orders - it is obvious from the markup whoever wrote that online shopping system you are using has no business even writing HTML in the first place.
Thank you for responding however I need a tad more. This is from a company called Big Commerce who offer 15-Day free trial and if you like their thing you can build your store with the Templates they offer. When I ask how can I relocate the Search Field, their answer is > 1. See if you can maybe hire someone to help you out 2. You can hire us to make the changes you need 3. Try finding some reference online that may help You can imagine how that makes me feel. I'm not great at building Sites but I do know my way around html & other apps more than someone who has no experience. I generally start my pages in Dreamweaver, then I tweak them as needed but when it comes to strict movement via CSS only, I have no clue how to do....
normally I don't code with tables, I try to keep everything in my stylesheet to make the code look nicer, but tables are the easiest to understand (especially for beginners). something along the lines of this would work: <table width="800" cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img src="header.jpg" width="600" alt="Header" /> </td> </tr> <tr> <td width="600"> <a href="#">Home</a> <a href="#">Shipping & Returns</a> <a href="#">Disclaimer</a> </td> <td width="200"> <form action="index.php" method="get" id="search"> <label class="search-label">Search</label><input type="text" class="search-box" /> <input type="submit" class="search-button" /> </form> </td> </tr> </tbody> </table> Code (markup): assuming the width of your whole header is 800px & the width of your header image is 600px. that's just simple code I wrote out right now. If you need more help, feel free to PM me and I'd be more than happy to help. Also I added id & class for for CSS because you need to style them with your stylesheet... and if you want to make the nav & search aligned to the top of the cell, use v-align="top" for the links, you can use something like this in your stylesheet: a { color: #fff; text-align: left; padding-right: 30px; } Code (markup):
Very sorry I didn't see your Post until now. I've been training Dragon Dictation all day long and I finally got it to work somewhat impressively for now. Anyway, your Code is confusing to me somewhat because I just don't know where to place the Code at this moment. This is what they give me to work with when it comes to configuring the Layout of the Search Form in association to the Header. <div id="SearchForm"> <form action="%%GLOBAL_ShopPathNormal%%/search.php" method="get" onsubmit="return check_small_search_form()"> <label for="search_query">%%LNG_Search%%</label> <input type="text" name="search_query" id="search_query" class="Textbox" value="%%GLOBAL_OriginalSearchQuery%%" /> <input type="image" src="%%GLOBAL_IMG_PATH%%/%%GLOBAL_SiteColor%%/Search.gif" class="Button" /> </form> <p> <a href="%%GLOBAL_ShopPathNormal%%/search.php?mode=advanced"><strong>%%LNG_AdvancedSearch%%</strong></a> | <a href="%%GLOBAL_ShopPathNormal%%/search.php?action=Tips">%%LNG_SearchTips%%</a> </p> </div> <script type="text/javascript"> var QuickSearchAlignment = 'left'; var QuickSearchWidth = '232px'; lang.EmptySmallSearch = "%%LNG_EmptySmallSearch%%"; </script> Code (markup): You can get a better feel for what I'm talking about if you actually saw the thing which is located at http://hmsales.mybigcommerce.com/index.php I am not trying to promote. This is merely to illustrate why I'm having such a problem adjusting these images to fit nicely on the page. If you check it out, you'll see right away what the deal is .... Thank You