I'm creating a site for my artwork and I need to know how to move the text inside of a vertical nav bar.

 

I've attached a pic showing what I have atm - I just need to know how to move the text itself inside the grey boxes using HTML/CSS. Help would be greatly appreciated

 

 

Use paddings, margins or positioning.

Use a list element:

 

Something like this:

 

XHTML

<ul class="side_nav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

CSS

ul.side_nav {
  list-style:none;
  margin:0;
  padding:0;
  width:200px;
}

ul.side_nav li  {
  margin:0;
  padding:4px 10px;
  background:#ccc;
  display:block;	
}

ul.side_nav li a {
  color:#333;
  font-weight:normal;	
  padding:0;
}

 

EDIT: quickly lifted from my standard css stuff, so your mileage may vary.

You'll get the idea however - set the unordered list to have no list-style (no bullet on the li tags), set it's margin and padding to 0.

Then do the same to the li, add some padding to it.

Finally, create the link style.

 

It should be noted that you can mix 'n match the styles in the link and the li - you could set the link to a display of block and put the padding on that.

 

You can seperate the items in the list either by putting top/bottom margin on the li element, or putting borders on it - the sky is the limit.

 

However, the above code is a *very* standard way of doing a basic vertical list. From this base, you can go wild with the styling, add background arrow images to your links, rounded corners, gradients - whatever you want.

Edited July 7, 201115 yr by bb_matt