34 replies to this topic

[Danny]

@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

[WebWerx]

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

[WebWerx]

@Danny: I will try what you suggested. THX

[WebWerx]

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.

[batman]

Sorry WebWerx

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

[Danny]

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

[WebWerx]

@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...

 

[Danny]

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.

[WebWerx]

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.....

 

[Jenny]

Why are you always so much trouble?
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

[WebWerx]

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

 

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.

 

 

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.

[catrina]

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

[WebWerx]

@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?

[catrina]

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

[WebWerx]

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