Why can I not figure this out?

Dev Shed Forums Sponsor:

September 1st, 2012, 05:35 PM

Reinere

Registered User

Join Date: Sep 2012

Posts: 3

Time spent in forums: 1 h 8 m 30 sec
Reputation Power: 0

Why can I not figure this out?

So I've been trying to write in a dock on my stylesheet.
Now I cannot seem to get my background up.
Heres the stylesheet.
Please bare with me as I started taking a stab at writing .css today. I've never done this before.

Any ideas?

Here's the stylesheet.

Code:

body {
	font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
	font-size: 12px;
	background: #999;
	color: #444;
	margin: 0;
	padding: 0;
	background-image: url(images/bg1.png);
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1em;
	margin: 0 0 20px 0;
}

h1 { text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #ff00de,
                   0 0 70px #ff00de,
                   0 0 80px #ff00de,
                   0 0 100px #ff00de,
                   0 0 150px #ff00de; }
h2 { font-size: 15px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 12px; font-style: italic;}


img {
	border: none;
}

/* dock - top */
.dock {
	position: relative; 
	height: 50px; 
	text-align: center;
}
.dock-container {
	position: absolute;
	height: 50px;
	background: url(images/dock-bg2.gif);
	padding-left: 20px;
}
a.dock-item {
	display: block;
	width: 40px;
	color: #000;
	position: absolute;
	top: 0px;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}
.dock-item span {
	display: none; 
	padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
	width: 100%;
	bottom: 0px;
	position: absolute;
	left: 0px;
}
.dock-container2 {
	position: absolute;
	height: 50px;
	background: url(images/dock-bg.gif);
	padding-left: 20px;
}
a.dock-item2 {
	display: block; 
	font: bold 12px Arial, Helvetica, sans-serif;
	width: 40px; 
	color: #000; 
	bottom: 0px; 
	position: absolute;
	text-align: center;
	text-decoration: none;
}
.dock-item2 span {
	display: none;
	padding-left: 20px;
}
.dock-item2 img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}

And the html...

Code:

<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>SkubaCraft - Home</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.different-text-color { color: blue; }
</style>
</head>
<body>
<p><strong></strong></p>
<h3 align="center"><strong>
<font size="7">
<span class="different-text-color"><h1>SkubaCraft!<h1></span><br />
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="index.php"><img src="images/home.png" alt="home" /><span>Home</span></a> 
  <a class="dock-item" href="server-map.html"><img src="images/map.png" alt="DynMap" /><span>ServerMap</span></a> 
  <a class="dock-item" href="board/"><img src="images/forum.png" alt="Forums" /><span>Forums!</span></a> 
  <a class="dock-item" href="board/index.php?app=core&module=global&section=register/"><img src="images/sign_up.png" alt="SignUp" /><span>Sign Up!</span></a> 
  <a class="dock-item" href="http://www.tinyurl.com/SkubaCraft"><img src="images/shafter.png" alt="Like us on mineshafter!" /><span>Mineshafter</span></a> 
</div>
</div>
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
		}
	);

</script>
</h3>
<table cellpadding="40">
<tbody>
<tr>
<td><a href="http://www.planetminecraft.com/server/skubacraft-cracked/vote/" title="SkubaCraft Minecraft Server"><br />
<img src="images/banner.jpg" alt="SkubaCraft border=" 0"="" /><br />
Vote For 4500 Skubites!</a></td><h2>
<td>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><input name="cmd" value="_s-xclick" type="hidden" /><input name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
			" type="hidden" /><input src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!" border="0" type="image" /><img alt="" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" border="0" height="1" width="1" /></form></td></tr></tbody></table></div>
<div class="break"></div></div>
</body>
</html>

September 1st, 2012, 06:59 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 462

Folding Points: 29722 Folding Title: Starter Folder

Time spent in forums: 2 Weeks 1 Day 23 h 47 m 14 sec
Reputation Power: 216

I'm seeing way too many errors at first glance.....please go HERE and validate/fix the errors in your html first, then, come back if you have issues.

September 1st, 2012, 07:41 PM

Reinere

Registered User

Join Date: Sep 2012

Posts: 3

Time spent in forums: 1 h 8 m 30 sec
Reputation Power: 0

Quote:

Originally Posted by DonR

I'm seeing way too many errors at first glance.....please go and validate/fix the errors in your html first, then, come back if you have issues.

I did what you said. I got a huge list of errors on my html, the .css file is perfect. But I have no idea how to fix the html file.
(Update) I still have not figured out how to properly set up the html file, help? advice?

September 2nd, 2012, 05:02 AM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 52 m 41 sec
Reputation Power: 7

Did you write the HTML code yourself or was it generated?

Can you provide your HTML code, I/we could possibly see errors by looking at that.

Regards,

NM.

September 2nd, 2012, 10:56 AM

Reinere

Registered User

Join Date: Sep 2012

Posts: 3

Time spent in forums: 1 h 8 m 30 sec
Reputation Power: 0

Quote:

Originally Posted by Nanomech

Did you write the HTML code yourself or was it generated?

Can you provide your HTML code, I/we could possibly see errors by looking at that.

Regards,

NM.

I posted the html in the original post

September 2nd, 2012, 12:37 PM

Nanomech

Contributing User

Join Date: Aug 2011

Location: The Pleiades

Posts: 196

Time spent in forums: 1 Day 23 h 52 m 41 sec
Reputation Power: 7

Ah apologies, hazy days.

Is that your WHOLE HTML file? If so, I would declare a doctype right at the very start as such:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I always opt to use XHTML Transitional 1.0 but many people have told me to use the strict doctype, that is of course if you are not writing HTML5.

For more information on doctypes, you could visit here for a brief and simple explanation.

After the doctype comes the opening HTML tag, which I do not see in your code.

The <html> opening tag should always contain an xmlns attribute. An example of this is:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">

Start off by correcting those errors. It should eliminate some of those errors the validator is spitting out and narrow your issues down more. I have since noticed there are many errors just between the body tag and the css conditional statement.

Kind regards,

Nanomech.

Last edited by Kravvitz : September 2nd, 2012 at 04:59 PM. Reason: replaced the link to w3schools.com

Why can I not figure this out?

Developer Shed Advertisers and Affiliates