HTML5 menu
HejsaJeg sidder og leger med HTML5. Jeg fandt en side, som jeg vil prøve at lave for at øve mig. Det er denne det handler om:
http://demo.olevmedia.net/metro/
Jeg er begyndt på det, men er egentligt lidt i tvivl om man kan lave det med det jeg er igang med, eller om man skal bruge flere div tags. Det som jeg er igang med at lave er selve knapperne, altså de orange knapper. Jeg er dog i tvivl om hvordan man kan få det mellemrum mellem dem. Det er vel padding, men er jeg helt galt på den med følgende kode:
<!DOCTYPE html>
<html>
<head>
<meta charset="US-ASCII">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css">
<link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
Header
</header>
<nav id="top_menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PICTURES</li>
<li>ARTICLES</li>
<li>STORY</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</nav>
<article id="left_content">
<section>
</section>
</article>
<article id="middle_content">
<section>
</section>
</article>
<article id="right_content">
<section>
</section>
</article>
<footer id="footer">
</footer>
</div>
</body>
</html>
CSS:
@CHARSET "US-ASCII";
* {
padding: 0px;
margin: 0px;
}
body {
text-align:center;
}
#big_wrapper {
border: 2px solid black;
width: 1000px;
margin: 0px auto;
text-align: left;
}
#top_header {
background-color: yellow;
border: 2px solid black;
height: 100px;
}
#top_menu {
background-color: green;
height: 150px;
width 150px;
}
#top_menu li {
display: inline-block;
list-style: none;
}
Med Venlig Hilsen
Mads
