Centering a div

HTML & CSS
1

So I am trying to get the page centered, having problems. Also the border isnt showing up around the nav.

body {
    width: 50%
    font-family: Arial, Verdana, sans-serif;
    margin: 0 auto 0 auto;
}
ul {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav {
    width: 50%;
    border: 2px solid black;

}
h1, h2 {
color: #ee3e80;}
p {
color: #665544;}

<!DOCTYPE html>
<html>
<head>
<title>Introducing CSS</title>
<link href="css/style.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<div class="nav">
    <ul>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
    </ul>
</div>
<h1>Test</h1>
<p>test. test. test. test. test. test. test. test.</p>

</body>
</html>
2

Is this a test to see how many errors you can throw up in the smallest amount of code :slight_smile:

  1. Missing semi colon here:

body {
    width: 50%; /* this semi colon was missing */
    font-family: Arial, Verdana, sans-serif;
  1. There is no id of nav.

#nav {
    width: 50%;
    border: 2px solid black;
}



<div class="nav">

Either change the html to id=“nav” or change the css to .nav.

3)This is invalid.


 <ul>
        <a href="index.html">Home</a>
        <a href="about.html">About</a>
    </ul>

All content in a ul must be inside li pairs.


<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
</ul>

You would then set the list element to display:inline and not the ul.

  1. No need to wrap a div around the nav as the ul is a good wrapper on its own.

<div class="nav">
		<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
		</ul>
</div>

e.g.


<ul class="nav">
		<li><a href="index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
</ul>

  1. As a general rule its best to use a page wrapper to contain your content rather than setting a width to the body element. It’s mainly for historic reasons because older IE browsers don’t like this and some scripts have some trouble with it but it also affects the text zoom in odd ways in IE. For the sake of one div (which I have already saved you on the nav) it makes sense to avoid using the body element and sidestep all the issues.

  2. Did you really want your nav at 50% width of the body which was already at 50% (If you did then no worries but I would have assumed the nav should have been full width)

With the above code in place you are looking at something like this:


<!DOCTYPE html>
<html>
<head>
<title>Introducing CSS</title>
<style>
body {
	font-family: Arial, Verdana, sans-serif;
}
.wrap{
	width: 50%;
	margin: 0 auto;
}
ul.nav {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	border: 2px solid black;
}
.nav li{display:inline;}
h1, h2 {
	color: #ee3e80;
	margin:0 0 1em;
}
p {
	color: #665544;
	margin:0 0 1em;
}
</style>
</head>
<body>
<div class="wrap">
		<ul class="nav">
				<li><a href="index.html">Home</a></li>
				<li><a href="about.html">About</a></li>
		</ul>
		<h1>Test</h1>
		<p>test. test. test. test. test. test. test. test.</p>
</div>
</body>
</html>

Hope that was what you wanted and don’t worry about making mistakes as that is the best way to learn and we all have made the same mistakes at some time :slight_smile: