Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Angled Navbar Using Images

Bottom of Page

1 to 5 of 5

  1.  
  1.  permalink
    I can do a horizontal and vertical nav bar (with image rollovers) in CSS. But, does anyone know if you can do one that's at a slight angle. I've thought about using image maps, but don't really want to go down that route (especially since I've only used them in Dreamweaver, which I'd rather not use). Thanks in advance to any help anyone can offer.

    Ed
    •  
      CommentAuthorcrash_D.
    • CommentTimeApr 10th 2006 edited
     permalink
    pay attention to the side and the slope.. the sample code below aligns menu items right, but each consecutive item is shifted 2 pixels left... try changing the step (2 px here) and the side (rtl down in this example)..

    <div style="text-align: right">
    <a href="/1.ext?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style="margin-right: 5px; display: block">page1</a>
    <a href="/2.ext?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style="margin-right: 7px; display: block">page2</a>
    <a href="/3.ext?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style="margin-right: 9px; display: block">page3</a>
    <a href="/4.ext?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" style="margin-right: 11px; display: block">page4</a>
    </div>

    hope this helped
    •  
      CommentAuthoradjustafresh
    • CommentTimeApr 10th 2006 edited
     permalink
    Ed,

    I'm not exactly sure what effect you're going for when you describe "a slight angle".

    If you want the actual text to be angled, you're going to have to use graphics. If you just want the buttons to be at an angle you can use HTML & CSS to position the buttons accordingly.

    I recently coded a page where the designer decided to get creative with the placement of the navigation buttons. I placed an ID on each nav button and created a CSS image map, positioning each anchor over the background image of the askew button.

    It definitely has an angled/askew effect: See the example in all its glory.
  4.  permalink
    This is sort of what I'm going for. As I'm not using a system font, I create this using gifs most likely. You can see the yellow represents the rollover state. Preferably, I'd like to just cut a static gif (of the whole nav) and rollover state and then just use atributes to set the rollover.

    http://www.flickr.com/photos/thepowerofed/126551173/
    •  
      CommentAuthorJohnRiv
    • CommentTimeApr 10th 2006
     permalink
    I've done one before at about a 30 degree angle, but I used Flash to accomplish it (had a horizontal nav in the css and then for users with flash I just used FlashObject to inject the Flash nav).

    Depending on the layout of the angled nav, you can do it with CSS though. See Designchuchi

1 to 5 of 5

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page