I just want to add a side menu that links to various pages on my site. I would like to use image buttons or simple hrefs that the user clicks on to navigate. I think I need to use a div somehow ?
Thanks
I just want to add a side menu that links to various pages on my site. I would like to use image buttons or simple hrefs that the user clicks on to navigate. I think I need to use a div somehow ?
Thanks
Share Improve this question asked Feb 3, 2011 at 14:45 blue-skyblue-sky 53.9k161 gold badges465 silver badges780 bronze badges 2- Can you please be a little more specific about how we can help? – Surreal Dreams Commented Feb 3, 2011 at 14:48
- I just want a list of items to the left of my page, and when clicked navigation takes place to a different page. The navigations items can be just simple text or buttons. Thanks – blue-sky Commented Feb 3, 2011 at 14:56
3 Answers
Reset to default 6You can use a div element and float it left with CSS.
HTML:
<div id="nav">
<ul>
<li><a href="http://example./page2">A Link</a></li>
<li><a href="http://example./page3">Another Link</a></li>
</ul>
</div>
<div id="content">
<p> Here's some stuff </p>
</div>
CSS:
#nav {
width: 20%;
float: left;
background-color: gray;
}
#content {
width: 80%;
}
I would also run through the HTML and CSS tutorials at HTML Dog. It will make your life so much easier.
Listamatic has various examples of how to style a list of links
HTML :
<!Doctype html>
<html projectReviver="leftmenu.html">
<head>
<title>My Left Menu</title>
<link rel="StyleSheet" href="design.css" type="text/css" />
<!--[if IE]>
<script src="http://html5shim.googlecode./svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<div id="main">
<ul>
<li><a href="page.html">First page</a></li>
<li><a href="page2.html">2<sup>nd</sup>page</a></li>
</ul>
</div>
</nav>
</body>
</html>
design.css :
#mainu ul {
list-style: none;
background-color: red;
}
#nav {
width: 20%;
float: left;
background-color: red;
}
#content {
list-style: none;
}