Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help with coding website to fit resolution!

Discussion in 'Website Design Forum:' started by Elekate, Aug 22, 2009.

  1. Elekate

    Elekate Member

    Hey guys!

    I am having trouble making my website look ok for other people's resolution, the text goes in different directions and the images are smaller for background, leaving white space.

    Any tips please? :confused:
  2. Kevin

    Kevin Senior Member

    Err... always work for sizes of 1024px wide. That's a good start, you can optimize for mobile devices later. About your background images, are you defining their size with em somewhere? If so, try defining the size with pixels to avoid resizing (unless they have to resize of course, but that doesn't seem to be the case here).
  3. Elekate

    Elekate Member

    So if you designing in photoshop, the screen you start with should be 1024px wide?
    How tall tho? :confused:
  4. Aarlev

    Aarlev Member

    Hi Elekate,

    Your window in PS can be any size you want. It depends on how wide you want the site. The height doesn't really matter but of course use a height that'll let you put in the design elements you want to visualize the site layout. I usually design in 1280 x 960, and then make the width of the site 960px if it's a fixed width layout so you avoid horizontal scrollbars if people view the site in 1024x768.

    If you're using an image for background you should repeat it. I.E a gradient can be cut as a 1px wide graphic and repeated on the X axis. This way your background won't disappear if people use higher resolutions and also make the file size smaller.

    As Onartis said you shouldn't be defining the background image with EM. It's better for accessibility to use the EM value on text though as it will allow for people to resize the text. PX will fix the text size.

    Hope that helps!

  5. Elekate

    Elekate Member

    Well I have repeated the background across the screen, but should i just make the one image bigger to fit the height then?

    What about the text, is there code to make it look the same for every resolution?
  6. Harry

    Harry Senior Member

  7. Greg

    Greg Active Member

    You can use CSS to repeat a background image horizontally or vertically, using repeat-x & repeat-y, so if you set a gradient or image you wanted to repeat one way this would be your best bet. Perhaps you could post a link or upload an image of the design, then we can give specific advice about the best route for that :)

    As Soren has said text set in 'ems' in CSS is the best for keeping sizes across browsers, it also makes it scalable if a visitor has a different text size set in their browser view. (Something I need to actually get fixed on DF as some of the CSS has the text set at pixel size)

    And, as others have said, the 960px grid system seems to be the most popular size/route at the moment.
  8. Elekate

    Elekate Member

    Bloomin' Buttercup Designs

    This is the temp address only :p - Real one going through (may take 48 hours)

    Anyway, I just changed the background so, does it fix the problem on other peoples computers?
  9. Kevin

    Kevin Senior Member

    I see why you're having difficulties. So I had a quick go at your site, I hope you don't mind. Don't have enough time to finish it up, and I'm not going to because I think it already gives a pretty good idea of how you should be structuring your code.

    bloom.html (live site)

    For all I care you can copy the code but it would kind of defy the point of learning it ;)
    (and I still did a pretty sloppy job after all)

    Oh, and if you really want the flower to look like in your design, there are some (perhaps not very obvious) solutions for that too. I just didn't have the chance to come to that yet.
  10. Elekate

    Elekate Member

    Ah thankyou! :D

    ill have a look at it in a bit - birthday today so not doing stuff
  11. glenwheeler

    glenwheeler Senior Member

    |_____ Good idea! The master speaks!
  12. Elekate

    Elekate Member

    I dunno how you use that it blew my mind! :confused:
  13. br3n

    br3n Senior Member

    An over elaborate way of avoiding common sense.
  14. CSparkes

    CSparkes Senior Member

    IS it just me or does the grids not evan line up. What a confusing site! Sometimes I think web designers over complicate things!
  15. Harry

    Harry Senior Member

    There's nothing complicated about the 960 grid system. It's one of the most simple grids out there.

Share This Page