Buttons do not show

Question

Dannis86 2 Junior Poster in Training

12 Years Ago

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

web-design

3 Contributors
7 Replies
186 Views
7 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by matricol

All 7 Replies

almostbob 866 Retired: passive income ROCKS

12 Years Ago

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 12 Years Ago by almostbob because: n/a

almostbob 866 Retired: passive income ROCKS

12 Years Ago

no-repeat

one word hyphenated

Reply to this topic

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.

Dannis86 2 Junior Poster in Training · Answer 1 · 2011-06-25T21:15:46+00:00

http://jigsaw.w3.org/css-validator/validator?uri=funnymash.com%2Fhtml%2F&profile=css21&usermedium=all&warning=1&vextwarning=&lang=nl#errors

Here are the errors, but I do not know how to solve this...
The html is perfect as the validator says...

Dannis86 2 Junior Poster in Training · Answer 2 · 2011-06-25T21:36:23+00:00

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

Dannis86 2 Junior Poster in Training · Answer 3 · 2011-06-25T21:49:09+00:00

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

almostbob 866 Retired: passive income ROCKS · Answer 4 · 2011-06-25T21:59:52+00:00

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

matricol -8 Junior Poster in Training · Answer 5 · 2011-06-25T22:05:21+00:00

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

Buttons do not show

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers