Hej!
Jag försöker koda en hemsida med HTML5 och CSS3 men det verkar som att jag har fått lite problem.
När jag använder CSS Validation Service, så säger den att CSS:en är version 2.1
Jag vill ha den som CSS3, hur gör jag det?
#header nav ul li a:active funkar inte som jag vill. Jag ville att meny länken ska få bakgrund när man är inne i den sidan man har klickat. Den får bara bakgrunds färg när man klickar.
När det gäller HTML5 så vill jag ha section & footer taggen i mitten som header & nav taggen.
Hoppas att ni inte tycker att det är för mycket som jag vill ha hjälp med :$ :)
HTML5 koden:
<body class="body">
<header id="header">
<h1>?????.se - Just wait till the site is finish!</h1>
<nav><ul>
<li><a href="#">Hem</a></li>
<li><a href="#">Om</a></li>
<li><a href="#">Mikroblogg</a></li>
<li class="active"><a href="#">Gästbok</a></li>
<li><a href="#">Kontakta</a></li>
</ul></nav>
</header>
<p></p>
<section id="content" class="body">
<header>
NYHETER
</header>
</section>
<p></p>
<footer id="footerinfo" class="body">
<span id="footer">
Copyright © <a href="#">??????.se</a> Developed by ????? 2010-2011. All right reserved!
</span>
</footer>
</body>
CSS koden:
body {background:#333 url(bg.jpg) repeat top left;}
.body {clear: both; margin: 0 auto; width: 800px;}
#header{
text-align: center;
color: #fff;
}
#header h1 {
}
#header nav{
font-weight: bold;
width: 100%;
font-family: "Trebuchet MS", Verdana, "Times New Roman", Georgia;
font-size: 14px;
}
#header nav ul{
padding: 6px 0 7px 0;
margin: 0;
text-align: center;
}
#header nav ul li{
display: inline;
}
#header nav ul li a{
color: #fff;
padding: 6px 10px 4px 10px;
margin-right: 10px;
text-decoration: none;
border-bottom: 3px solid #ee55b5;
}
#header nav ul li a:hover{
border-bottom-color: #c71585;
}
#header nav ul li a:active{
background-color: #c71585;
}
#content {
border-bottom: 3px solid #ee55b5;
padding: 6px 3px 4px 3px;
}
#content header {
font-weight: bold;
font-family: "Trebuchet MS", Verdana, "Times New Roman", Georgia;
font-size: 16px;
color: #fff;
text-align:center;
}
#footerinfo {
border-bottom: 3px solid #ee55b5;
padding: 6px 3px 4px 3px;
}
#footer {
font-family: "Trebuchet MS", Verdana, Tahoma, "Times New Roman";
font-size: 11px;
color: #fff;
text-align: center;
}
#footer a:link{
color: #ee55b5;
text-decoration: none;
}
#footer a:hover{
color: #fff;
text-decoration: none;
}