CSS newbie again. I have a problem trying to get coffee mug images
within anchor tags to center with my link text for a vertical list
menu. If I use the horizontal/vertical properties of "background" or
"background-image", the positioning only works with specifying
pixels.
If I specify the vertical position in pixels, the image gets cut-off
at the bottom. I don't know what to do and would appreciate anyone's
help. Specifically the code pertaining to id="menu" and id="about"
There are 3 separate images (for each click/hover state) and are 20 X
20 pixels and are in .png format. Thanks in advance:
The 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" xml:lang="en" lang="en">
<head>
<title>HTML Template</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="cache-control" content="max-age=0, must-
revalidate" />
<script language="JavaScript" src="flash_check.js"></script>
</head>
<body>
<div id="wrapper">
<div class="orange"></div>
<div class="flash"><OBJECT classid="clsid:D27CDB6E-
AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0"
WIDTH="500" HEIGHT="200" id="myMovie"><PARAM NAME=movie
VALUE="Movie2.swf"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor
VALUE=#FFFFFF><EMBED src="Movie2.swf" quality=high bgcolor=#FFFFFF
WIDTH="500" HEIGHT="200"
NAME="myMovie" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></
OBJECT>
</div>
<div class="topLinks"><img src="topLinks.jpg" / ></div>
<div id="leftNav">
<ul class="navLink">
<li><a id="menu" href="http://www.google.com" target="_blank"><img
src="blank.png" />Menu</a></li>
<li><a id="about" href="http://www.msn.com" target="_blank"><img
src="blank.png" />About Us</a></li>
</ul>
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</div>
<div class="txtBody">"Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="footer">
<ul>
<li><a href="#">Home</a></li><li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li><li><a href="#">Contact Us</
a></li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<span class="copyright">Copyright© 2008 Java Junction Cafe</span>
</div<!--end of wrapper -->
</body>
</html>
The CSS:
body {
background-color: #FFFEF5;
}
#wrapper{
float: left;
margin: 0px 125px;
height: 200px;
width: 731px;
}
.orange{
float: left;
background-color: #CF9623;
border-bottom: 3px solid #483303;
height: 200px;
width: 25px;
}
.flash{
float: left;
border: 3px solid #483303; border-top: none;
height: 200px;
width: 500px;
}
.topLinks{
float: left;
background-color: #647813;
border-bottom: 3px solid #483303;
height: 200px;
width: 200px;
}
.topLinks img{
width: 150px;
height: 150px;
margin: 20px 0 0 20px;
}
#leftNav{
float: left;
background-color: #514484;
border-right: 3px solid #483303;
height: 400px;
width: 250px;
color: #FFF;
}
ul.navLink {
list-style-type: none;
}
ul.navLink li a {
display: block;
text-decoration: none;
color: #FFFFFF;
}
.txtBody{
float: left;
background-color: #EFDE3F;
height: 400px;
width: 478px;
}
.footer{
float: left;
background-color: #483303;
height: 20px;
width: 100%;
}
.footer ul {
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: center;
}
.footer ul li {
display: inline;
border:none;
}
.footer ul li a {
text-decoration: none;
padding: .05em 4em;
color: #FFFFFF;
background-color: #483303;
font-size: .75em;
}
.footer ul li a:hover {
background-color: #CF9623;
color: #483303;
}
/* This section below is what is giving me fits */
img {margin: 0; height: 20px; width: 20px; border-width: 0;
background: url(2a.png) no-repeat 0; padding-right: 5px;}
#menu img {background-image: url(2a.png);}
#about img {background-image: url(2a.png);}
#menu:visited img {background-image: url(3.png);}
#about:visited img {background-image: url(3.png);}
#menu:hover img {background-image: url(1.png);}
#about:hover img {background-image: url(1.png);}
#menu:active img {background-image: url(blank.png);}
#about:active img {background-image: url(blank.png);}
.copyright{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .65em;
color: #514484;
}
