CODEWITHSUNDEEP
cssnavigationpadding
Doug Fir
Doug Fir

Reputation: 21204

navigation spacing padding issue

I am building a navigation where, despite my fiddling with padding, I cannot create equal distances between my sub menu's. It's a little hard to describe so I have created a jsfiddle here: http://jsfiddle.net/kCXrX/

If someone has a sec could you let me know why, when you hover over a element the distance between the line items are not the same - there is a greater distance on the left than on the right

Any guidance appreciated!

Upvotes: 0

Views: 240

Answers (5)

Praveen Vijayan
Praveen Vijayan

Reputation: 6761

if orange hover left & right white spacing difference is the issue, check following code.

     ul.subnav {
         border-right: solid 1px;
         display: inline-block;
         height: 80px;
         padding: 0 5px 10px 1px;
         vertical-align: top;
         width: 116px;
     }

Upvotes: 0

John Riselvato
John Riselvato

Reputation: 12904

in ul.subnav change your padding to this:padding: 0 5px 10px 1px;

if you did a ctrl-a on your table, you will see your border-right line actually has what seems to be a 3 pixel padding automatically added to itself. If you take that padding into account your code actually works fine. in any case heres the new jsfiddle: http://jsfiddle.net/kCXrX/5/

Upvotes: 1

mikos
mikos

Reputation: 424

I've forked your fiddle here: http://jsfiddle.net/tLzST/1/

Your HTML was invalid, ULs can't be direct children of ULs, so I've put your .submenu lists within LIs. One or two style tweaks, too.

Upvotes: 2

Ariona Rian
Ariona Rian

Reputation: 9437

The extra padding appear just because you are using inline-block. try to remove this property (display:inline-block) and replace it with float:left. now, it's time to tweak the .navigation so it force to containt the subnav (floating issue) by adding overflow:hidden;. i have edit your fiddle, take a look at it. http://jsfiddle.net/kCXrX/

Upvotes: 0

core1024
core1024

Reputation: 1882

I've added ul.subnav {border-left: solid 1px transparent;padding: 0 5px 10px 0;} and now it looks beter to me.

Upvotes: 0

Related Questions