0

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..

3
Contributors
7
Replies
8
Views
6 Years
Discussion Span
Last Post by matricol
0

ul#top-nav li#home { background: url(../images/button-home.png) no repeat; width:44px; wrong

ul#top-nav li#home { background: url('../images/button-home.png') no-repeat; width:44px; }

don't use px, no fixed measurements, creates problems--makes the page push offscreen (creates horizontal scroll bars, users do not scroll sideways, mice do not have hscroll wheels, users leave), on small displays
--makes the page sit as a strange looking central column in the middle of a wasteland of empty screen on large displays, in any other resolution/window size/screen size than what it was originally laid out on
pixels are generally only used for images
current best practice, layout is em or %, relative dimensions that auto-adjust to user preference screen size window size
and wont become smaller each time a new monitor standard is reached and the pixel mask gets smaller

these standard test beds may assist you-- replace yoursite.com with your uri

http://analyze.websiteoptimization.com/authenticate.php?url=http://www.yoursite.com&/ Speed

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.yoursite.com&charset=%28detect+automatically%29&doctype=Inline&group=0 html

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.yoursite.com&profile=css21&usermedium=all&warning=1&lang=en CSS

http://demo.opera-mini.net/demo.html?www.yoursite.com handheld

http://www.browsershots.org other browsers

many problems (if present) will show serious code errors in the w3c validator sites will produce blankscreens in browsershots
Valid code does not ensure the site will work ...
Invalid code ensures the site will not work ...
.. in all browser OS combinations

not all layouts work in handheld devices
strictly code based,

Edited by almostbob: n/a

0

http://funnymash.com/html/ Still no buttons
CSS is this now:

@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/home.png') no repeat;
	width:44px;
}
 
ul#top-nav li#home a {
	width:44px;
}
 
ul#top-nav li#about {
	background: url('../images/about.png') no repeat;
	width:44px;
}
 
ul#top-nav li#about a {
	width:44px;
}
 
ul#top-nav li#blog {
	background: url('../images/blog.png') no repeat;
	width:38px;
}
 
ul#top-nav li#blog a {
	width:38px;
}
 
ul#top-nav li#photos {
	background: url('../images/photos.png') no repeat;
	width:52px;
}
 
ul#top-nav li#photos a {
	width:52px;
}
 
 
ul#top-nav li#forum {
	background: url('../images/forum.png') no repeat;
	width:46px;
}
 
ul#top-nav li#forum a {
	width:46px;
}
 
 
ul#top-nav li#fb {
	background: url('../images/fb.png') no repeat;
	width:25px;
}
 
ul#top-nav li#fb a {
	width:25px;
}
 
ul#top-nav li#twitter {
	background: url('../images/twitter.png') no repeat;
	width:50px;
}
 
ul#top-nav li#twitter a {
	width:50px;
}

And yes I changed all my files on my server to about.png - blog.png - fb.png - home.png - forum.png - photos.png - twitter.png

0

Such a small thing that can make me cry :(. Many thanks for helping me out!
Next time i'll look more closely haha.

0

all the instruction pages "css background properties" et al, use a tiney<--spelled wrong i think--< size hyphen dash, cant see it
ya couldnt see mine till it was bold red either

Edited by almostbob: n/a

0

thats not a big deal ... try firebug in fireworks and see whad code is good and whats not showing

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.