Click to See Complete Forum and Search --> : Menu Help Please


mikegreenia.com
08-20-2008, 06:45 PM
I'm trying to get a menu set up similar to this (http://www.oswego.edu/opb93/img/screenshot.jpg). I know I need a <ul> but I've been playing with it for a while and I cant get the text to center into my button background image. I've attached that image. Can somebody help me out?

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>Omega Phi Beta Soroity, Inc.</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<div id="homecontainer">
<img src="img/home_logo.gif" />
<div id="navcontainer">

</div>
</div>
</body>
</html>


CSS:

@charset "utf-8";
/* CSS Document */

*{
margin:0;
padding:0;
}

body {
background: #000000 url(../img/flower_bg.jpg) top left no-repeat;
}

#homecontainer {
height: 780px;
width: 360px;
margin: 20px 0 0 520px;
}

#navcontainer {
height: 375px;
width:319px;
padding-top:10px;
margin:0 auto;
}

Centauri
08-20-2008, 08:19 PM
This would be difficult due to the possibility of multiple lines. I wouldn't even use a graphic at all here - just borders on the <a>s and <li>s :<ul id="nav">
<li><a href="#">Sorority History</a></li>
<li><a href="#">Zeta Chapter History</a></li>
<li><a href="#">Community Service &amp; Events</a></li>
<li><a href="#">Photo Album</a></li>
<li><a href="#">Sign Our Guestbook</a></li>
<li><a href="#">Contact us</a></li>
</ul>
#nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: bold;
width: 316px;
float: right;
}
#nav li {
list-style: none;
border: 1px solid #008000;
margin-bottom: 9px;
}
#nav a {
color: #F1CB28;
text-decoration: none;
text-align: center;
padding: 8px 3px;
width: 298px;
border: 3px solid #008000;
display: block;
margin: 2px;
}