Help with coding website to fit resolution!
- Thread starter Elekate
- Start date
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).
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!
Thanks,
Soren
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
Harry
Senior Member
Use the 960 Grid System.
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?
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.
Elekate
Member
Bloomin' Buttercup Designs
This is the temp address only - Real one going through (may take 48 hours)
Anyway, I just changed the background so, does it fix the problem on other peoples computers?
This is the temp address only
- Real one going through (may take 48 hours)Anyway, I just changed the background so, does it fix the problem on other peoples computers?
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.
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.
Elekate
Member
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!
ill have a look at it in a bit - birthday today so not doing stuff
glenwheeler
Senior Member
Harry said:
^
|
|_____ Good idea! The master speaks!
