El primer problema es que no puedo centrar la barra de menú dentro del div en el que se encuentra.
By [URL=http://profile.imageshack.us/user/saguilera85]saguilera85[/URL] at 2012-09-10
El segundo problema es con los submenus desplegables ya que cuando paso el cursor por encima del menú en lugar de desplegar el sub-menú hacia abajo lo hace hacia un costado.
By [URL=http://profile.imageshack.us/user/saguilera85]saguilera85[/URL] at 2012-09-10
Ya he probado con float, position, hacer otro div, y algunas cosas mas que he encontrado tanto en este foro como en otros, pero no doy con el error.
Les dejo el código HTML:
Código:
Aquí el código CSS:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ejemplo</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" title="style.css" type="text/css" href="style.css"> </head> <body> <div id="cabezera"> <p><img alt="Logotipo" src=""></p> </div> <div id="contenido"> <div id="menu"> <ul id="botones"> <li><a href="index.html">Inicio</a></li> <li><a href="nosotros.html">Nosotros</a></li> <li><a href="servicios.html">Servicios</a></li> <li><a href="productos.html">Productos</a> <ul> <li><a href="producto1.html">Producto 1</a></li> </ul> </li> <li><a href="contacto.html">Contacto</a></li> </ul> </div> <h1>Encabezado 1</h1> <p>Contenido</p> <h1>Encabezado 2</h1> <p>Contenido</p> <div id="pie"> <div id="copyright"> <p>Diseñado por <a href="yo">Yo</a></p> <p>© 2012 Todos los Derechos Reservados</p> </div> <div id="redes"> <p>Síguenos en... <a href="https://twitter.com/"><img alt="Logo Twitter" src="images/twitter.png"></a> <a href="http://www.facebook.com/"> <img alt="Logo Facebook" src="images/facebook.png"></a></p> </div> </div> </div> </body> </html>
Código:
Espero me puedan sugerir alguna solución o algún tutorial, de antemano agradezco su tiempo y respuestas./*El fondo color de este color*/
body {
background-color: #dadada;
}
/*Aquí va el logo*/
#cabezera {
width: 800px;
margin-left: auto;
margin-right: auto;
}
/*Aquí Comienza el menú*/
#menu {
overflow: hidden;
width: 100%;
}
#botones {
padding: 0;
}
#botones li {
display: inline;
}
#botones li a {
font-family: Arial, Helvetica, serif;
font-size: 18px;
text-decoration: none;
float: left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
#botones li a:hover {
background-color: #2586d7;
margin-top: -2px;
padding-bottom: 12px;
}
/*Aquí empieza la configuración del Submenú*/
#botones li ul {
display: none;
position: absolute;
min-width: 140px;
}
#botones li:hover > ul {
display: block;
position: relative;
float: left;
}
/*La configuración del div que tiene todo el contenido de la página*/
#contenido {
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #595959;
border: solid 1px blue;
border-radius: 7px;
text-align: justify;
}
h1 {
margin-left: 10px;
font-family: Verdana, Helvetica, serif;
color: #fff;
}
p {
margin-left: 10px;
margin-right: 10px;
font-family: Arial, Helvetica, serif;
color: #fff;
}
span {
font-family: Verdana, Helvetica, serif;
color: #fff;
}
/*Aquí van el Copyright y las Redes Sociales*/
#pie {
font-family: Verdana, Helvetica, "sans serif";
font-size: 12px;
line-height: 3px;
overflow: hidden;
width: 100%;
}
#copyright {
height: inherit;
float: left;
}
#redes {
height: inherit;
float: right;
}
Saludos !!!!!
