www.webdeveloper.com
Results 1 to 5 of 5

Thread: A split, centered menu bar... Is it possible?

  1. #1
    Join Date
    Apr 2012
    Posts
    2

    Question A split, centered menu bar... Is it possible?

    Hello all! Forgive me if this is in the wrong spot, or mods, move it to the right one if this is not possible in CSS. Anywho, I'm designing a site at the moment and one of the design ideas that I had was a centered menu bar. However, the design itself seems to not be workable, or according to some of the people that I work with. However, I believe it would be, albeit it might be a bit complicated. So here's an extremely basic drawing in paint of what I had come up with in photoshop:

    http://i1039.photobucket.com/albums/...ubardesign.png

    The main question was, can I have separate button designs for 2 or even three of the buttons and still have them be menu items? Obviously, one side will slant to the right and the other to the left while the middle button is its own separate entity. Personally, I'm not opposed to mapping it, but I believe the other developers were wanting it to be some sort of changeable design, plus, I would still like mouse-over animations (fade-in dark to light). I'm not opposed to code suggestions, but the main thing I want to know is whether or not this is possible in CSS or if I need to use another language to gain the capabilities necessary to make this happen. Thanks!

    ValencY

  2. #2
    Join Date
    Mar 2012
    Posts
    1,418
    I'm not sure what you mean by the "design" of the menu items?

    a) You can use different graphic files for each menu item. Or:

    b) Each menu item can have a different class or ID. These identify the CSS code used to style the menu item(s).

    You use graphic images, classes or IDs depending on what you are trying to achieve...

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    I cannot figure out how to create the slanted lines (border?), but remember you can apply multiple space-separated classes to same element (e.g., button class="blue imageLeft").

  4. #4
    Join Date
    Mar 2012
    Posts
    1,418
    Look up "border-radius". It's a CSS3 property, so you won't find it in a CSS2 (or CSS1) reference. It works in IE9, Chrome and Firefox, but not IE8 and earlier. For IE8 compatibility, you have to use graphic images. But, personally, I don't think it is worth the effort any more. Just accept that it does not look as good on IE8!

  5. #5
    Join Date
    Apr 2012
    Posts
    2
    Ah k, that's what I thought. However, just talked to a few of the other developers and found that the site is in Joomla, which is why it is difficult to do different styles/get dimensions correct. So I did end up doing this in the wrong spot, but thanks anyway! I will repost the question in the correct forum. If a mod would be so kind as to lock this or delete it, I would be most appreciative.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles