Per the book (mostly), I have a DarkGrey.css file in use. My web page looks excellent to me, but I would like to move everything over to the right. This would include all headers, footer, content, etc.
I assumed "margin" would be the solution so I tried adding
margin: 160px to #Header and it caused the header to move to the right where I wanted it, but the header also moved down from the top of the page. All other margins I added caused a similar reaction: portions moving down, not just moving right.
What am I missing and is there a simpler way to get everything moved at once?
Code:
*
{
/*
Defines the main font used throughout the entire site
*/
font-family: Verdana, Arial, Sans-Serif font-size: medium;
margin-left: 5px;
font-size: large;
}
body
{
/*
Clears white space around the body and sets the background color to a dark grey.
*/
margin: 0;
background-color: #464646;
}
a
{
/*
Clears the underline on normal links, and gives them #da6637 as the text color.
*/
color: #da6637;
text-decoration: none;
}
a:hover
{
/*
Underlines links when the user hovers the mouse over them.
*/
text-decoration: underline;
}
h1
{
/*
Makes h1 elements smaller than their browser default.
*/
font-size: 20px;
}
#Header
{
/*
Sets the background of the header to the same color as the right-hand side of the
header image. This way, the header can expand to the right.
The margin at the bottom creates some room between the header and the menu and the main content.
*/
background-color: #464646;
margin-bottom: 20px;
}
#Header a
{
/*
The #Header a is nested in the #Header. It provides a link to the homepage,
and sets the header image background.
*/
background-image: url(Images/Header.jpg);
background-repeat: no-repeat;
width: 944px;
height: 138px;
display: block;
}
#MenuWrapper
{
/*
The menu spans the page width, right below the header.
At the top and left a few pixels padding is applied to create some room.
*/
background-image: url('Images/MenuBackground.jpg');
width: 944px;
height: 36px;
padding-top: 7px;
padding-left: 17px;
}
.FirstLevelMenuItems
{
padding-top: 10px;
}
.MainMenu
{
/*
The Menu gets a white border on all four sides.
*/
border: 1px solid white;
width: 830px;
height: 19px;
background-color : #cccccc;
}
.MainMenu ul li
{
/*
Gives the menu items in the main menu a width of 150px each
*/
width: 150px;
}
#MainContent
{
/*
Defines the main content area. The text color is white (on the gray background set on the body).
The #MainContent element has a minimum height of 370 pixels, but can grow if necessary.
The font-size is 80% of its parent element, which in this case comes down to 80% of the font
the user has specified as the default font in the browser.
*/
color: white;
font-size: small;
width: 870px;
min-height: 370px;
padding: 10px;
float: left;
}
#Footer
{
/*
The footer is positioned below all other content.
At the top, it gets a border with a dashed style, while all other sides have no border.
*/
text-align: center;
border-top: 2px dashed gray;
height: 37px;
clear: both;
background-color: #8B3818;
width: 893px;
}
.Introduction
{
font-style: italic;
}
.MyButton
{
color: White;
}
img
{
border: 0;
}
u1.level1
{
font-size: 10px;
font-weight: bold;
height: 19px;
line-height: 19px;
}
u1.level1 .selected
{
/* Defines the appearance of the active menu items */
background-color: #BCD1FE;
color: #CC0000;
font-weight: normal;
}
a.level1
{
/* Adds some white space to the left of the main menu item text */
margin-left: 5px;
}
a.level2
{
/* Defines the appearance of the sub menu items */
background-color: #cccccc;
padding-left: 5px;
}
a.level1:hover, a.level2:hover
{
/* Defines the hover style for the main and sub items */
background-color: #BCD1FE;
}
.ErrorMessage
{
color: Red;
}