Grow your CSS skills. Land your dream job.

What is the best way to create this page?

  • # November 18, 2009 at 4:58 pm

    Hello.

    I have just discovered this site and find it a great help!
    Although I have been doing things the wrong way round (fell into the trap of using Dreamweaver with no knowledge of code), I do know the basics now.

    My question is one relating to how I set up a particular style of webpage.

    So to cut a long story short….

    I am newbie & plunged into creating my first website using all AP elements, only to find out that this is not a good way because of the nature of the AP’s.
    After many headaches I decided to do my research a little bit more.

    I still have to create another website that I guess should really be built in flash (as suggested by someone). But as I dont know Flash this is not an option. (please see attached design concept).

    The only elements I really need at this point would be for the "get a quote" & "about", "contact" bubbles to have rollover states that change colour when the mouse goes over them.

    I have been trying to find the best way of doing this without AP elements.

    1) Create a Div container with the main image for the background, then insert a table and try to insert the rollover images that way. But after research, I am finding that I should be steering away from tables and moving towards CSS. Which then led me to Idea no 2.

    2) Create a Div container with the main image for the background, then insert Div’s and adjust the margins (relative positioning?) to move to the Divs in correct places I need the rollovers. But again I read that this method should only be done for tweaking a web page and not structuring a webpage as may cause problems.

    3) Create a Div container with the main image for the background, then insert Div’s in a grid like system (see attached image of my guides where I would place Div’s), But this seems a over complicated way to do it and you end up with divs that have no use & lots of unwanted code.

    OR am I right in thinking this works?

    4) Apply a relative positioned Div, set background image, then place AP div’s inside RP Div that I would use for my rollovers? If I did this would this then avoid the problem of the AP divs moving in different browsers?

    Or have I got this all completely wrong and have to go back to the drawing board again?

    Your thoughts would be appreciated :-)

    Many thanks in advance

    Louisa

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".