41 users online (0 members and 41 guests)  


  Results 1 to 6 of 6

Related

  1. Bkgd image in table cells?    Forum: Myspace Forum
    Replies: 1
  2. Creating Hyperlinks in Table Cells    Forum: HTML Forum
    Replies: 2
  3. Padding individual table cells?    Forum: CSS Forum
    Replies: 1
  4. Table cells    Forum: HTML Forum
    Replies: 1
  1. #1
    exchange11's Avatar
    New User

    Status
    Offline
    Join Date
    May 2007
    Posts
    3

    Image over two table cells

    Hello,

    I am editing the code of a standard package I have purchased to run my site. It has header and footer files that are the same on each page on the site. It can be seen at: http://www.greyhoundexchange.com/
    I want to display an image that 'pops out' over the top of the body section, into the header (the dog image). I have created a separate header file for the index page, so that part of the body section is included. I now have a table containing on the left hand side: a table for the navigation bar, a table for the search/browse, and a table for the welcome text. My image is in the right hand side of the table, with the background edited to simulate the popup effect I am after. My problem is lining up the image with the green line (table border) on the left. It behaves differently in IE and Firefox. Should I be perservering with this, or is there an easier way to get the effect I want?

    Thanks in advance for any assistance

  2. #2
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: Image over two table cells

    You'd be far better off either going table-less or else making this a single table with 3 columns. You can use rowspan and colspan attributes to govern the amount of horizontal or vertical space each element of your page occupies.

    Also, don't specify ANY width in terms of pixels. Do them all in percentages. That way, your page will still look good in different browser resolutions. I'm talking in particular about this line, which occurs just below the <body> tag:

    Code:
    <table width=1200 cellpadding="0" cellspacing="0" border="0" align="center" class="container" >
    BTW, the width attribute in that statement is redundant, since you have that specified in your CSS. That width attribute is also causing horizontal scrolling in both IE and FF - which is very bad.

    If you'd like a specific example of what I'm talking about, I could work up an example of part of the page (or someone else could beat me to it, that's ok).
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  3. #3
    exchange11's Avatar
    New User

    Status
    Offline
    Join Date
    May 2007
    Posts
    3

    Re: Image over two table cells

    Thanks for your reply.

    I'd love to know how it would work table-less.

    I know what you mean about the pixels, but my navigation bar doesn't fit with the image (the words bunch up) when I use percentages and view it with low resolution.

    I would love to see an example of what you mean. Why three columns in a single table?

    What I really would like to keep is the way the index page header matches those of the other pages so that the nav bar doesn't jump around when switching pages. I thought there might have been a way of just slapping the dog image with a transparent background straight across two table cells.

    Thanks again.

  4. #4
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: Image over two table cells

    Well, after playing around with this for a while, I found it was easier (for me anyway) to do this table-less than with tables. Below is a partial page for you. I made one image that you don't have, which I've attached to my post:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir=ltr>
    <head>
    	  <title>Greyhound Exchange </title>
    	  <style type="text/css">
    	  <!--
    	  body {
    	  	   margin: 0;
    	  	   padding: 0;
    	  	   color: black;
    	  	   font-family: arial, serif;
    	  }
    	  #main {
    			position: relative;
    			top: 0px;
    			left: 0px;
    			width: auto;
    			height: 117px;
    			background-image: url(logo.gif);
    		   	background-color:#1e494c;
    			background-repeat: no-repeat;
    			background-position: left top;
    	  }
    	  .line2 {
    			width: auto;
    	  		height: auto;
    	  }
    	  .line2a1 {
    	  		height: 35px;
    			background-image: url(nav_bg.jpg);
    			margin-right: 389px;
    			border-top: 1px solid white;
    			padding-left: 20px;
        		padding-top: 7px;
    			font-size: small;
    	  }
    	  .line2a2 {
    	  		margin-right: 389px;
    			padding-left: 20px;
    			font-size: small;
    	  }
    	  .line2b	{
          		background-image: url(dog.jpg);
    			float: right;
        		height: 285px;
    			width: 389px;
    			border-top: 1px solid white;
    	  }
    	  .imgSep	{ 
    		background: transparent url(img/transparent.gif) no-repeat; 
    		margin: 4px; 
    		padding: 0px; 
    		display: inline; 
    		height: 8px; 
    		width: 8px; 
    	  </style>
    	  
    </head>
    <body>
      <div id="main" ></div>
      <div class="line2">
      	   <div class="line2b"></div>
      	   <div class="line2a1">
    	   		<a href="http://www.greyhoundexchange.com/index.php?">Home</a>
    	   		<img src="http://www.greyhoundexchange.com/images/transparent.gif" width="10" height="10">
           		<a href="http://www.greyhoundexchange.com/select_category.php?"> Sell an item</a>
    	  		<img src="http://www.greyhoundexchange.com/images/transparent.gif" width="10" height="10">
           		<a href="http://www.greyhoundexchange.com/register.php?">Register now</a>
    	   		<img src="http://www.greyhoundexchange.com/images/transparent.gif" width="10" height="10">
           		<a href="http://www.greyhoundexchange.com/user_login.php?">Login</a>
    	   </div>
    	   <div class="line2a2">
    	   		<form name="search" action="http://www.greyhoundexchange.com/search.php" method="GET">
    			Search                 <input type="text" name="q" size=15 value="" />
    	   </div>
      </div>
    </body>
    </html>
    Attached Images Attached Images
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  5. #5
    exchange11's Avatar
    New User

    Status
    Offline
    Join Date
    May 2007
    Posts
    3

    Thumbs up Re: Image over two table cells

    Thanks so much for your help. It's looking good, but I still have more work to do on it.

    I'm just so glad there are people like you out there willing to help, sharing knowledge is good karma!

  6. #6
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: Image over two table cells

    I'm glad we were able to help. If you need any more help with this or anything else, feel free to ask.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more



Tags for this Thread