Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS dynamic width centered

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #37404
    shamai
    Member

    i watned to center a dynamic width menu.
    normally I would give a width to the ul and margin auto.

    so instead I used this trick where I

    nav ul{
    margin: auto;
    position:relative;
    float: left;
    text-align:center;
    display:block;
    left: 50%; /*this moves the ul to the right in its container*/
    }

    nav ul li{
    float: left;
    position:relative;
    right: 50%; /*this pulls the li's to the left and centers it on the page*/

    }

    great it works.

    but then there seems to be a problem. the ul is still really over to the right, and you can see its container if you inspect elements. and i have more links to the right but you cant press them because they are under the ul.
    but i want them to be under the ul because aesthetically it needs to be

    #100205
    shamai
    Member

    sigh… you need a visual don’t you?

    http://dl.dropbox.com/u/1090829/wpbaseshamai/index.html

    the website is obviously not even near done but checkout the list items up top. the ones to the right(with fabric) are centered and its dynamic just in case i want to add more li’s it will stay centered.

    but the list to the right is inaccessible because I wanted it to be under the fabric and gave it a z-index under the fabric

    #100206
    shamai
    Member

    i could but the green underneath and then place the list on top on a separate div…
    ok never mind I think I figured out what I can do

    I wish it were possible to make children elements have a higher z-index than the parent

    #100227
    xpy
    Participant

    @shamai There are many things you can do (of course). Never forget that the list to the right doesn’t really need to be under the fabric to give the feeling that it is under the fabric… Anyway… A quick solution (that I think is not ie compatible) is to use pointer-events:none; on the .wrap>ul and pointer-events:auto on the .wrap>ul>li …

    But I would suggest you should rearrange your elements…

    Here is more for pointer-events.

    #100229

    Children naturally have a higher z-index than their parents.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.