centrere indhold
Hej eksperterJeg er igang med at lave mit hjemmeside.
Jeg er nybegynder i html, css programmering.
Det går nu fint, men nu har jeg i 3 dage siddet fast i dreamweaver cs6 og kan ikke få centreret indholdet af header og main, ligesom at navbar flytter ud til siden i forhold til resten.
Jeg håber der en nogen som lige vil kikke på koden her og hjælpe mig på løsningen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
}
#container {
font-family: "Century Gothic";
font-size: 1.2em;
color: #F60;
background-color: #FFF;
height: auto;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#container #header {
background-color: #FFF;
height: 150px;
margin-right: auto;
margin-left: auto;
}
#container #main {
padding: 0px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
position: relative;
height: auto;
min-height: 440px;
background-color: #666;
}
#container #footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #333;
padding-top: 20px;
position: relative;
height: 100px;
}
#container #header #logo {
height: 100px;
}
#container #header #logo #ccs-logo {
background-image: url(images/Logo.gif);
text-indent: -9999px;
display: block;
height: 100px;
width: 235px;
margin-left: 50px;
}
#container #header #navbar {
height: 50px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
}
#container #header #navbar #navbarmenu {
width: 900px;
margin-right: auto;
margin-left: auto;
list-style-type: none;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
}
#container #header #navbar #navbarmenu li {
float: left;
}
#container #header #navbar #navbarmenu li a {
display: block;
height: 50px;
width: 180px;
text-indent: -9999px;
}
#container #header #navbar #navbarmenu li a.Startside {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#container #header #navbar #navbarmenu li a.Startside:hover {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: 0px -50px;
}
#container #header #navbar #navbarmenu li a.Produkter {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -180px 0px;
}
#container #header #navbar #navbarmenu li a.Produkter:hover {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -180px -50px;
}
#container #header #navbar #navbarmenu li a.Detailkunder {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -360px 0px;
}
#container #header #navbar #navbarmenu li a.Detailkunder:hover {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -360px -50px;
}
#container #header #navbar #navbarmenu li a.Profil {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -540px 0px;
}
#container #header #navbar #navbarmenu li a.Profil:hover {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -540px -50px;
}
#container #header #navbar #navbarmenu li a.Kontakt {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -720px 0px;
}
#container #header #navbar #navbarmenu li a.Kontakt:hover {
background-image: url(images/bevan-navbar-new.png);
background-repeat: no-repeat;
background-position: -720px -50px;
}
#container #main #content {
font-family: "Century Gothic";
font-size: 14px;
color: #000;
background-color: #fff;
clear: left;
min-height: 75px;
width: 960px;
margin-left: 10px;
position: relative;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
}
</style>
</head>
<div id="container">
<div id="header">
<div id="logo"> <a href="#" title="Bevan Trading" target="_self" id="ccs-logo">logo</a>
</div><!-- logo slut -->
<div id="navbar">
<ul id="navbarmenu" name="navbarmenu">
<li><a href="#" class="Startside">Startside</a></li>
<li><a href="#" class="Produkter">Produkter</a></li>
<li><a href="#" class="Detailkunder">Detailkunder</a></li>
<li><a href="#" class="Profil">Profil</a></li>
<li><a href="#" class="Kontakt">Kontakt</a></li>
</ul>
</div><!-- navbar slut -->
</div><!-- header slut -->
<div id="main">
<div id="content">
<p>Tekst her </p>
</div><!-- content slut -->
<div id="sidebar">
</div><!-- sidebar slut -->
</div><!-- main slut -->
<div id="footer">
<div id="footnav">
</div><!-- footnav slut -->
<div id="kontakt">
</div><!-- kontakt slut -->
<div id="network">
</div><!-- network slut -->
</div><!-- footer slut -->
</div><!-- container slut -->
</body>
</html>
