Hallo,
ik heb een website gemaakt met daar in een navigatie menu, maar deze ziet er raar uit als je je browser kleiner maakt.
Hier een paar screenshots:
Hier de html + css:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--Titel-->
<title>Tennisschool Frans Bouwhuis | Home</title>
<!--link naar css-->
<link href="/stylesheets/main.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header">
<div class="headerContent">
<a href="index.html">
<!--header-->
<img src="/images/logo.png" alt="Tennis school Frans Bouwhuis Logo" title="Tennis school Frans Bouwhuis Logo" width=200px height=100px/>
</a>
<!--Navigatie balk-->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="nieuws.html">Nieuws</a></li>
<li><a href="tennisles.html">Tennisles</a></li>
<li><a href="tennisregelement.html">Tennisregelement</a></li>
<li><a href="activiteiten.html">Activiteiten</a></li>
<li><a href="clinic_bedrijven.html">Clinic/Bedrijven</a></li>
<li><a href="inschrijven.html">Inschrijven</a></li>
</ul>
</div>
</div>
<br>
<div class="Slideshow">
</div>
<br>
<p>
Welkom bij de website van Tennisschool Frans Bouwhuis!
</p>
</div>
<!-- Footer-->
<div id="footer">
©Tennisschool Frans Bouwhuis 2014-2015
</div>
</body>
</html>
CSS:
.nav {
margin-top: 0%;
height: 40px;
background: #484A46;
}
.nav ul {
margin: 0;
padding: 0;
position: relative;
}
.nav ul li {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav ul li a {
float: left;
display: inline-block;
padding: 0.8% 40px;
color: #0CB504;
margin: 0%;
}
.nav ul li a:hover {
color: #0DFF00;
}
body {
background: #BFBFBF;
font-family: Arial;
font-size: 18px;
overflow-y: scroll;
}
.headerbreak {
width: 100%;
height 0;
border-bottom: 6px solid;
}
html, body {
margin: 0;
padding: 0;
}
p {
text-align: center;
}
.header {
height: 100px;
width: 100%;
background-color: #BFBFBF;
}
.header img {
padding-left: 40px;
}
#footer {
bottom: 0px;
left: 0px;
position:fixed;
width: 100%;
border-top: 1px solid #353633;
background-color: #84857F;
text-indent: 20px;
}
footer {
bottom: 0px;
left: 0px;
position:fixed;
width: 100%;
border-top: 1px solid #353633;
background-color: #84857F;
text-indent: 20px;
}
p {
margin-bottom: 20px;
}
ik heb een website gemaakt met daar in een navigatie menu, maar deze ziet er raar uit als je je browser kleiner maakt.
Hier een paar screenshots:
Hier de html + css:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!--Titel-->
<title>Tennisschool Frans Bouwhuis | Home</title>
<!--link naar css-->
<link href="/stylesheets/main.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="header">
<div class="headerContent">
<a href="index.html">
<!--header-->
<img src="/images/logo.png" alt="Tennis school Frans Bouwhuis Logo" title="Tennis school Frans Bouwhuis Logo" width=200px height=100px/>
</a>
<!--Navigatie balk-->
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="nieuws.html">Nieuws</a></li>
<li><a href="tennisles.html">Tennisles</a></li>
<li><a href="tennisregelement.html">Tennisregelement</a></li>
<li><a href="activiteiten.html">Activiteiten</a></li>
<li><a href="clinic_bedrijven.html">Clinic/Bedrijven</a></li>
<li><a href="inschrijven.html">Inschrijven</a></li>
</ul>
</div>
</div>
<br>
<div class="Slideshow">
</div>
<br>
<p>
Welkom bij de website van Tennisschool Frans Bouwhuis!
</p>
</div>
<!-- Footer-->
<div id="footer">
©Tennisschool Frans Bouwhuis 2014-2015
</div>
</body>
</html>
CSS:
.nav {
margin-top: 0%;
height: 40px;
background: #484A46;
}
.nav ul {
margin: 0;
padding: 0;
position: relative;
}
.nav ul li {
list-style: none;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav ul li a {
float: left;
display: inline-block;
padding: 0.8% 40px;
color: #0CB504;
margin: 0%;
}
.nav ul li a:hover {
color: #0DFF00;
}
body {
background: #BFBFBF;
font-family: Arial;
font-size: 18px;
overflow-y: scroll;
}
.headerbreak {
width: 100%;
height 0;
border-bottom: 6px solid;
}
html, body {
margin: 0;
padding: 0;
}
p {
text-align: center;
}
.header {
height: 100px;
width: 100%;
background-color: #BFBFBF;
}
.header img {
padding-left: 40px;
}
#footer {
bottom: 0px;
left: 0px;
position:fixed;
width: 100%;
border-top: 1px solid #353633;
background-color: #84857F;
text-indent: 20px;
}
footer {
bottom: 0px;
left: 0px;
position:fixed;
width: 100%;
border-top: 1px solid #353633;
background-color: #84857F;
text-indent: 20px;
}
p {
margin-bottom: 20px;
}
