Login | Register | FAQ
Anonymous

Vertical Line Separating Menu Items

+ Post a reply

Page 1 of 1


Vertical Line Separating Menu Items

by akashh » Sat Jan 07, 2012 4:16 pm

Hi Please can you help me with the following:

1. How do I add a vertical line like "|" that separates my menu items?
2. When I hover over a selected menu item it isn't the size of the div, vertically, how do I fix this?
User avatar

akashh

  • Posts: 16
  • Joined: Sat Sep 24, 2011 11:32 am

Re: Vertical Line Separating Menu Items

by atik » Sat Jan 07, 2012 5:47 pm

Hi akashh,
It would be better to provide us the code so that we can suggest according to it. By the way, To get vertical line after each link if you used <li> to hold links then just put '|' after each </li> like this,
Code: Select all
<li><a href="#">link</a></li>|<li>...
,
or you can use padding to the a element and get a border right property to it like bellow,
Code: Select all
a {
padding:0 5px 0 5px;
border-right:1px solid white;}

For second problem, you can use height property for the 'a' element on hover,
Code: Select all
a:hover {height:50px; display:block}

The output of this codes will very with the condition of it's container elements. If you don't get the output as you want, let us know and also provide us the code of yours.
User avatar

atik

  • Posts: 472
  • Joined: Mon Oct 17, 2011 4:55 pm

Re: Vertical Line Separating Menu Items

by akashh » Sun Jan 08, 2012 11:16 am

Thanks for the help after hours of trying to figure it out it was as simple as setting the font size on the list items something so dam trivial. Thanks for the reply bud.
User avatar

akashh

  • Posts: 16
  • Joined: Sat Sep 24, 2011 11:32 am

Re: Vertical Line Separating Menu Items

by Mister_grey2010 » Wed Jan 18, 2012 9:30 am

Use border!
User avatar

Mister_grey2010

  • Posts: 22
  • Joined: Wed Jan 04, 2012 6:44 pm

Re: Vertical Line Separating Menu Items

by Mister Fox » Sat Jan 21, 2012 11:58 pm

Is there anyway to move it so it's level?
User avatar

Mister Fox

  • Posts: 33
  • Joined: Fri Jan 20, 2012 9:45 pm


+ Post a reply

Page 1 of 1