HTML Forum

**redline5th** · 12-24-2008, 01:31 AM

Hello,

First off Merry Christmas!

A friend and I are starting a wedding photography/videography business. I volunteered to help out with the website, since I have experience with it.

Here is what we have right now:
http://apics.tn.org/test/site.html

The site was designed in photoshop by a friend and I used the slice tool to take it apart and make the center part stretch by using a strip of the center part as a table background so it just repeats.

Well he wants to add a ring to the footer...

So on canvas it looks like this:

Keep in mind right now I am using a background for the whole site that repeats through the X axis that fades to the color behind the ring.

How do I slice this thing so that when I add content the ring sticks to the footer and stays in place? I have to slice the ring into two parts...how do I make the left hand side of the ring stay with the right. In my experience is the right hand side, once I add content, stretches further and the left hand side stays put.

Anytime you slice further outside of your body of text, photoshop makes tables for everything vertically, and it screws up when you go to add content. Plus I need to utilize my background.

Any help would be greatly appreciated! Thanks!

- Chris

**nixwebo** · 12-24-2008, 11:16 AM

I think you are trying to make this harder than it is. Just get rid of you repeating image, make the slices, build the code and your done. Unless I am missing some thing? It just seems like you are trying to hold on to the repeating business for no reason.

**redline5th** · 12-24-2008, 11:41 AM

Without repeating images, then how will I make it stretch with content?

My main focus is how to make the ring stick to the footer?

**specialk** · 12-24-2008, 11:46 AM

You could just make a small section on the right side that repeats, there is no need for it to go all the way across. Make a square slice on the right, that is repeating and it will stretch if it needs to. Just an idea, somebody else may have a better one?

**redline5th** · 12-24-2008, 12:36 PM

body {
background-color: #692e02;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
background-position: center top;
}

That's the code for the background to the whole site. The background fades from the color behind the peoples head, to the color behind the ring.

The navigation part has a strip of just the navigation part repeating as a background on just the table. So as I add more content it just adds to the Y axis of the table instead of actually being a whole new image.

All of this is cool, up until he wanted to throw in the ring...which has to be sliced differently. I sliced it like I thought it should be done, and as I add content the ring stays up high as the other section heads downward like this:

What can I do to fix this issue?

I'm not worried about the background, or the navigation...my idea seems to work fine, but this ring needs stay with the footer. How do I do this.

Thank you all for being so patient with me, I really appreciate it. You've all been repped accordingly, and I hope you all have a Merry Christmas!!!

Thanks again!

**computerboy0** · 09:32 PM

I visited your test site. There isn't a ring. Without the ring, I can't really help as much.

What I would try:
Slice it into 3 sections:
The logo, The Header, and the footer with the rings.
Then put the logo in a div, the header in an other div, the content in a third, then your footer in the last.
CSS them so:
#logo,#header,#content,#footer{
width:750;
margin-left:auto;
margin-right:auto;
}

This will create what is known in the internet marketing world as a "Squeeze Page," though that's what it looks like you want...

Here, since I've nothing to do, I'll make an example page for you:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Site Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
        background-color: #692e02;
        background-image: url(images/bg.gif);
        background-repeat: repeat-x;
        background-position: center top;
}
#content{
        padding: 0px 15px 0pt 15px;
        background-image:url(images/navbg.gif); 
}
#content br{
        line-height: 5px;
}
.layout{
        width: 750px;
        margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<!--Put the divs for images in a class called layout for later CSS reference-->
<div class="layout"><img id="logoImg" src="http://www.webmaster-talk.com/images/logohead.jpg" width="750" height="121" alt="" name="logoImg"></div>
<div class="layout"><img id="headerImg" src="http://www.webmaster-talk.com/images/header.jpg" width="750" height="276" alt="" name="headerImg"></div>
<div id="content">
<p><br>
Your Content Here.</p>
</div>
<div class="layout"><img id="footerImg" src="http://www.webmaster-talk.com/images/footer.jpg" width="750" height="71" alt="" name="footerImg"></div>
</body>
</html>

Assuming I got everything right, that should work.
The rings would stick out on the left side, so make the footer stick out by the same amount on the other side, and it will stay centered, and look good!

I used mostly your CSS and HTML, but I converted your tables to Divs, because Divs are more extensible in my opinion. (and because it will allow you to put the rings)

The page passes W3C Validation, and should work on your website unless I made a typo!

Well Merry Christmas, and Good Luck!

**serandfae** · 12-26-2008, 11:38 AM

The other consideration to make here is, don't rely on PS/ImageReady's garbage code to output a page. LnR posted a link recently on how to do it tableless and standards-compliant:

http://www.csslicingguide.com/

You'll also want to make your tabs with a background image and real text over it, for accessibility reasons.

tim

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!