Custom HTML advanced formatting: help! Options

[Jethro]

Hi everyone,

I want to ask a few questions regarding advanced HTML formatting - of my home page in this case.

Some background to my problem:

I am using a content manager called "Joomla!" to manage my site.

Here is a link to my site under construction... Smart-Drones.

I so up until this point I have designed exactly how I want the website to look by basically "drawing it" using paint.net. I have all of the graphics on different layers so that I can save them and insert them into the web page as PNGs.

Basically this is how I want my website landing page to look:



The way the Joomla! Content Management System works is by splitting the website into modules which are in specific positions.

Inside each "position" is a space that can be formatted using HTML and my home page is one big HTML module so it's basically a bog standard HTML page.

You can see from the images attached that the landing page requires a large background image (which provides framing for the page). The background image is a PNG and has the Fibonacci patterns as well as a large picture in the center of the page.

I want to overlay more elements, such as images, buttons and text over that background image. I also want to be able to precisely position the HTML elements.

The image below should give an idea of how I need to position the elements:



I have been trying to formulate the page using a WYSIWYG editor called JCE (Joomla Content Editor) but have been having no luck. It just refuses to work and is so fickle to work with!

I tried to insert a div and then add the background image and to position the elements over that image using 'absolute positioning' but the farthest that I have managed to get is what you can see on the home page, a mess: Smart-Drones

The WYSIWYG editor has generated this code:

CODE

<div style="background-image: url('images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px; position: relative;"> <img style="position: absolute;" src="images/logo/Smart-Drone-4-logo.png" alt="Smart-Drone-4-logo" /><span class="h3" style="position: absolute;"><span class="h4" style="color: #ffffff; position: absolute;">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span><span style="color: #ffab00;"><span class="h4"></span> </span> </span>
</div>

Not pretty, so I ask the community...

...How do you normally go about this process? It should be fairly standard procedure but my searches have turned up no practical advice.

Any advice or links to tutorials that may be of help will be greatly appreciated.

Best regards,

Jethro.

[pandy]

HTML

<div style="background-image: url('/smart-drones/images/Backgrounds/Smart-Drone-Golden-Background-With-Drone.png'); background-repeat: no-repeat; background-position: center center; width: 799px; height: 906px;">
<span class="h4" style="color: #ffffff">INTRODUCING THE ALL <span style="color: #ffcc00;">NEW</span></span>
<img src="/smart-drones/images/logo/Smart-Drone-4-logo.png" width="759" height="185" alt="Smart-Drone-4" style="margin-left: 20px">
</div>