For some reason, when i hover over this link, the image does not show correctly.
I need help with this :-o
I am fairly new to CSS, so please excuse my sloppy code.
Here's the HTML:
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="global.css" />
<title>Valkros Design</title>
<meta http-equiv="Content-Type" content="text/html; ch****t=iso-8859-1" /><style type="text/css">
</head>
<body>
<div id="nav"><a href="index.html">Home</a>    |     <a href="index.html">Portfolio</a>    |     <a href="index.html">Services</a>    |     <a href="index.html">Resources</a>    |    <a href="index.html">Contact</a>    |     <a href="index.html">Partners</a></div>
<div id="logo"></div>
<div id="content">
<h2 class="head">Welcome Everyone</h5>
<p class="grey">Posted on April 6, 2007 at 12:44pm</p>
<p class="head">Hello Everyone, I would like to welcome all of you to my web design portfolio.<br /> I do quality web design and clean code. Some code that I know are xHTML, and CSS<br />I also can code in wordpress as well as skin your blog.<br /> For any more addtional information, feel free to E-mail me or Instant Message me at:</p>
<p class="head">E-Mail: Valkros [at] Gmail [dot] com <br />
AIM: Valor Necros <br />
MSN: Valkros [at] Gmail [dot] com</p>
<p class="head"> If you would like to view my previous work I have done in the past for web designing,<br /> prints, or logos, please click the portfolio link in the navigation. <br />If you would like free resources such as free templates in .PSD format or brushes, patterns, etc.<br /> Please view the resources link. These resources are only for personal use. <br />Please do not make a profit out of the resources or redistribute, resell them. Thank You.</p>
</div>
<div id="footer">
<div align="center>hello</div>
</div>
</body>
</html>
Here's the CSS:
Code:
body {
background: url(images/bg.gif) repeat;
}
#logo {
background: url(images/logo.gif);
width: 269px;
height: 160px;
margin-top: -76px;
margin-left: 20px;
}
#nav {
background: url(images/nav.gif) repeat-x;
font-family: arial, verdana, new times roman, sans-serif;
font-size: 13px;
color: #FFFFFF;
height: 56px;
padding-left: 350px;
padding-top: 20px;
}
#content {
background: url(images/content.gif) repeat-x;
padding: 10px;
padding-left: 15px;
height: 479px;
margin-top: 20px;
}
#footer {
background: url(images/footer.gif) repeat-x;
height: 104px;
}
p.head {
font-family: Arial, verdana, "times new roman", sans-serif;
font-size: 13px;
color: #666666;
}
h2.head {
font-family: "futura light";
color: #C02121;
margin: 0px;
padding: 0px;
}
p.grey {
font-family: arial;
font-size: 11px;
color: #666666;
margin: 0px;
padding: 0px;
}
a:link {
color: #FFFFFF
}
a:visited {
color: #FFFFFF
}
a:hover {
background: url(images/roll.gif);
width: 69px;
height: 56px;
color: #CC3333;
}
a:active {
background: url(images/roll.gif);
}
And just to make it easier to see, the a:hovers are here:
Code:
a:link {
color: #FFFFFF
}
a:visited {
color: #FFFFFF
}
a:hover {
background: url(images/roll.gif);
width: 69px;
height: 56px;
color: #CC3333;
}
a:active {
background: url(images/roll.gif);
}