How to Fill in Web Page Margins
The majority of websites online today share one specific design aspect. They are a set width, and they are centered. The content contained therein is viewed in the center of your monitor with margins on either side. Due to varying monitor sizes, particularly wide-screen monitors, the margins can cause problems if you are unsure of how to fill them. You may end up pushing your content in one direction or another, having a background with seams or causing the entire page not to work. However, in reality, filling in the margins of a web page with solid color that will stretch the width of any monitor is quite simple if you know the procedure.
Other People Are Reading
Instructions
-
-
1
Open your FTP client software and locate your stylesheet for your web pages. It should be in the main folder for your site, usually public_html. Right-click your stylesheet and select "Open with..." from the pop-up menu. Select Notepad from the list of applications. Once the document is open, continue to Step 5. If you do not have a stylesheet, continue to Step 2.
-
2
Open Notepad by clicking "Start" in the lower-left corner of your screen (Vista users will click the Vista icon). Select "All Programs" ' "Accessories" ' "Notepad."
-
-
3
Type the following code in the new document:
@charset "utf-8";
/* CSS Document */
body {
}
You will also need to add the following code to each web page on your site. The code needs to go before the </head> tag.
Code: <link href="stylesheet.css" rel="stylesheet" type="text/css" />
This can be done by opening the document in Notepad, cutting and pasting the code into it and saving it to your FTP account. -
4
Save this document to your desktop by clicking "File" ' "Save." Click "Desktop" on the left-hand side of the Save menu, title the document stylesheet.css and click "Save" at the bottom of the Save window.
-
5
Locate your "body" style in your stylesheet (if you just created one, it will be the only style present). If you have trouble, see Step 3 for what a body style should look like. It may have more attributes between the { and the } but it will be labeled body {.
-
6
Add the following attribute on its own line between the { and the }: background-color:.
-
7
Visit the link in References labeled "ColorPicker Online." This will be used to choose a color to use as your background.
-
8
Slide the arrows on the bar on the right side of the ColorPicker to your desired color range. Use the ColorPicker box to select your desired color for use on your background. Make sure it is something that will match the rest of your site.
-
9
Highlight the hexadecimal code above the ColorPicker box and copy it by right-clicking the highlighted area and selecting "Copy" from the pop-up window. See the image here for reference on the hexadecimal code. It is circled in red.
-
10
Paste the hexadecimal code into your stylesheet following the colon after background color. It should look like the image here (again, yours may have additional attributes).
-
11
Save your document by pressing "Control + S."
-
12
Upload the document to its original place on your FTP account (this process will vary, depending on what FTP client software you are using). If this is a new document, save it in the main public access folder for your FTP account. Again, this may vary, depending on your hosting provider or server, but is generally public_html. If asked about overwriting the existing document, select "Yes" or "Continue."
-
1
Tips & Warnings
If you do not have FTP client software, you can get a free FTP client from FileZilla by visiting the link in Resources labeled "FileZilla." Instructions for use and other documentation can be found at the link labeled "FileZilla Documentation" in Resources.
Never modify other portions of your stylesheet if you are unsure of what you are doing.
