My coding is pretty simple so far. My contact link on the far right seems to rise up and its causing an extra area above my other links that is acting as a link area. I checked my css and everything looks good, but I'm pretty new so it could be something very simple. Here is the code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Derek Edwards Portfolio</title>
<link href="Web Porfolio.css" rel="stylesheet" type="text/css" />
</head>
<body class="mainbody">
<nav>
<p>
<ul class="navbar">
<li class="listitem"><a href="#"/>Contact</li>
<li class="listitem"><a href="#"/>Portfolio</li>
<li class="listitem"><a href="#"/>About</li>
<li class="listitem"><a href="#"/>Home</li>
</ul>
</p>
</nav>
</body>
</html>
My css is pretty simple as well:
@charset "utf-8";
.mainbody {
margin:0px;
padding:0px;
background-image:url(../../Desktop/Portfolio/Background.jpg);
background-size:100%;
background-attachment:fixed;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
opacity: 0.4;
}
.listitem {
float: right;
border-left: 1px solid #bbb;
list-style-type: none;
}
.listitem a {
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
display: block;
color: white;
text-align: center;
padding: 10px 5px;
text-decoration: none;
}
.listitem a:hover {
background-color: #111;
}
Aucun commentaire:
Enregistrer un commentaire