Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to go about coding this?

    I came up with a unique design for a client's website. It features an assymetrical grid that contains boxes. Some boxes have pictures, others have text. I would like to know the best way to go about coding this in HTML and CSS. I would like the boxes that contain the letters to have a mouse over change color effect (Most likely will be done with CSS3, unless i have to use JS). Here is a mockup of the idea:



    I know that i need to fix little aligning issues to make the boxes more uniform, but this is just a picture in my head that I have for an idea. Anyway, here is what I think i should do...

    1. Slice each square as an individual item. Using absolute positioning in CSS, align the square appropriately. (I see a nightmare with cross-browser/resolution comparability here.)

    -or-

    2. Have the entire image loaded, and use absolute positioning on the text to have them over the image where i need using a z-index higher than the picture. ( This won't allow me to change the mouse over color transition for the boxes.)

    To be honest, both ideas seem pretty rotten. I am not too experienced at HTML and CSS yet, but I think I can do it if given the direction. I am not asking someone to code this, but just a little advice on what I can do to get this working. I cannot resort to using FLASH.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    The position: absolute way seems to be the best approach in this case. There’s absolutely no issue with cross-browser/resolution compatibility if you know what you’re doing.

    And by the way: no CSS 3 is necessary to do this (besides that not even being official), that would all be possible with good ol’ CSS 1, I suppose.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by ChrisPlantijn View Post
    1. Slice each square as an individual item. Using absolute positioning in CSS, align the square appropriately. (I see a nightmare with cross-browser/resolution comparability here.)
    This is overkill and inefficient since an HTTP request will have to be initiated for each slice (i.e., 13 server requests will be required for four links).

    Quote Originally Posted by ChrisPlantijn View Post
    2. Have the entire image loaded, and use absolute positioning on the text to have them over the image where i need using a z-index higher than the picture. ( This won't allow me to change the mouse over color transition for the boxes.)
    There's no need to specify z-indexes.

    1. Create a bounding element (i.e., ul) with a background image consisting of the whole design minus the text.
    2. Put four li elements inside of the bounding element.
    3. Put one a element with relevant text inside of each of the li elements.
    4. Relatively position the bounding element using position: relative; (for the next step).
    5. Absolutely position the four li elements over the text areas (relative to the bounding element since you specified position: relative; earlier).
    6. Specify text colors, fonts, alignment, removal of list item markers, etc.
    7. Specify that the background colors/images of the four li or a elements should change on hover to obscure the existing background image/colors to create a "change color effect."
    8. After the finished design is complete, test it in a non-Internet Explorer browser with images disabled to ensure that the menu is still accessible. This probably means specifying a width, height, and overflow: auto for every li element as well as making sure the color scheme works when background images are missing. (overflow: auto; is needed to prevent text overlap for large text sizes when a user uses their browser's text-only zoom features.)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much, Arbitrator!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •