* {
border: 0px;
margin: 0px;
padding: 0px;
}
body {
background-color: #FFC;
}
#wrapper {
width:70%;
margin: 0% auto;
}

#header {
background-color: #C1D1FD;
padding: 3%;
}

#nav {

clear:both;
padding: auto;
position:inherit;
background-color:#F0D5AA;
width: auto;

}
#nav ul {
list-style-type:none;

}

#nav a {
display:block;
float:left;
padding:0%;
width:20%;
background-color:#F60;
border-bottom:1px #fff solid;

}

#content {
padding:7%;
margin-left: 20%;
background-color:#fff;

}

#footer {
background-color: #C1D1FD;
padding: 2%;
text-align:center;
}

CÓDIGO HTML:

<form id="form1" runat="server">
<div id="wrapper">
    <div id="header">
        <h1>Welcome to our Website</h1>

    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div> <!-- end nav-->
    </div> <!-- end header-->
    <div id="content">
        <h2>Page Heading</h2>
        <p>welcome</p>
        <p>welcome</p>
        <p>welcome</p>
    </div> <!-- end content-->
    <div id="footer">
        <p>Copyright 2010</p>
    </div> <!-- end footer-->
</div><!-- end wrapper-->
</form>

Hola, este es mi CSS & código HTML, estoy tratando de hacer mi barra de navegación debajo de la barra de encabezado. pero navbar resultado aparece como zagged como escaleras. ¿Cómo puedo hacer que mi barra de navegación, botones recta?
Gracias por el consejo,

  • Aquí está el jsfiddle enlace para el marcado y la barra de navegación se ve directamente en chrome y IE9.
  • Hola Bala, gracias por la ayuda, muchas gracias:) por desgracia se debería estar trabajando jeje..gracias:)
InformationsquelleAutor jan | 2012-02-13

3 Comentarios

  1. 1

    Me erradicado la stairstep problema mediante la eliminación de una línea en el original código CSS. Comentario la position:inherit; instrucción dentro de la #nav bloque.

  2. 0

    Intentar eliminar esta :display:block;
    y set #nav ul li a display:inline;

    este código es de woking, pero se puede cambiar para que se ajuste a sus necesidades:

    #nav {
    background-color:#F0D5AA;
    }
    #nav ul {
    list-style-type:none;
    padding-top:3px;
    padding-bottom:3px;
    }
    #nav ul li {
    display:inline;
    }
    #nav a:link, a:visited {
    text-align:center;
    padding:3px;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here