Hi, I'm trying to make a website, but can't quite figure our some of the CSS needed to align my text correctly. I would like to have the three links aligned directly underneath my name one at the end, one in the middle and one at the other end.
Here is my HTML followed by my CSS:
<!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=iso-8859-1" />
<title>Nick Friederich</title>
<link rel="stylesheet" type="text/css" href="./CSS/main.css" />
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="header">
</div>
<div id="main" class="main">
<h1>Nick Friederich</h1>
<span class="sectionLinks"><a>About</a></span>
<span class="sectionLinks"><a>Resume</a></span>
<span class="sectionLinks"><a>Portfolio</a></span>
</div>
</div>
</body>
</html>
CSS:
body {
font-family:Helvetica, Times, Sans-Serif;
color: #666;
background-color: #eee;
}
h1{
font-size:75px;
}
.sectionLinks{
margin-right:20px;
margin-left: 20px;
margin-top: -20%;
}
.main{
position: absolute;
width: 50%;
left: 50%;
margin-left: -20%;
height: 40%;
top: 50%;
margin-top: -20%;
margin-bottom: -50%;
}
.wrapper{
margin:0 auto;
text-align:center;
}