|
CSS - Search
I am using a template to make a webpage and it has a search in it. I would like to keep it and have it setup to perform a search on the site only. This the code in the template:
<div id="navBar"> <div id="search"> <form action="#"> <label>search</label> <input name="searchFor" type="text" size="10"> <input name="goButton" type="submit" value="go"> </form> </div> What do I need to do to enable it to search the site where I'm going to put it. Similar TutorialsHi there, sorry to bother y'all, but I've been fighting with this css for hours now and I can't seem to get it quite right. I'm trying to center a search box and button skinned with an image, which I think should be fairly simple, but I'm not very good with css yet and it's being more evil than usual. I will try my best to provide all the pertinent information, and thank you very much in advance for any assistance you might provide. My top bar is as such, at the moment (the current issue being that I can't get the text to not be on the edges with the image border while keeping the text field and the button flush against each other), although I've tried a number of other solutions, this is the closest as of yet that I have gotten. Code: <div class="header"> <div class="leftAlign"><a href="/Controller?pageRequest=home"><img src="/img/spinner.png"></img></a></div> <div class="rightAlign" id="topRight"> <jsp:include page="AccountLinks.jsp"></jsp:include> </div><br /> <form id="searchForm" action="/SearchServlet"> <input type="text" id="searchText"></input><input type="image" src="/img/searchButton.gif" alt="Search" id="searchButton"></input> </form> </div> and the relevant css is Code:
div.header{
width: 1000px;
margin: 0 auto;
min-height: 60px;
display: block;
text-align:center;
}
div.leftAlign{
float: left;
text-align: left;
}
div.rightAlign{
float: right;
text-align: right;
}
#searchForm{
vertical-align: top;
margin: 0;
line-height: 1;
outline:0;
}
#searchText{
background:url(/img/searchText.gif) no-repeat top center;
padding:0px;
margin:0;
display:inline;
border:0;
width:159px;
height: 31px;
}
#searchButton {
background:url(/img/searchButton.gif) no-repeat top center;
padding-top:0px;
margin:0;
display:inline;
border:0;
width:42px;
vertical-align: top;
line-height: 1;
height:31px;
}
Any help that you can provide would be greatly appreciated. Thank you very much. I can't seem to get the search box to centre on my site. Everything else is fine but for some reason the search box isn't. I've tried to create a container for it (that didn't work) I've tried numerous different codes in my css file and still no joy. I could put the css file up here but it's over 1000 lines long. Not advertising my site just need a professional opinion: http://trisearch.co.uk You'll see the problem. Thanks for any help or advice I'm brand new to CSS and I've been trying to customize a template, but it seems whenever I move the Search bar from the top left into the menu bar on the right side it offsets the placement of other items and I cannot for the life of me figure this out. My website is floydsewingmachines dot com (I guess it won't let me post the actual address?) but any suggestions or help would be greatly appreciated. Thanks! Does CSS have any effect on the way search engines crawl your page? Like if I had some description text I wanted to have on my page, but didn't want it to be part of my design. Could I just put it in a div and move it off the screen with CSS? Would that text still be beneficial to search engines? I just copied wordpress's HTML 5 seach box code, but i will have to delete part of them because of the seach box's hint words When I add such words, it will not be displayed correctly. Anybody can help solve this issue. my website here nowrpg.com I cannot seem to get the image to line up next to the text box, no matter what I do the image has a small gap and the bottom of the image is about 3px higher than the search box: CSS Code: Code: #header { border: 1px solid #d6d6d4; width: 940px; padding: 10px; background-repeat:no-repeat; height: 110px; display: block; margin: 0 auto; text-align: left; margin-bottom: 2px}
#header #header-logo { float: left; margin-left: 40px; margin-top: 20px; }
#header #nav { float: right; border: 0px solid #ff0000; }
#header #nav ul { margin: 0; padding: 0; list-style: none; font-size: 11px; }
#header #nav ul li { margin: 0; padding: 0; display: inline; }
#header #nav ul li a { color: #0063be; text-decoration: none; margin-right: 12px; }
#header #nav ul li a:hover { text-decoration: underline; }
#header #nav ul li input { color: #0063b3; border: 1px solid #d6d6d4; font-size: 11px; padding: 2px; margin: 0;}
#header #nav ul li img { margin: 0; padding: 0; margin-top: 4px;}
HTML CODE: Code:
<div id="header">
<img src="images/logo.jpg" id="header-logo" />
<div id="nav">
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Log In</a></li>
<li><input type="text" /></li>
<li><img src="images/icons/go.jpg" /></li>
</ul>
</div>
</div><!-- END HEADER -->
Anyone see what I'm doing wrong or how to fix this? Thanks! Anyone know how to design a search bar like this? If there's a better forum for this question, let me know. HELP!! I am trying to center and right justify my search box in my navi menu. I would like to have it centered to my text links but I don't know where to start... Any help would be appreciated!! The site is at: drumchattr.com/atlantis Thanks! Dave If you click on start and search a new windows opens, you should be able to see Name, In Folder, Size etc. I am looking to style the <td> cells in a table to look like that. i.e. same colours, lines and hover over effects. I dont think it will be impossible, but for the life of me I cant match the colour. Does anyone know what the colour is exactly, or has anyone seen an example of this style elsewhere so I dont have to waste time designing it. Hello, not sure if I'm posting in the correct area, but you guys here have been great help in the past. I'm almost to the point where I'd like to publish my site, make it available to those who might seek my key words, and thought that correct use of css and page crafting was sufficient for the robots to index my site. This seems at this time to be a falce assumption. Do I need to subscribe to the likes of google, Yahoo, etc to be seen, or is it just that my site isn't up to much and maybe a rethink is in order. Any advice on the big SEO would be greatly appreciated, Cheeeers Hi everyone I was thinking about making a navigation which when an element was clicked on it would show (display:block) subsections of that element which would then be the end links. Until a navigation section was clicked on its relavent block would be set to display:none. My question is does / will google and others have a problem with this or would they be able to understand a link which would be like the following: <a href="#" onClick="idofelement.style.display=block"> and then would they be able to follow the regular links which this link creates. Thank you for your help. Hey everyone the Admins here at Developer Shed have been busy! http://www.igrep.com It's a Dev Shed's very own search engine! You can use it to search everything across the entire Developer Shed network. That means all the forums: aspfree, devarticles, devhardware, seochat and of course devshed forums as wells as technical articles and FAQ's. It's basically Google for Dev Shed. You can still use the vbulletin search form here on Dev Shed to give you more advanced options, such as narrowing down the forums to be searched, but the results will be displayed differently than you are used to [if you've ever searched that is ] For all you FireFox 1.0+ users out there, there is a nifty little search toolbar you can install to give you instant access to the igrep search engine. -> Get the igrep Toolbar now! More detailed info can be found in the igrep faq - Please check it out Have two search boxes on the Advanced Search page of my Drupal site. The first is well-behaved and sits up in the right corner. I have replacement images for the submit buttons on the search boxes of both. On the first one, the html generated text is good and gone. On the second one, it's on top of the image. Somehow I'm not addressing the second search button correctly to have the 'text-indent: -9999px;' apply. Here's the misbehaving html in question: Code:
<!--[if IE]><div class="IEroot"><![endif]-->
<div class="container-inline">
<div class="form-item">
<input type="text" maxlength="255" name="keys" id="edit-keys" size="40" value="" class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
</div>
<!--[if IE]></div><![endif]-->
Here's the CSS I'm trying to address it with: Code:
.IEroot .container-inline .form-item input.form-submit {
width: 73px;
text-indent: -9999px;
}
I'd be grateful for any help. I'm trying to get a search table to sit next to a logo, but the table is being placed below the logo. I'm not sure why it's being forced below, especially when there is no width defined. Also, I would like the table converted into div's if possible, and I'm not quite sure how to do that. Can someone take a look at this code and guide/tell me how to get this done? you can view the page at http://66.201.102.201/headertest.hml you should be able to grab the source. The logo is missing, but you can see the red X where the logo should be. I just want the search stuff to be directly to the right of the logo, not below it. Hi guys, We CANNOT get our Google Custom Search box and the search button to align correctly in IE or Chrome. It looks COMPLETELY different in both, and wrong in both. You can see the search box on our site (Search Google for DJDEALS) since we can't post URL's. We can't get the search box height to be any bigger than it is (ideally the box and button are the same height) and we can't get both items to align together. In Chrome the button is below the text box, in IE the button is above it! CODE: #search{margin:auto;right:34px;top:188px;position:absolute} .gsc-completion-container{text-align:left;z-index:5 !important;} input.gsc-input{height:28px} Help? Ok, so I have been reading that it is best to place text as far up in the source code as possible for search engines. That being said, is it feasible to write code that uses DIVS extensively, and by doing so, place a div for the very top of a web page at the bottom of the source code, and a div for body text at the very beginning of the source code? I hope this makes sense... |
|||||||