CSS with negative values

I am new to the world of coding as well as CSS. This is my first attempt to put together a page that required a negative value. I am aware that it is recommended that paddings do not use negative values and it is acceptable for margins to use negative values however am unsure if my use of negative values is acceptable.

Notes

• I am using an internal stylesheet so that I can easily and quickly change values rather than switching between files.

• This is the first time I used a reset stylesheet by using import

I appreciate any constructive criticisms as well as what I can do better with my coding.

`








Sample







@import url('http://meyerweb.com/eric/tools/css/reset/reset.css');

body {

font-family: Georgia;
font-size: 1em;

}

#wrapper {

/ background-color: #FAEBD7; /
width: 960px;
margin: 0px auto;

}

#innerwrapper {

/ background-color: #CDC0B0; /
overflow: auto;

}

#header {

/ background-color: #8B8378; /

}

#logo {

background-color: #000000;
float: left;
width: 100px;
height: 70px;
color: #ffffff;
text-align: center;
padding-top: 30px;

}

#topnav {

/ background-color: #8B8970; /
float: right;
margin-top: 50px;
width: 300px;
text-align: right;

}

#status {

/ background-color: #808080; /
width: 100px;
position: relative;
top: -80px;
left: 800px;
text-align: center;
}

#topnav ul {

word-spacing: 5px;

}

#topnav ul li {

display: inline;

}

#separator {

border-bottom: 1px dashed gray;
margin-top: 20px;

}

#content {

/ background-color: #68838B; /
overflow: hidden;
margin-top: 60px;

}

#innercontent {

/* background-color: #77889

Your use of negative values in this example is perfectly acceptable; you're locating a relative positioned element.

You could improve the structure of the page with the addition of headers (e.g. change logo to logo; use ` rather than ; etc.). Build the page without any style to start with, then start designing it.

Importing the reset CSS is okay, but there's no reason not to copy it locally as well.

And I know this just a mock-up page, but don't forget to flesh out font-family. If you like Georgia, I'd go for font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;` (which comes from Aaron Boodman's 8 Definitive Web Font Stacks article).

All up, I'd say you're absolutely on the right track!

StackExchange Code Review Q#2633, answer score: 8