Jump to content

logo placement


sarahw
 Share

Recommended Posts

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:001.jpgThis is on the forum page, similar to what I'm trying to do:002.jpgHere's the logo and image background:7_banner.gif

tile_back.gif

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

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

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.003.jpgThats 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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...