|
CSS - Html5 Search Box Issue
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 Similar TutorialsWHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE? w w w. jaywayproductions . c o m/portfolio/work_history.html It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated! Hi everyone, For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine. So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html but I don't see what he did to solve it. Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating . I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions. Thanks in advance if you can give a DIV newbie a heads up. Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>
Hello I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this. Second: In Firefox it looks like a disaster! Help! http://www.tombraiders.net/katie/shelly/index.html User: letme Pass: in Thank you! Hello Guys, I am trying to get the the css to work but having a hard time with it and need some help.. Here is the content lined up in fire fox. http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png Ad this is what it looks like in IE (See my issue) http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png Here is the code Code: echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'"> Read more</a></span>>>></div>'; Here is the CSS Code: .listing {
width:560px;
height:auto !important;
margin: 0 auto;
text-align: left
}
.listlink {
float:left;
margin-left: 10px;
margin-top: 20px;
position: absolute;
text-decoration:underline;
}
.listbody {
float: left;
margin-left: 110px;
margin-top: -30px;
width:440px
}
.listingdiv{
border-bottom: 2px dotted #9EABB5;
color:#FFF;
}
Please advise how to fix this.. Thanks for your help in advance.. Dan I'm having trouble pinning down an issue with just one part of a page. I can't seem to figure out if the issue is a css issue or an HTML issue. I have a tab that is under a picture that has a floating height and fixed width. Under the picture when the page first loads a div element that is supposed to be a css tab seems to float over it until I reload the page. When the page is reloaded the tab moves back to its static position. This only happens in IE7 by the way. 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. 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 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'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! Hi 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. 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 Anyone know how to design a search bar like this? If there's a better forum for this question, let me know. 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. 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! 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 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. 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... 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? |
|||||||