sarahw Posted May 31, 2008 Share Posted May 31, 2008 Hi,I'm trying to place an image on a repeated bakground with a search bar on the top right corner. I can't seem to get it right.Here's what I have so far:This is on the forum page, similar to what I'm trying to do:Here's the logo and image background: I have tried in all places, but can't seem to get it right. I can get the image ontop of the repeated background, but it is 1px out on the bottom. Also the search bar will appear under the whole logo, not at the top of the table. Does anybody know what I'm doing wrong? I've spent weeks trying to figure this out, but can't seem to get it right.Here's what I have: <table width="850" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="130" align="center" valign="top" background="http://www.pc-offensive.com/home/images/tile_back.gif" > <table width="850" height="20" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> </td> <td width="120" align="right" valign="middle"><form action="index.php" method="post"> <input class="inputbox" type="text" name="searchword" size="15" value="search..." onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> <input type="hidden" name="option" value="search" /> </form></td> </tr> </table> Here's the site:http://www.pc-offensive.com Link to comment Share on other sites More sharing options...
Ingolme Posted May 31, 2008 Share Posted May 31, 2008 First of all, these tables can really mess things up. (You have nested tables there and everything)Read this and try redesigning your site: Why tables for layout is stupid: problems defined, solutions offeredI'd make it something as simple as this: <div id="header"> <img src="http://www.pc-offensive.com/forum/style_images/7_banner.gif" alt="PCOFFENSIVE" /> <input class="inputbox searchbox" type="text" name="searchword" size="15" value="search..." onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> <input type="hidden" name="option" value="search" /></div> Then I'd add this between the <head> tags of your document (or put the CSS in a stylesheet): <style type="text/css">#header {background-image: url(http://www.pc-offensive.com/home/images/tile_back.gif);}.searchbox {float: right;}</style> Link to comment Share on other sites More sharing options...
sarahw Posted May 31, 2008 Author Share Posted May 31, 2008 Hi,Thanks for the reply :)I understand that tables are not the best way to do things, but the whole thing is done that way and I can't rewrite the whole thing as the site is just about finnished, except for this logo. Maybee in the future I could make it tableless.Thats how I got it now, the logo appears perfect, but the searchbox does not sit on the background top right. Its a similar thing I get when using the tables. Link to comment Share on other sites More sharing options...
sarahw Posted June 2, 2008 Author Share Posted June 2, 2008 Anyone? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 3, 2008 Share Posted June 3, 2008 What code are you using now? Link to comment Share on other sites More sharing options...
sarahw Posted June 8, 2008 Author Share Posted June 8, 2008 Hi,Sorry, I have been in Hospital. What code are you using now?The code in the first post. Link to comment Share on other sites More sharing options...
alexnofue Posted June 9, 2008 Share Posted June 9, 2008 Hi, I don't know if you still need this but either way, hope this works with your table layout: <table width="850" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="130" align="center" valign="top" style="background-image: url(http://www.pc-offensive.com/home/images/tile_back.gif);" > <table width="850" height="20" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top"> </td> <td width="120" align="right" valign="middle"> <form action="index.php" method="post"> <input class="inputbox" type="text" name="searchword" size="15" value="search..." onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" /> <input type="hidden" name="option" value="search" /> </form> </td> </tr> </table> </td> </tr> </table> the only difference here with your code it's the background called with style instead of background property Link to comment Share on other sites More sharing options...
driz Posted June 9, 2008 Share Posted June 9, 2008 Why is this in the forum for discussing W3schools.com?This should be in HTML/CSS forum should it not? x Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.