Hi, everyone Im glad im here, Hu I need to know how to make my website work with all computer monitors because Im using a 21" flat screen and when I go on my laptop its to big, so what Im asking is there a code i need to us to make it fit all monitors. thanks
You have several options:
1) You can set your design to have a fixed width say 1000px and centered in the middle of the screen.
The should work on all monitors
2) You can also use a liquid design and set the width of the main container to 100% of screen size but also set the max-width to say 1000px.
The challenge in this second option is to have your content flow in a way that users who access your web site using smartphones can see your web pages properly laid out
Because you are new to web design, I would recommend the first option for now.
2 Directly underneath the <body> tag near the top of the file, add the following line:
<div id="wrapper">
Likewise, directly above the </body> tag near the end of the file, add the following line:
</div>
What you're doing is wrapping the entire contents of the webpage inside a division that you can style in a certain way to appear as similar as possible across different monitors. If your site has a lot of HTML pages, you'll have to do this for each page.
3 Open your website's style sheet to edit. If your site doesn't have a style sheet (it'll be a file with a CSS extension, which stands for Cascading Style Sheets), create a new text document, save it as "style.css," and upload it to your server.
4 Add the following code to the style sheet:
div#wrapper {
margin: 0 auto;
width:750px;
}
This accomplishes two things. "Margin:0 auto;" sets the top and bottom margin of the wrapper to zero and the left and right of the wrapper to "auto," which centers it on the page.
"Width:750px;" meanwhile sets the width of the wrapper to 750 pixels. On large or modern monitors this will look rather skinny, but some older monitors still have a screen resolution of only 800 by 600 pixels. If you're not worried about the (admittedly quite small) percentage of the population that still has an 800-pixel-wide screen resolution, you can probably up the number to 950 or 1,000.
5 Make sure the style sheet is linked to the other pages on your site by including this line anywhere between the <head> and </head> tags of your HTML pages:
Make sure the value after "href" is the accurate file name of your style sheet, and make sure it's in the same directory as your HTML files. When you're done, you'll have a website that remains static with a fixed width no matter what size monitor your site is viewed on.
Reply With Quote
Bookmarks