/    Sign up×
Community /Pin to ProfileBookmark

Use CSS to fit all resolutions with my website?

Copy linkTweet thisAlerts:
Jan 17.2006

I noticed I was having problems trying to get my site to fit well with every resolution. I made it with macromedia dreamweaver 8 with resolution 1280×1024 (big mistake). If I put my resolution in 800×600 (which is the lowest it can go) the site is not intact anymore. Everything is separated, the text is way off, but the background image of course is still in the right place. I read through searching in the forums and found that some one said, for a website to fit most users resolution, whatever they are using, use CSS. What is that and how do I do this?

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@NNNSJan 17.2006 — I'm afraid your post is a bit too vague..

When I design a site with a fixed width I tend to use a css 'wrap' div and set the width to anything between 700 - 760px. Everything else is contained within that master div - hope that helps
Copy linkTweet thisAlerts:
@ddrultramixauthorJan 17.2006 — Too vague, my bad. To put it in a nutshell. I just want my website to fit any resolution (or at least the best it can). Where do I start and how do I finish?
Copy linkTweet thisAlerts:
@Markbad311Jan 17.2006 — well where is the website can we have a link at it?
Copy linkTweet thisAlerts:
@NNNSJan 18.2006 — To elaborate on my previous post...

If you require a fixed rather than a 'fluid' design you're best working with an 800x600 resolution target. This would mean that people viewing at 800x600 or higher wouldn't get horizontal scrolling (anybody using a lower res than that - frankly sod em!)

In the body of your html -

Create a wrap or container div like this - don't forget to close the tag at the bottom of your page just before </body>
[CODE]<div id="wrap">[/CODE]
Then create a style for the "wrap" container (ideally in an external style sheet but in the 'head' section of your page if you like)

something like this..
[CODE]#wrap {
position: relative;
padding: 0px;
width: 750px;
margin: 0 auto;
top: 0px;
text-align: left;
} [/CODE]
This will style the div to be 750px wide (obviously) and will centre the page horizontaly whatever the resolution. You then need to fill this div with all your page content. From what you said in your initial post I've a feeling this is only the tip of the iceberg - get a decent CSS book ?
Copy linkTweet thisAlerts:
@pcthugJan 18.2006 — Design to fit the minimums, which in this case is 800x600 res. However recently it has been discovered there are alot more people using 1024x768+ res, which has prompted many more websites even large corporate websites to use a design to fit computers runnin in 1024x768.
Copy linkTweet thisAlerts:
@ShrineDesignsJan 18.2006 — when i design layout for 800x600, i use a width of 760 or smaller, and for 1024x768 i use a width of 1000 or smaller

NNNS, the positioning is not necessary#wrap {
width: 760px;
margin: auto;
}
Copy linkTweet thisAlerts:
@requiembmxJan 18.2006 — write all your plain text and html so you have it only scrolling up and down with no tables, or other tags. just <p> takes and the header tags <h1, h2> then put that stuff in divs, make a nav with an unodered list and you should be good. only use neccesary images.
Copy linkTweet thisAlerts:
@felgallJan 18.2006 — Of course you don't need to change your screen resolution to check how your page looks at different resolutions. You just need to resize your browser window. You should be able to see what your site looks like at a resolution of 100x50 quite easily that way and possibly even smaller.
Copy linkTweet thisAlerts:
@requiembmxJan 19.2006 — in firefox get the web developer toolbar and set the resize to normal screen res.'. i have mine at 1024x758 + 800x600 + 640x480 its a nice tool
Copy linkTweet thisAlerts:
@pcthugJan 19.2006 — in firefox get the web developer toolbar and set the resize to normal screen res.'. i have mine at 1024x758 + 800x600 + 640x480 its a nice tool[/QUOTE]

One of the best ext. for FF, check it out [URL]https://addons.mozilla.org/extensions/moreinfo.php?id=60[/URL]
×

Success!

Help @ddrultramix spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...