Jump to content

margin auto


Matej

Recommended Posts

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

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 by COBOLdinosaur
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...