Menú de navegación con listas

marvync · #1 (**permalink**) 10/12/2011, 12:09

Buenas a todos, soy nuevo en el foro y ya tengo mi primera duda:

Estoy intentado hacer este menú de navegación usando listas :

http://imageshack.us/photo/my-images/853/grrnr.jpg/

y me esta dando mas de mil y un problemas, el primero k deseo k los 4 botones tengan el mismo tamaño y pero no me sale. =(

espero puedan ayudarme, si es posible talves me puedan mostrar el codigo para hacer este menu y asi yo poder estudiarlo. ya son 2 dias y no me sale xD!!

Muchas gracias..

ZoroRoronoa · #2 (**permalink**) 10/12/2011, 12:48

Pon el codigo que llevas (: para ver por que no te sale (:

cristian_cena · #3 (**permalink**) 10/12/2011, 12:48

Hola marvync, pasanos el código y te ayudamos. saludos.

marvync · #4 (**permalink**) 10/12/2011, 13:15

---------------- html ---------------------------

<div id="menus">
<ul>
<li>Portada</li>
<li>Portafolio</li>
<li>Testimonios</li>
<li>Contacto</li>
</ul>
</div>
--------------------------- Css --------------------------

* {
padding: 0;
margin: 0 auto;

}
body {
background-color: brown;
text-align; center;
}

#menus {
position: relative;
width: 725px;
top: 180px;
}
#menus ul {

height: 240px;
background-color:#9F1A1A;
text-align: center;

}
#menus ul li {
display: inline;
font-size: 42px;
font-family: "MoolBoran";
}
---------------------------------------------------------------

Como ven muchachos no tengo mucho código,( paro borrando código cuando no me sale y empiezo a probar otras maneras); unos de mis problemas es justo el tamaño de los botones, necesito k tengan el mismo ancho independienemente de las letras, como se ve en la imagen k he puesto.

cristian_cena · #5 (**permalink**) 10/12/2011, 14:06

Prueba con esto, el código está comentado.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        * { padding: 0; margin: 0; } /*margin:0 auto; no es bueno darselo a todos los elementos, ya que por defecto estarías centrando todo*/
        
        #menus {
            position: relative;
            width: 697px;
            top: 180px;
            margin: 0 auto;
        }
        /*overflow:hidden, xq el ul contendrá li flotados*/
        #menus ul {
            height: 198px;
            background-color:#9F1A1A; 
            overflow:hidden;  
        }
        /*flotamos los li, damos ancho fijo, centramos vertical con line-height (nota como line-height es igual a height) y horizontal con text-align*/    
        #menus ul li{
            width:174px;
            float:left;
            font-size: 42px;
            font-family: "MoolBoran";
            text-align:center;
            line-height:198px;
            list-style:none;
        }
        /*convertimos a bloque el enlace para darle alto y ancho*/        
        #menus ul li a{
            display:block;
            width:174px;
            height: 198px;
            color:#fff;
            text-decoration:none;
        }
        #menus ul li a:hover{
            background:#2e2e2e;
        }
    </style>
</head>
<body> 
    <div id="menus">
        <ul>
            <!-- necesitaras <a> (enlaces) para el menú-->
            <li><a href="#">Portada</a></li>
            <li><a href="#">Portafolio</a></li>
            <li><a href="#">Testimonios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </div>
</body>
</html>

marvync · #6 (**permalink**) 10/12/2011, 15:08

cristian_cena ¡¡¡Muchas Gracias!!!!!, ya estoy empezando a amar esta web, por 2 días intentando hacer esto y me salvaste, gracias, apenas empieze a dominar xhtml y css, no dudes k también ayudaré a quien lo necesite , pero por ahora, solo tengo dudas ¬¬!

Gracias de nuevo ;)

ZoroRoronoa · #7 (**permalink**) 10/12/2011, 15:59

Algo que aprender.

Toma en cuenta que "ul" es la lista (el contenedor de los "li")
Asi que hay que darle una altura a los "li".

En este caso CristianCena, dentro de los "li" puso algunos "a" y ha esos "a" los convirtió en bloque (display:block;) para poder asignarle una altura y un ancho.

Saludos.

cristian_cena · #8 (**permalink**) 10/12/2011, 17:08

exacto, gracias por la aclaración ZoroRoronoa, cierto que sería mejor dar el line-height a "#menus ul li a" en lugar de dárselo al "li", ya que el height y el texto pertenecen al enlace.

un gusto que te haya servido marvync.

Saludos.