Grow your CSS skills. Land your dream job.

How do i make this elastique or liquid?

  • # February 18, 2010 at 10:12 am

    hello guys

    i made a design for a website wich will be filled with pictures of plants …

    this is how it should look
    [img]http://www.freeimagehosting.net/uploads/0b5ae3ea99.jpg[/img]

    now the thing that is keeping me busy, is how do i make this work
    for every resolution, starting from 800*600 ….

    i want all visitors to see the bottom of the grass …
    and depending on theyr resolution, they will see less or much sky …
    also i want them to always see the plant in the midlle of theyr screen.

    the top navigation is flash, with a transparent background …
    i always want that part at the top …

    and then the 6 gray boxes, are the thumbs of the plant-pics.
    the plant itself is a png image, so the plant will change when the thumbs are clicked.

    so the problem is, when people are on 800*600, the nav, thumbs and plant will not fit on the screen. so is it possible to make those 3 scale themself when the screen resolution is not high enough?
    also i need some help on the css on this … ive been struggling whole day, but cant find how to make this up …

    any help, or push is the right direction is very appreciated, also a tutorial or a template wich looks like this, is very welcome

    so much thanks in advance
    grtz
    Arnerd

    # February 18, 2010 at 12:35 pm

    Your image would not open for me.

    That being said, about 10% of users have 800×600 nowadays, the smallest size is usually 1024×768. If you design for a width of 960 you will be fine, especially as even though some users may have superwide screens there is no saying that they actually resize their browser window to fit the entire width of the screen, they often leave it small and have another app open beside it. Also most modern browser have the zoom effect.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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