How i can make menu and sidebar styling like this website?

hi friends

kindly help me plz

http://www.srk.co.uk/English/Our_Services ( i want to make menu and sidebar listing style) along with border which is showing on right sidebar, with same height , which do not touch on footer

thanks, waiting , kindly CSS code and html along with example

Hi,

What have you tried so far?

There is nothing really complicated on that page so what are you having trouble with exactly?

The leftnav is floated left and the right content has a margin-left to clear the menu and then and a dotted left border for the divider. The dividing border is not an equal height construct and is only as high as the content. If the leftnav was taller the border would not match.

The only complicated part is that the right content container use a 100% floated parent with a negative left margin that allows the right column to be first in source but you don’t really need to do that and the benefits are minimum at best.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#outer {
	width:80%;
	min-width:760px;
	max-width:66em;
	margin:auto;
	overflow:hidden;
	border:1px solid red;
	padding:20px 0;
}
#leftnav {
	float: left;
	width: 14em;
	margin:0;
	padding:0;
	list-style:none;
}
#leftnav li { padding:5px 10px }
#content {
	border-left:1px dotted #000;
	overflow:hidden;
	zoom:1.0;
}
#content p { margin:0 10px 20px; }
</style>
</head>

<body>
<div id="outer">
		<ul id="leftnav">
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
		</ul>
		<div id="content">
				<p>Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. </p>
				<p>Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. </p>
				<p>Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. Lorem ipsum dolor sit amet conse ctetur adipiscing elit. </p>
		</div>
</div>
</body>
</html>



thanks for replying

sir what about “arrow” symbol, styling, and he used “http://www.srk.co.uk/img/sprite-menu.gif” , how he used arrow or extract from it, kindly help thanks

The arrows were created in a sprite image.

In the above link, he has two <td>'s. One to hold the arrow, and the other holds the link. He has the first <td> hold a background image which shows the arrow :).

Hi,

You probably need to read up on sprites to get a hang of how they work. Have a try yourself and when you get stuck you can post back with what you have done so far and we can then help a little more. We like to see you try something yourself first though rather than code everything from scratch :slight_smile:

The basics are that you just use the background-position property to show only the relevant part of the sprite. It may mean that the sprite will need to be in its own sized container especially if the element runs to many lines otherwise the other images in the sprite will be revealed in error.