PDA

View Full Version : Menue design


up4dw
02-24-2009, 06:22 AM
I have decided to ditch my spy menu @ www.hardydiesel.com (http://www.hardydiesel.com) and replace it with a css html menu. I have made some progress but am in need of some assistance.

1) I cant figure out how to center the text verticaly
2) cant figure out how to make the background and text change when mouse goes over. hoover i think its called
3) how to make hyperlinks look normal rather than blue under line.

any other sugestions as to my aproach or any tips greatly apreasheated.


<!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>
<style type="text/css">
ul
{
list-style-type: none;
list-style-type: none;
background-image: url(http://www.hardydiesel.com/img/msc/tan.jpg);
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
text-align: center;
width: 200px;
height: 100px;
padding: 0;
line-height: normal;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.hardydiesel.com/index.html"
">Hardy<br>
Diesel<br>
Home</a></li>
</ul>
<ul>
<li>7-33 kW<br>
Diesel<br>
Generator</li>
</ul>
<ul>
<li>35-115 kW<br>
Diesel <br>
Generator</li>
</ul>
<ul>
<li>120-250 kW<br>
Diesel<br>
Generators</li>
</ul>
<ul>
<li>275 kW and Up<br>
Diesel<br>
Generators</li>
</ul>
<ul>
<li>Propane<br>
Gas<br>
generators</li>
</ul>
<ul>
<li>Marine<br>
Diesel<br>
Generators</li>
</ul>
<ul>
<li>Contact<br>
Hardy<br>
Diesel</li>
</ul>
<ul>
<li>About<br>
Hardy<br>
Diesel</li>
</ul>
<ul>
<li>Questions<br>
and<br>
Answers</li>
</ul>
<ul>
<li>Our<br>
Favorite<br>
Links
</li>
</ul>
</body>
</html>

edbr
02-24-2009, 07:00 AM
your links can be styled with the a tag attributes a link a hover a visited
look at the link in my sig, different links and you will find some examples
you are looking for text -decoration , background color

domedia
02-24-2009, 08:53 PM
Also make sure you make lists correctly, don't close the list tag for every item.
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>