Custom HTML advanced formatting: help!

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:

Due to the fact that I can not share any images please refer here: http://forum.joomla.org/viewtopic.php?f=706&t=858845

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: refer here -http://forum.joomla.org/viewtopic.php?f=706&t=858845

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:

The WYSIWYG editor has generated this code:

[code]

Smart-Drone-4-logoINTRODUCING THE ALL NEW

[/code]

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.

Hi Jethro. Welcome to the forums.

Unfortunately, your first link shows a 403 “Forbidden” error, and we can’t see the images in your second link without being a member of that forum.

Ohh sorry! Here is my website, if it still gives a 403 then maybe try a diffent browser? http://www.metalbot.org/smart-drones/

To view the images try this thread… http://forums.htmlhelp.com/index.php?showtopic=20755

Thanks,

Jethro.

Not sure why that would help, but I’ve now tried five browsers and I’m getting a 403 in them all. Perhaps somebody else can access it?

I can, however, access the image.