Pueden ver el efecto en www.taringa.net ; si reducen el ancho de la ventana los elementos de la barra de navegación se desplazan hacia la derecha u izquierda. Pensé que con "margin-left/right : auto" funcionaría pero no.
Los mios se quedan fijos, aqui mi código:
Código HTML:
<body> <header > <div class="container"> <div id="logo" > <a href="index.html" ><img id="img1" src="images/logo.png" ></img> </a> <a href="index.html" ><img id="img2" src="images/logo-mobile.png"></img><img id="img3" src="images/menu.png"></img></a> </div> </div> <div class="container"> <nav> <ul> <li><a href="">algo</a></li> <li><a href="">algo</a></li> <li><a href="">algo mas</a></li> <li><a href="">algo mas</a></li> </ul> </nav> </div> </header> <body> </body>
Código:
.container { margin-left: auto; margin-right: auto;} #img1{ display:block; z-index:1; margin-left:170px; } #img2{ display:none; z-index:-1; } #img3{ display:none;} #logo{ height: 79px; width:100%; background: green url('fondo.png') repeat; } nav{ padding: 0.5em 1em 0.01em; display:inline-block; width:100%; height:60px; background-color:#F6E3CE; } nav ul li { letter-spacing: 0.09em; text-transform: uppercase; padding-left:2em; } nav ul li a { text-decoration:none; color:black; } li {font-family:'Questrial','Arial'; }