Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS centering on smaller parent element

    A client's designer handed me a PSD with this layout aspect, and i can't figure out how to do it in CSS. I was about to resort to an annoying javascript solution but I thought I'd ask you guys first.

    I've got a set of horizontal <li> elements, each with a <ul> submenu nested inside . The submenus need to pop up, still with horizontal positioning. Not too bad. However, the problem is that I need to center each submenu <ul> on the button it descends from. So the parent button is maybe 100 px wide, but the submenu could be anywhere from 150 to 500, with variable # of elements each of variable width.

    I've diagrammed the problem in an image that I attached below. Please take a look; any suggestions on how to do this would be greatly appreciated.

    Gracias,
    Evan

    (Edit: for great spelling!)
    Attached Thumbnails Attached Thumbnails CSS centering on smaller parent element-styling-challenge.png  
    Last edited by IdahoEv; 11-09-2008 at 04:00 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    If the top level menu is left aligned(read it from the attached image), then how do you center the submenu of the left most main elements(or of the first one)?
    Try something like http://www.cssplay.co.uk/menus/drop_line.html
    Last edited by abduraooft; 11-09-2008 at 02:06 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    If the top level menu is left aligned(read it from the attached image), then how do you center the submenu of the left most main elements(or of the first one)?
    Try something like http://www.cssplay.co.uk/menus/drop_line.html[/QUOTE]

    The top level menu is left aligned, but not to the left edge of the page. It starts about 30% away from the left edge and then extends to the right, and it can be anywhere from 4 to 6 buttons.

    So there is room (on the page anyway) for the sub-menu to extend past the left margin of the top menu, which is the way the designer has drawn it.

    The one you linked just aligns all the submenus with the left edge of the parent <ul>. This unfortunately will look pretty bad in some of the cases where the 3rd or 4th button only has 1 submenu item.


  •  

    Posting Permissions

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