Page Layout

[jdlev]

This may be more of an html question, but here goes.

 

I have an image that functions at the the backdrop to my website.  Basically, the image is 800 pixels wide.  It is then placed into a table that is centered on the page, so the web page should always be in the center of the page, with a background behind it. 

 

Now, on this image, I am trying to figure out how certain parts of the image will act as hyperlinks.  I have tried adding a layer over the top of the image, but the layer is static and won't stay centered with the image, so the hyperlink will shift based on the size of the window that is open because the image is supposed to stay centered.

 

Let's say on the image there is the wording home, just over where it says home on the image, I want to create a hyperlink to take them back to the home page.  Over the part of the image where it says, contact us, I want this area of the image to take them to the contact page.  The page needs to stay centered, and the area for the people to click on to take them to a particular page needs to stay centered as well.  Thanks for any help!

[johnsmith153]

None of your question relates to PHP.

 

However...

 

Look into "HTML image maps" - you can set an area that acts as a hyperlink (e.g. on top of a part of your picture).

 

If the table or other parts of the page move based on screen size / contents etc. you should use divs and not tables. Look into "HTML <div> tag".

 

You can fix tables - but divs are better by far.

[KevinM1]

Why are you:

 

1. Trying to use parts of the background image as hyperlinks?

2. Not slicing your large image if, indeed, it has the buttons/links you want to use?

3. Not using CSS to help with the layout in general?

 

It sounds like this is your first attempt at transferring a layout to an actual web page, so I'll give you more of a hint than I normally would.

 

Layouts developed in an image editing program, like Photoshop, need to be sliced into logical parts.  You can't transfer the image wholesale, set it as the background of the page, then put links over it (well, technically you can, but it's definitely not the way to go).

 

So, you need to cut up your layout, but how do you know where and what to cut?  It depends on the layout itself and how it would fit into HTML.  As you make your layout, you should think about its structure, and how that would translate into code.

 

Also, it's not a good idea to use a table for layout.  Tables are easy to understand, but using them quickly becomes nightmarish.  Using divs with CSS positioning and styling is the preferred way to do it.  Tables are a sign of amateurish design.

 

This link should explain what I mean in detail: http://net.tutsplus.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

[jdlev]

Awesome!  Thanks!!!