Web design how-to very easily overlay graphics

Community Forums/General Help/Web design how-to very easily overlay graphics

Robert Cummings

(Posted 2010) [#1]

Hi,

I've not done web design without flash for just about ever but I want to do the following:

1. make a website which is just one low kb png which represents the background.

2. overlay rollover buttons and text wherever I want.

3. center the whole thing in the middle of the screen in its own container so it behaves well with all browsers/sizes etc.

Is there an easy way to actually just sort of do this? I'm having a hard time finding an easy simple way of doing it. One would imagine that a WYSIWYG editor would exist by now to allow this.

Its just a simple info microsite that has to look great and must not use flash.

chi	(Posted 2010) [#2]

One would imagine that a WYSIWYG editor would exist by now to allow this

Did you check http://www.wysiwygwebbuilder.com/ ? Even though it´s not freeware, you can edit the output and see how it´s done... (also worth to buy!)

cheers, chi

Robert Cummings

(Posted 2010) [#3]

Thanks I will give it a quick try when I am back on the PC :)

Perturbatio

(Posted 2010) [#4]

or for a free wysiwhiskyswig: http://www.w3.org/Amaya/

SLotman

(Posted 2010) [#5]

Just google for CSS DIV MENU and it will show some examples how to do it for sure. There are TONS of it online.

Sauer

(Posted 2010) [#6]

Along with what SLotman said, use CSS Divs. For the largest container, containing the background, set the margin-left and margin-right parameters to "auto" which will center it on the screen.

As for the rollover buttons and text, use more Divs within the main container, using absolute, relative, or fixed positioning. More information on that can be found here.