Results 1 to 3 of 3

Thread: psd to html/css test problem

  1. #1
    Join Date
    Apr 2013

    psd to html/css test problem

    i make my own psd design to train on,
    i always get problem in the differents in resolution [ 1280 x 1024 and higher]
    my screen is 1280 x 1024 when i use position relative it not work in higher resolution
    the same is padding margin ,

    this is my psd design:


    i really dont know how to make the background is really hard;
    my background is this:

    background-color: #d02c2c;
    height: 167px;
    width: 1280px;

    background-color: #f18484;
    height: 472px;
    width: 100%;

    background-color: #f2ea62;
    height: 274px;
    width: 1280px;

    background-color: #1be6d6;
    height: 110px;
    width: 1280px;

    how i make this backgrounds to all resolutions?

  2. #2
    Join Date
    Mar 2012
    The width is easy: use "width:100%".

    The height is more difficult because it is split into bands. The easiest answer is, again, to use percentages. However, that is often not optimal. A better answer is to use "position: absolute", but that is more complex.

  3. #3
    Join Date
    Aug 2013
    Like jedaisoul sad, use position: relative; in the main tag with width:100% and the inside tags use position: absolute; . The position is set of the elementes top: , left, right or bottom relative with the parents tag tag you set the position relative, like this:

    background-color: #d02c2c;
    height: 167px;
    width: 1280px;
    position: relative;

    position: absolute;
    top: 0px;
    right 0px;

    I always use this stles positions, like this my web site, look my source code: http://sitesamil.com.br/
    See that my menu bar are always in the right and left of the screen for any kind of resolution.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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