HTML - Layering Images

Is that possible? Not nesting tables in a table but rather having a table overlap or cover an existing table?

Hey all, I just finished up this semester at college and had an Intro to Web Development class. So, I got the site I made live because it was for my families business.

The site is www.kceonline.com

What I'm having trouble with is getting things to re size and fit right when the window is either shrunk or if viewed on a smaller resolution monitor. If you view the site, I got the Contact image and the small slide show to go under the main content. I then added the bigger picture of our cars and it won't shrink with the content, the same happens on the Links page and with the E-mail form on the Contact Us page.

I was also wondering if anyone had some suggestions on what to do on the Gallery page to make it look more professional on smaller screens because it causes the rows to become smaller. I designed the site on a 19" wide so this problem wasn't really apparent to me at the time and I don't think I can figure it out alone.

I messed with the Z-index for a while before my presentation but couldn't figure it out. Now that I have it live, my Grandma, who owns the company, is wanting to show it to people.

Any help is appreciated lots.

Hi People,

I am trying to take a basic background image.
Split it into 3 chunks (top bar, middle blank 1px high, bottom bar)
The idea was that I would set the middle image to be 1px and make it repeat so that when the user scrolls down the page, the background image scales accordingly. Also so that it would look ok via different browsers.

I cut my image into three, no problem there.
I then thought it would be a simple case of inserting my image and setting the CSS accordingly but I am getting different results in IE and FF (but of course).

Example:
HTML CODE

HTML Code:

<div id="image1"><img src="images/image1.jpg" alt="image description"></div>

CSS CODE

PHP Code:

body {
    margin-top:20px;
 }


#image1 {
    text-align: center;
    padding-top: 540px; 
    padding-bottom: 0;
 } 


When I put this in, the image moves down to the bottom of the page in both IE and FF. Of course FF looks like it place the image in the right place but IE ends up putting lots of white space underneath the image. Any ideas ?

Also, Is there a much simpler way of getting the image to scale according to the person scrolling? I am keep to learn a few different methods as it all helps.

Thank you all

Hello,

Yes on the same computer, I am quite happy with FF, but when I check the same image
on IE, it seems lower quality image even though it is the same image on the same site!!

Hello everyone,

I am currently working on a website that will have a simple gradient border (something like an "outer glow" from Photoshop) along the border of a nested table in the page. The final result will be a simple box with data centered in the middle of the page...

However, my question is more related to programming in general. I have two options:
1. Have a linear gradient (1 px by 5 px) which is rotated in the 4 cardinal directions, and then tiled all around the page. Also there will be corners (5 px by 5 px) on, you guessed it, the corners.

2. Creating tables, for instance:

//"invisible" is a font class with size="1px"

<table class="invisible" cellpadding="0" cellspacing="0" width="710">
<tr height="100">
<td width="1" bgcolor="#000000"></td>
<td width="1" bgcolor="#333333"></td>
<td width="1" bgcolor="#666666"></td>
<td width="1" bgcolor="#999999"></td>
<td width="1" bgcolor="#CCCCCC"></td>
<td width="1" bgcolor="#FFFFFF"></td>
<td width="700" bgcolor="#FFFFFF">
<!-- TemplateBeginEditable name="body" -->

SITE CONTENT HERE

<!-- TemplateEndEditable -->
</td>
<td width="1" bgcolor="#FFFFFF"></td>
<td width="1" bgcolor="#CCCCCC"></td>
<td width="1" bgcolor="#999999"></td>
<td width="1" bgcolor="#666666"></td>
<td width="1" bgcolor="#333333"></td>
<td width="1" bgcolor="#000000"></td>
</tr>
</table>

which recreate the same action as tiling the gradient along the outside edges using the simple HTML colors. Which, from the standpoint of REDUCING actual work done by the server, would be the more effective (not my time, which clearly option 2 takes more of).

I know very little about image compression, and how the whole process works for calling up images from a server. Any explanation is appreciated.

Thanks again,
BlitzKampf