Topic: Creating a Vertical navigation block
I have managed to make my links vertical / underneath each other, how would go about getting a border around them here
is my application view code and css code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><%= @title %></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<%= stylesheet_link_tag 'default' %>
</head>
<body>
<div id="page">
<div id="header">Kingston Direct</div>
<div id="nav">
<div class="content_box">
<ul class="menu">
<%= link_to_unless_current "Home", :controller => "site",
:action => "index" %><p/>
<%= link_to_unless_current "About", :controller => "site",
:action => "about" %><p/>
<%= link_to_unless_current "Help", :controller => "site",
:action => "help" %><p/>
</ul>
</div>
<div id="content">
<%= yield %>
</div>
</div>
</body>
</html>
What do I adjust in my css code to get a navigation block around my links and to the left side of the page
body
{
font: normal small Arial, Verdana, Helvetica, sans-serif;
font-size: 12pt;
background: #fffdda;;
margin: 0;
padding: 0;
text-align: left;
}
#page
{
position: relative;
top: 0px;
left: 250px;
width: 800px;
text-align: left;
border: solid black 4px;
}
#header
{
height: 110px;
background: url("http://rubyonrails.org/images/rails.png")
maroon no-repeat 16px 16px;
color: White;
font-size: 64pt;
font-weight: 900;
padding: 16px 16px 16px 120px;
}
#content
{
background: yellow;
padding: 1em;
text-align: left;
}
#nav
{
background: #ececec;
font-weight: bold;
}
#nav a
{
color: Maroon;
text-decoration:none;
}
