Hello there, I'm watching a video from designcourse.com and just trying out with my own website. I got this far with html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<p id="logo"><a href="http://funnymash.com">FUNNY MASH</a></p>
<ul id="top-nav">
<li id="home"><a href="http://funnymash.com">Home</a></li>
<li id="about"><a href="http://funnymash.com/about.html">About</a></li>
<li id="blog"><a href="http://funnymash.com/blog">Blog</a></li>
<li id="photos"><a href="http://funnymash.com/blog/all-photos/">Photos</a></li>
<li id="forum"><a href="http://funnymash.com/forum">Forum</a></li>
<li id="fb"><a href="http://www.facebook.com/pages/FunnyMASHcom/138795476197243">FB</a></li>
<li id="twitter"><a href="https://twitter.com/#!/WebFunnyMash">Twitter</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="content">
</div>
</body>
</html>
And this is my css
@charset "utf-8";
/* CSS Document */
*{font-family:arial,helvetica,sans-serif,tahoma,verdana,geneva,lucida,"lucida grande";}
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
margin: 0; padding: 0; outline: none; color:#eeece8;
}
body {
font: 9pt/17pt arial;
height: 100%;
background-color: #eeece8;
outline: none;
}
.clear {
clear: both;
}
a { color: #52686f; text-decoration: none; outline: none; }
#container {
display: block;
margin: 0 auto;
width: 957px;
}
p#logo {
width: 511px;
height: 57px;
display: inline;
float: left;
background: url(../images/logo.png);
margin-top: 14px;
}
p#logo a {
width: 511px;
height: 57px;
display: block;
text-indent: -5000px;
}
ul#top-nav {
list-style-type:none;
float:right;
display:inline;
}
ul#top-nav li {
display:inline;
float:left;
margin: 33px 20px 0 0;
height:18px;
}
ul#top-nav li a {
text-indent: -5000px;
display: block;
height:18px;
}
ul#top-nav li#home {
background: url(../images/button-home.png) no repeat;
width:44px;
}
ul#top-nav li#home a {
width:44px;
}
ul#top-nav li#about {
background: url(../images/button-about.png) no repeat;
width:44px;
}
ul#top-nav li#about a {
width:44px;
}
ul#top-nav li#blog {
background: url(../images/button-blog.png) no repeat;
width:38px;
}
ul#top-nav li#blog a {
width:38px;
}
ul#top-nav li#photos {
background: url(../images/button-photos.png) no repeat;
width:52px;
}
ul#top-nav li#photos a {
width:52px;
}
ul#top-nav li#forum {
background: url(../images/button-forum.png) no repeat;
width:46px;
}
ul#top-nav li#forum a {
width:46px;
}
ul#top-nav li#fb {
background: url(../images/button-fb.png) no repeat;
width:25px;
}
ul#top-nav li#fb a {
width:25px;
}
ul#top-nav li#twitter {
background: url(../images/button-twitter.png) no repeat;
width:50px;
}
ul#top-nav li#twitter a {
width:50px;
}
Here is the website I tried it on: http://funnymash.com/html
The buttons are not showing, I do not know why.
In dreamweaver the buttons DO show, but in all browsers they do not show..