Need help in making lines between navigation menu

Hi,
I am newbie in designing and creating a simple 2 column layout. I need to make even spacing lines between my menu…

How can I do that so that my line spacing will always be equal the width between the menu item and line is equal.

I am enclosing a screenshot…

Please suggest…

Thanks
Ash

Hi,

I’m not quite sure if this is what you are asking but just add some padding top and bottom padding to the list element and they will be equally spaced apart.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.section {
    width:250px;
    background:#f0f5f9;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
.section h3 {
    color:#fff;
    background:#000;
    text-transform:uppercase;
    font-size:120%;
    padding:4px 10px 7px;
    margin:0;
    font-weight:normal;
}
ul.test {
    margin:0;
    padding:6px 0 10px;
    list-style:none;
    width:250px;
    font-size:77%;
}
.test li {
    padding:5px 10px 4px;
    color:#0789c7;
    line-height:1.2;
}
.test li a {
    color:#0789c7;
    text-decoration:none;
}
</style>
</head>
<body>
<div class="section">
    <h3>Category</h3>
    <ul class="test">
        <li><a href="#">Business</a></li>
        <li><a href="#">Cars</a></li>
        <li><a href="#">Fashion</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>
</body>
</html>


Hi,
Thanks a lot for getting back. I am asking about how to do the same in Photoshop. The example you provided is in CSS many thanks for that but how can I create even spacing between the lines in the menu so that it looks professional…

Thanks
Ashish

As the question is about photoshop I will move the thread to the graphics section of the forum where it belongs.

You will need to clarify what you mean by “even lines” and why you are having problems with it.

Ok Here my question again how can I make width between the lines equal… Please refer to image enclosed…

Use the GRID in Photoshop and set it to 10px gaps, enable the ‘snap to’ option and it should be quite easy to acheive.

Show grid = View > Show > Grid
Edit grid = Edit > Preferences > Grid and Guides

Alternatively you can multiselect all the layers that have the lines on (assuming you are using layers in your psd) and select the move tool. At the top of the screen there are options for alignment and distribution, select the distribute by center icon and it should auto set them all.