Member Avatar for Dannis86

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
  • 186 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by matricol
Member Avatar for almostbob

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 because: n/a
Member Avatar for Dannis86

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

Member Avatar for almostbob

no-repeat

one word hyphenated

Member Avatar for Dannis86

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

Member Avatar for almostbob

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 because: n/a
Member Avatar for matricol

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.