Matej Posted April 23, 2015 Share Posted April 23, 2015 Hello i have html structure <article><nav> <ul> <li><a href="">Auto</a> </li> <li><a href="">Moto</a> </li> <li><a href="">Music</a> </li> <li><a href="">Brm</a> </li> </ul></nav></article> and css * { margin:0; padding:0; } body { background-color:lightblue;position:relative;}html,body{ width:100%;height:100%; }article{ width:100%;height:100%}nav { //margin-top:100px; //margin-left:28.125%; margin: 100px auto; max-width:500px; height:100px; position:absolute; } ul { width:100%; height:100px; position:relative; margin:auto; } ul li { text-decoration:none; list-style-type:none; float:left; height:100px; width:100px; position:relative; -webkit-transition: .7s ease all; border:1px solid black; border-radius:100%; text-align:center; line-height:6em; margin:8px; padding-left:7px; background-color:#FFFF99 } ul li a { display:block; text-decoration:none; width:100%; height:100% } what i want to do , is make nav being in the middle of article - viz. margin:auto , but it doesnt work. Im making a responsible menu. I tried to do it with media queris viz but it does not look that good viz. @media screen and (max-width: 960px) { nav {max-width:400px;height:75px; margin-left:26.08%; } ul li{height:75px;max-width:75px;line-height:4.5em;} }@media screen and (max-width: 760px) {nav{max-width:350px;height:50pxmargin-left:28%}ul li{height:50.5px;width:50.5px;line-height:2.5em;}} Any help please ? Link to comment Share on other sites More sharing options...
davej Posted April 24, 2015 Share Posted April 24, 2015 Absolute positioning and margin? Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted April 24, 2015 Share Posted April 24, 2015 (edited) The nav will not set margins to auto based on that code because you have not specified a width. The browser cannot calculate the values for the margins unles it has a width specified that it can use in the calculation. Plus the position absolute overrides everything to do with position and is just aboute the worst posible property to use on a page that you want to be responsive. Edited April 24, 2015 by COBOLdinosaur Link to comment Share on other sites More sharing options...
Matej Posted April 25, 2015 Author Share Posted April 25, 2015 fixd thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now