Blog Documentation Book a Demo
Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to Resize Navbar Items?

AndrewVosAndrewVos
edited September 2006 in Vanilla 1.0 Help
Anyone know how to get the navbar items a particular width? I have set a background image, and now I'm trying to make it show the whole image. This comes out of vanilla.css.... #Header ul li a { padding:1px 10px; margin:0px; font-size:11px; text-decoration:none; color:#fff; width:139px; height:35px; background: transparent url(nav_up.png); } Please reply, this is making me go crazy! peace

Comments

  • BergamotBergamot
    edited September 2006
    It is not possible to set the width or height of inline elements. Why? Because the W3C gods said so.

    Then they invented inline-block, which behaves like an inline element but can have the size changed. Everybody was happy, until they realized that it doesn't work at all in any Mozilla browsers. Why? Who the heck knows. It's one of the oldest unresolved bugs, so the most common theory is "they're lazy and don't give a crap".
  • AndrewVosAndrewVos
    So there's nothing I can do? I just designed sweet looking nav bar icons!! I hate mozilla :<
  • AndrewVosAndrewVos
    Oh, BTW it doesn't seem to work (inline-block) in IE7 RC1, unless I'm doing it wrong :(
  • WallPhoneWallPhone
    You can try punching the padding out where the icon should be. This technique is used for the notice icon, as well as about every other background image in the Vanilla css.
  • AndrewVosAndrewVos
    Sorry not icons, tab button images... can two background: 's be added? One for "right" and one for "left"?
  • WallPhoneWallPhone
    You aren't allowed two background images for the same element. But don't panic! there are two elements nested there:<li class='TabOn'><a href='http://lussumo.com/community/discussions/'>Discussions</a></li>
    So you need to put one image on the LI, and one on the A:li.TabOn { margin: 0; padding: 0; background: transparent url(left.png) left top no-repeat; } li.TabOn a { padding: 0 24px; background: transparent url(right.png) right top no-repeat; }
    Change the padding as needed, a first guess would be 5-6 pixels more than the width of the left and right images.
  • pbearpbear New
    Sliding Doors Techinique and Sliding Doors, part 2
  • AndrewVosAndrewVos
    Argh, just when I reverted to the default style again and made some slight color changes to suit my site :< Thanks for the comments though, will definately try again. I do wish I had a better way to test my style than ftp'ing and refreshing! Netfirms is so slow!!! Thanks again! peace
  • AndrewVosAndrewVos
    edited September 2006
    Ahh, ok so what I do then is set left and right images, and have a middle image with x-repeat? Wait, I can't do that either can I :<

    This is what I'm trying to do here...
    image

    Hey, I'm not great with css but with the "behaviour" tag couldn't I just draw the whole image using js or something?
  • AndrewVosAndrewVos
    edited September 2006
    SWEET!!!! You two are legends! OMG I'm so stoked. :> Managed to work out I had to add : "#Header ul li:hover {" for the hover effect... It's a work in progress --->> www.wickedorange.com/forum Thanks again! peace
  • AndrewVosAndrewVos
    I don't know how I lived without the Internet Explorer Developer Toolbar, everyone should have a copy of it!!!
This discussion has been closed.