Desplazamiento del menu.

[esnalca]

Hola:

Mi problema es que al hacer mas pequeña la pantalla del navegador el menu de la cabecera se me desplaza a la izquierda cuanto mas pequeña se hace la pantalla. Que propiedad hay que darle al css para que se mantenga fijo y no se mueva.

Muchas gracias

[JairLizcano]

Pues, estás obviando muchas cosas. Pero la solución más básica podría ser asignar un ancho fijo al contenedor del menú. A su vez podrías usar tamaños relativos en cada opción del menú en conjunto de la propiedad display valorada en inline-block; para que estos se adapten al tamaño de la ventana por pequeña que sea, aún así, también podrías hacer relativo el tamaño del texto.

Si das algo más de detalles del caso, te podré ayudar con más claridad.

[esnalca]

Mira yo tengo este header en HTML:

Código HTML:

 <header class="principal">
      <div class="fila">
          <a href="#" class="logo">Logo</a>
          <nav class="nav_princ">
          	<ul>
              <li><a class="inicio" target="_self" style="cursor: pointer;">Inicio</a></li>
               <li><a class="desc" href="#">Descripcion</a></li>
               <li><a class="blog" href="#">Blog</a></li>
               <li><a class="contc" href="#">Contacto</a></li>
            </ul>   
          </nav>
      </div>
   </header> 

Y luego este es mi CSS y lo que me pasa es que el nav_princ cuando ago mas pequeña la pantalla se me desplaza en vez de esconderse.

Código:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, strong, ul, li, article, footer, header, nav, section
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    overflow: none;
}

article, footer, header, nav, section 
{
    display: block;
}

body 
{ 
    font: 25px sans-serif; 
    font-size:small;
}

html 
{ 
    width: 100%;
    background: white scroll; 
    overflow-y: scroll;
    z-index: 500;
    max-width: 1500px;
}

a, a:hover, a:active 
{ 
    outline: none;
}

ul
{ 
    margin-left: 2em;
}

nav ul, nav li 
{ 
    margin: 0; 
    list-style:none; 
    list-style-image: none;
}


body
{
    font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:400;
    font-style: normal; 
    font-size:15px; 
    line-height:21px;
}

h1, h2, h3, h4, h5, h6 
{
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif  
}

a, a:active, a:visited 
{ 
    text-decoration:none;
}

a:hover 
{ 
    text-decoration:underline;
}


/** Header**/

header.principal
{
    width: 100%;
    height: 125px;
    float: left;
    margin-top: 2%;
    }

a.logo
{
    border: 1px solid white;
    width: 550px;
    height: 70px;
    clear: left;
    float: left;
    margin: 30px 50px;
    background:transparent url(../img/logo.png) no-repeat 0 0;
    font-size: 0;
}

a.logo:hover
{
    width: 550px;
    height: 70px;
    clear: left;
    float: left;
    margin: 30px 50px;
    background:transparent url(../img/logo_hover.png) no-repeat 0 0;
    font-size: 0;
}

nav.nav_princ
{
    border: 1px solid white;
    width: 550px;
    height: 55px;
    float:left;
    margin-top: 30px;
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size:18px;
    color: #4A4A4A;
    text-shadow: #4A4A4A 0 1px 0;
}

nav.navegacion_principal 
{
    height:42px;
    float:left;
    font-family:Rockwell, 'GeoSlb712MdBTMedium',"Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size:18px;
    color:#3b3b3b;
    text-shadow:#fff 0 1px 0;
    line-height:42px;
    font-weight:400; 
    border:thin solid #e9e9e9; 
    border-width:0 0 0 1px;
}

nav.nav_princ ul li 
{
    clear:right;
    float:left;
    margin: 0 10px;
    font-size: 0px;
}

a.inicio
{
    width: 90px;
    height: 50px;
    background: url(../img/inicio.png);
    float: left;
}

a.blog
{
    width: 90px;
    height: 50px;
    background: url(../img/blog.png);
    float: left;
}

a.desc
{
    width: 140px;
    height: 50px;
    background: url(../img/desc.png) no-repeat;
    float: left;
}

a.contc
{
    width: 140px;
    height: 50px;
    background: url(../img/contac.png) no-repeat;
    float: left;
}

a.inicio:hover
{
    width: 90px;
    height: 50px;
    background: url(../img/inicio_hover.png);
    float: left;
}

a.blog:hover
{
    width: 90px;
    height: 50px;
    background: url(../img/Blog_hover.png);
    float: left;   
}

a.desc:hover
{
    width: 140px;
    height: 50px;
    background: url(../img/desc_hover.png) no-repeat;
    float: left;
}

a.contc:hover 
{
    width: 140px;
    height: 50px;
    background: url(../img/contac_hover.png) no-repeat;
    float: left;
}