Så er jeg i gang med en hjemmeside, som jeg vil kode helt fra bunden, fra første gang, så jeg rigtig kan prøve mine kræfter af
Jeg har et meget primitivt skelet indtil videre, som jeg egentlig bare har fra de koder, jeg har lært her fra siden. Dvs. jeg har ikk rigtig flytter på divs osv.
Men nu skal jeg bare lige, som det første, have centreret min navigationsbar.
Jeg har valgt at lave en div under banner-div'en, hvori min navigationsbar er. Jeg tænkte, at det nok ville være det nemmeste, og så kunne jeg jo eventuelt bare fjerner border på den div, så man kun kan se navigationsbaren, som det er meningen. Altså bare, så navigationsbaren har en lille "boks" at ligge i og hænger sammen med resten af siden
Men hvordan centrerer jeg den inde i min div?
Jeg har prøvet position: center;
og left: 50%;
margin-left: -500px;
men den første virker slet ikke, og den anden får navigationsbaren helt ud i venstre side.
Her er mine koder i HTML-dokumentet:
Kode: Vælg alt
<html>
<head>
<title>Dette er en testside igen igen</title>
<META charset="utf-8" />
<META name="keywords" content="Test" />
<META name="description" content="Her tester jeg noget HTML" />
<link rel="stylesheet" href="file:///Library/WebServer/Documents/NetBeansProjects/NetBeansProjects/The%20Red%20Balloon/Hovedside.css" type="text/css"/>
</head>
<body id="sideindhold">
<div id="rapper">
<div id="header">
Her er min header
</div>
<div id="navigationsbar">
<ul id="ulnav">
<li id="linav"><a href="#" class="nav"> Home </a></li>
<li id="linav"><a href="#" class="nav"> Om mig </a></li>
<li id="linav"><a href="#" class="nav"> Kontakt </a></li>
<li id="linav"><a href="#" class="nav"> Billede </a></li>
</ul>
</div>
<div id="menu">
Her er min menu
</div>
<div id="indhold">
Her er mit indhold
</div>
<div id="footer">
Her er min footer
</div>
</div>
</body>
</html>
Kode: Vælg alt
#sideindhold {
background-color: #D4C792;
}
#rapper {
width: 1000px;
height: 1000px;
border-style: solid;
border-color: #000000;
border-width: thin;
position: absolute;
left: 50%;
margin-left: -500px;
top: 100 px;
}
#header {
width: 1000px;
height: 170px;
border-style: solid;
border-color: #000000;
border-width: thin;
background-color: #323B51;
position: absolute;
left: 0px;
top: 0px;
}
#menu {
width: 200px;
height: 400px;
border-style: solid;
border-color: #000000;
border-width: thin;
background-color: #999;
position: absolute;
left: 0px;
top: 300px;
}
#indhold {
width: 800px;
height: 400px;
border-style: solid;
border-color: #000000;
border-width: thin;
background-color: #AA2808;
position: absolute;
left: 200px;
top: 300px;
}
#footer {
width: 1000px;
height: 300px;
border-style: solid;
border-color: #000000;
border-width: thin;
background-color: #000000;
position: absolute;
left: 0px;
top: 700px;
}
#navigationsbar {
width: 1000px;
height: 100px;
border-style: solid;
border-color: #000000;
border-width: thin;
position: absolute;
top: 170px;
}
/*Navigationsbar*/
#ulnav {
list-style-type: none;
width: 832px;
left: 50%;
margin-left: 250px;
}
#linav {
float: left;
}
a.nav:LINK, a.nav:visited {
display: block;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #999;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a.nav:hover {
background-color: #CCC;
}
! Hvad skulle jeg dog gøre uden NemProgrammering 
Men når jeg ændrer på bredden, så er den helt gal igen....