Jump to content


Photo
- - - - -

Adding A Vertical Line Between Items In Main Nav

css navigation menu

Best Answer catrina , 18 December 2012 - 06:22 PM

You should see this demo to make sure it would behave the way you expect it to: http://www.w3schools...order-image.asp

Go to the full post


  • Please log in to reply
34 replies to this topic

#21 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 December 2012 - 01:46 PM

@Webwerx

 

The code you're using wont work, you need to target the a CSS for your menu item, use the code I gave you above as an example, add #page or #site to the beginning and it will probably work.

 

Example - 

Please Login or Register to see this Hidden Content



#22 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 01:48 PM

Ha -- You are too quick @Batman....  The issue here is that I do not want the dotted line to go from top to bottom......



#23 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 01:49 PM

@Danny: I will try what you suggested. THX



#24 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 01:55 PM

Hey @ Danny: I used this code:

 

 

#site .main-nav a {
margin: 12px 0;
border-right: 1px dotted #b4b4b4;
}
 
The "margin" just make my NAV higher.


#25 batman

batman

    Bat Learning

  • Members

  • 2081 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 18 December 2012 - 01:56 PM

Sorry WebWerx

I do not see the dotted line to go from top to bottom

Captura%2520de%2520pantalla%25202012-12-

:geek:



#26 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 December 2012 - 02:16 PM

Oh you want the dotted line to go all the way to the top ?

 

If so use this:

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content



#27 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 02:27 PM

@Batman: What you are seeing is the margin making the NAV system higher. I want the border to not be from top to bottom, but partial (go back and have a look at the start of this thread).

 

@Danny: See my comment above. The addition of the margin increases the height of my NAV system. It's a good suggestion on your part. But not ideal...

 

:zoro:



#28 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 18 December 2012 - 02:29 PM

The code I gave you above in my previous post is supposed to replace the code I gave you earlier. That code above will add a border to your menu items that has no gap above or below.

 

See my image above for an example.



#29 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 02:34 PM

Thanks @ Danny. I know that... I want the gap... without increasing the height of my NAV system. Adding the margin increase the height. I don't think there is a way to add a border that doesn't take up the entire space allotted to an element (by using CSS). 

 

Have a look at the site now. You will see the gap I wanted - with the expense of increasing the height of the NAV system. Just go into Firebug and comment out the added CSS to see the original height of the NAV system.

 

I got fooled at first to think the CSS solution you provided worked. It does -- sort of.....

 

:zoro:



#30 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 18 December 2012 - 03:17 PM

Why are you always so much trouble? :lolu:
The problem is.. you only have limited px to do what you want.. here's what will most likely work for you:
 

Please Login or Register to see this Hidden Content

 
Then to fix the dropdown arrow, get rid of it in the options, or add this:
 

Please Login or Register to see this Hidden Content



#31 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 03:37 PM

@ Jenny: I am just a high maintenance guy (Like @Rob).  :thumbsu:

 

Your suggestion renders the same result as what I have. Adding the margin only serves to increase the height of the NAV bar (while giving me the effect I want.

 

:zoro:

 

PS I really don't think that what I want done can be done with CSS. I think I need to create an image and place it appropriately.



#32 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 December 2012 - 04:01 PM

I'm starting to think you're right. The CSS possibilities are limited when it comes to what you're trying to do specifically.



#33 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 04:43 PM

@Catrina: It may be so. I have done some poking around and can find no CSS rules that apply. What I have seen so far are more "tweaks" that provide a solution with unintended consequences.

 

So I think something like this may work: border-image: url(border-image.png)

 

Thoughts / comments?



#34 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 December 2012 - 06:22 PM   Best Answer

You should see this demo to make sure it would behave the way you expect it to:

Please Login or Register to see this Hidden Content



#35 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 18 December 2012 - 06:54 PM

@Catrina: Holy Schmoly! That's a lot of CSS for a little image!  :stuff:







Also tagged with one or more of these keywords: css, navigation, menu