Help with coding website to fit resolution!

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:
 
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).
 
Onartis said:
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).

So if you designing in photoshop, the screen you start with should be 1024px wide?
How tall tho? :confused:
 
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!

Thanks,
Soren
 
Aarlev said:
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.

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?
:confused:
 
Elekate said:
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?
:confused:

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.
 
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.
 
Onartis said:
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.

Ah thankyou! :D

ill have a look at it in a bit - birthday today so not doing stuff
 
br3n said:
An over elaborate way of avoiding common sense.
IS it just me or does the grids not evan line up. What a confusing site! Sometimes I think web designers over complicate things!
 
There's nothing complicated about the 960 grid system. It's one of the most simple grids out there.
 
Back
Top