Need some help making my background into a website! [Archive]

View Full Version : Need some help making my background into a website!

Buckster_uk

03-16-2007, 11:31 PM

Hi,

I have designed a background that I would like to use for a fairly simple website, but am having trouble in figuring out how to go about doing it :(

The background is an 800*600 image and I basically want to be able to click the links on the left to open some target html pages within the box.

I have thought about setting the image as a background and using some kind of iframe but I am not totally on the ball with iframes.

Can anyone suggest some simple ways to set this out?

Any help will be really cool, thanks everyone!

I have uploaded the image to the following link:-

http://img217.imageshack.us/img217/9554/websitebackgroundvj6.png

ess

03-17-2007, 01:13 AM

There are many ways to do this

1- use javascript to change the contents of the iframe via change the src
2- use normal links to change the contents of an iframe by specifying targets etc

the following is an example of using the second method

<html>
<head>
<title>iframes</title>
</head>
<body>
<a href="http://google.com" target="myframe">google</a><br/>
<a href="http://msn.com" target="myframe">msn</a><br/><br/>
<iframe name="myframe" src="http://yahoo.com" height="500px" width="800px">

</iframe>
</body>
</html>

Cheers,
Ess

mlseim

03-17-2007, 05:09 AM

Buckster ...

I can't explain it in words, so I made a really "simplistic" example:

http://catpin.com/buckster/

Notice that the background in my case is a .jpg image and the
links (buttons) are all .gif images placed over the background.

View the HTML source to see the HTML and CSS definitions.

I made the .png background a .jpg because IE doesn't do
very good with .png background images.

My example basically shows you how you make the background
as a plain canvas and place your links, text, and other images
over the top using CSS for positioning of sections.

Don't use <tables> and don't use <frames>.

You can use <iframes> though ... as the example will
show, once I get it working. Well ... you get the idea.
The <iframe> page needs to be resized and you can
get rid of the border around the <iframe>.

You can elaborate the links with CSS mouse-overs to change the
look of the links ... and pretty much do everything else you want.

But hopefully, you'll get an idea of where to start, and what the basic
layout of the web page should consist of.

Troy297

03-17-2007, 06:15 AM

Um.... I didn't bother reading through all the posts above but a suggestion would be to use ajax to load the content...

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Gives a really cool effect!

Buckster_uk

03-18-2007, 12:21 AM

Thanks for the responses.

I was thinking of using tables as I know that they work well in different screen resolutions.

I tried to have a look at your link but it did not show too well in my resolution.

Thanks very much for the advice though I will take it on board.