Menu
I am new to the world of coding as well as CSS and this is the first page I have ever put together that required me to use negative values. I remember reading somewhere some time ago that it is best to stay away from using negative values. I am unsure why as I can't seem to locate that article any more.
I would appreciate your feedback on the use of negative values in my code below as well. I have avoided using any frameworks or the like so that I can grasp the concept of what CSS coding is all about.
Also I have used an internal stylesheet so that I can quickly amend my code rather than swapping between 2 different files. I would most certainly look at using an external stylesheet when developing a real world page. Secondly this is the first time I have used a reset stylesheet using import.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
@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: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="status">login</div>
</div>
</div>
<div id="separator"></div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="rightcol">
<p>paragraph1</p>
<p>paragraph2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
EDIT - Updated code as per wdm's suggestion
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
@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;
}
#status {
/* background-color: #808080; */
position: relative;
top: -85px;
left: 780px;
width: 100px;
text-align: center;
}
#topnav {
/* background-color: #8B8970; */
float: right;
width: 300px;
margin-top: -70px;
text-align: right;
}
#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: #778899; */
float: left;
width: 600px;
}
#rightcol {
/* background-color: #CDCDB4; */
float: right;
width: 300px;
}
#rightcol p + p {
margin-top: 1em;
}
#footer {
/* background-color: #CDB7B5; */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="innerwrapper">
<div id="header">
<div id="logo">logo</div>
<div id="status">Logged in</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div id="separator"></div>
<div id="content">
<div id="innercontent">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="rightcol">
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
479
Let me consolidate my comments into an answer here.
First: Negative values are perfectly acceptable however I would use them sparingly. They are definitely useful in certain situations
HTML markup should follow the visual flow of your page. I wouldn't use a negative margin in the way you originally intended. One common use is when overlaying elements. Ex: http://jsfiddle.net/wdm954/jwBzv
How would I fix your top menu code? I would wrap #status and your UL within #topnav like this...
<div id="topnav">
<div id="status">Logged in</div>
<ul>
<li>about</li>
<li>browse</li>
<li>join</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
And use something along these lines for the CSS...
#topnav {
float: right;
}
#topnav #status {
text-align: center;
margin-bottom: 15px;
}
#topnav li {
display: inline;
margin-left: 15px;
}
Here is the demo: http://jsfiddle.net/wdm954/RwEWN/3/
Hope this helps!
191
Negative values can be very powerful when used correctly. There is no problem with using negative values.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
