home.html
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Joren's site! Home</title>
</head>
<body>
<div id="container">
<div id="header"><br><center><p>Dit is mijn site!</p></center>
</div>
<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="www.google.com">Nav Link 1</a></li>
<li><a href="www.google.com">Nav Link 2</a></li>
<li><a href="www.google.com">Nav Link 3</a></li>
<li><a href="www.google.com">Nav Link 4</a></li>
</div>
</div>
<div id="leftnav">
<div class="navlinks2">
<ul>
<li><a href="http://www.google.com">Nav Link 5</a></li>
<li><a href="http://www.google.com">Nav Link 6</a></li>
<li><a href="http://www.google.com">Nav Link 7</a></li>
<li><a href="http://www.google.com">Nav Link 8</a></li>
</div>
</div>
<div id="body">This is the body</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
style.css
#container {
width: 100%;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #96d8ea;
}
#header p{
color: #000000;
font-family: Verdana;
font-size: 25px;
font-weight: bold;
text-decoration: underline;
}
#horizontalnav {
width: 100%;
height: 30px;
position: relative;
background-color: #5acded
}
.navlinks {
position: absolute; top: 4px; left: 375px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
display: inline;
list-style-type: none;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
font-size: 16px;
font-family: Verdana;
text-decoration: none;
}
.navlinks li a:hover {
color: #ffffff;
font-size: 16px;
font-family: Verdana;
text-decoration: underline;
background-color: #000000;
}
#leftnav {
float: left;
width: 140px;
height: 536px;
background-color: #5acded;
}
.navlinks2 ul {
margin: auto;
}
.navlinks2 li {
margin: 20px 10px 0px 0px;
list-style-type: none;
}
.navlinks2 li a {
color: #000000;
font-size: 16px;
font-family: Verdana;
text-decoration: none;
}
.navlinks2 li a:hover {
color: #ffffff;
font-size: 16px;
font-family: Verdana;
text-decoration: underline;
}
#body {
width: 620px
}
#footer {
clear: both;
background-color: #D1C0A7;
}
Dit zijn 2 bestanden, een css en een html document.
Weet iemand hoe ik Nav Link 5 tm 8 meer in het midden kan krijgen van mijn linkerkolom?
Groetjes Jorenman
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Joren's site! Home</title>
</head>
<body>
<div id="container">
<div id="header"><br><center><p>Dit is mijn site!</p></center>
</div>
<div id="horizontalnav">
<div class="navlinks">
<ul>
<li><a href="www.google.com">Nav Link 1</a></li>
<li><a href="www.google.com">Nav Link 2</a></li>
<li><a href="www.google.com">Nav Link 3</a></li>
<li><a href="www.google.com">Nav Link 4</a></li>
</div>
</div>
<div id="leftnav">
<div class="navlinks2">
<ul>
<li><a href="http://www.google.com">Nav Link 5</a></li>
<li><a href="http://www.google.com">Nav Link 6</a></li>
<li><a href="http://www.google.com">Nav Link 7</a></li>
<li><a href="http://www.google.com">Nav Link 8</a></li>
</div>
</div>
<div id="body">This is the body</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>
style.css
#container {
width: 100%;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #96d8ea;
}
#header p{
color: #000000;
font-family: Verdana;
font-size: 25px;
font-weight: bold;
text-decoration: underline;
}
#horizontalnav {
width: 100%;
height: 30px;
position: relative;
background-color: #5acded
}
.navlinks {
position: absolute; top: 4px; left: 375px;
}
.navlinks ul {
margin: auto;
}
.navlinks li {
margin: 0px 18px 0px 0px;
display: inline;
list-style-type: none;
}
.navlinks li a {
color: #000000;
padding: 5px 12px 7px;
font-size: 16px;
font-family: Verdana;
text-decoration: none;
}
.navlinks li a:hover {
color: #ffffff;
font-size: 16px;
font-family: Verdana;
text-decoration: underline;
background-color: #000000;
}
#leftnav {
float: left;
width: 140px;
height: 536px;
background-color: #5acded;
}
.navlinks2 ul {
margin: auto;
}
.navlinks2 li {
margin: 20px 10px 0px 0px;
list-style-type: none;
}
.navlinks2 li a {
color: #000000;
font-size: 16px;
font-family: Verdana;
text-decoration: none;
}
.navlinks2 li a:hover {
color: #ffffff;
font-size: 16px;
font-family: Verdana;
text-decoration: underline;
}
#body {
width: 620px
}
#footer {
clear: both;
background-color: #D1C0A7;
}
Dit zijn 2 bestanden, een css en een html document.
Weet iemand hoe ik Nav Link 5 tm 8 meer in het midden kan krijgen van mijn linkerkolom?
Groetjes Jorenman
