menus botones cuadrados independientes

trevol · #1 (**permalink**) 06/07/2009, 14:50

Hola amigos el css lo tengo un poco debil y ahoraa necesito aprender. Alguien sabe como hacer un menu horizontal con botones cuadrados y separados entre ellos?

kseso? · #2 (**permalink**) 06/07/2009, 15:33

Hola Trevol
Demasiado genérica tu consulta, prácticamente imposible que se pueda ofrecer una respuesta concreta.
En las faq´s de css tienes una colección amplia de menús realizados por Mikmoro. Posiblemente encuentres cómo adaptar alguno a tus necesidades.

Pero si no lo quieres tan completo, (con opciones desplegables) bastará con que hagas una "lista" (ul) y a sus elementos (li) le des la misma anchura que altura y la separación la conseguirás con el oportuno margen.

Un saludo

trevol · #3 (**permalink**) 06/07/2009, 16:05

gracias kseso

trevol · #4 (**permalink**) 07/07/2009, 17:43

por favor alguien me puede poner ejemplo de codigo de menus con botones cuadrados separados entre ellos, soy principiante en css. Os lo agradeceria.

C2am · #5 (**permalink**) 07/07/2009, 18:46

Me parece que Kseso? te dio un buen punto de partida.
Busca un menu horizontal rectangular y modificalo.

trevol · #6 (**permalink**) 07/07/2009, 19:31

Bién c2am estoy de acuerdo contigo, gracias pero ya hice caso de kseso lo que pasa que el menu que tengo es rectangular y yo quiero que sus botones sean cuadrados y un poco mas grandes, solo necesito saber cual es la etiqueta css que tengo que modificar.

trevol · #7 (**permalink**) 07/07/2009, 20:12

ya he dado con la solucion, muchas gracias c2cam y kseso, pero sabeis como puedo darles color independientes a cada boton y como puedo separar mas los cuadrados? en que etiquetas?

C2am · #8 (**permalink**) 07/07/2009, 23:18

Pon el codigo que estas usando y en base a él es más fácil ayudarte.
Las etiquetas que controlan el ancho y alto son width y height , que al ser un cuadrado deberian ser iguales.
Los margenes los cambias con margin-left, etc.
Pon el código de tu hoja de estilo.

kseso? · #9 (**permalink**) 08/07/2009, 04:48

Hola Trevol.
Disculpa la ~~putadita~~

de hacerte trabajar un poquito el css. Veo que vas descubriendo cosas por ti mismo.

la separación de cada "botón" (si el menú lo has hecho con ul/li) la consigues dando el "margin" a los "li".
El color es a base de aplicar una clase distinta a cada "li".
Pero mejor pon el código que estas usando, como te dice C2am, (o un enlace si lo tienes en red), que creo que te has ganado un trocito de código ya hecho

Un saludo

P.D.: ¿Te he hablado ya de los manuales en .pdf que hay en www.librosweb.es ? Te vendrán muy bien.

trevol · #10 (**permalink**) 08/07/2009, 06:45

hola amigos el codigo es el siguiente:

html

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

</body>

y el css

ul#navlist
{
margin-left: 50px;
padding-left:150px ;
white-space: 10px;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 50px, 10px; }

#navlist a:link, #navlist a:visited
{
color:;
background-color:#CC0000 ;
text-decoration: none;
}

#navlist a:hover
{
color:#FF0000;
background-color: #369;
text-decoration: none;
}

lo que quiero es dejar margen por arriba, separar los botones y aplicar color distinto a cada uno. Muchas gracias amigos, me estais sacando de un apuro

kseso? · #11 (**permalink**) 08/07/2009, 08:22

Mira a ver estas modificaciones:

Código css:

Ver original#navlist li {
display:table;
float:left;
height:8em;
list-style-type:none;
margin:15px;
width:8em;
}
#navlist a {
display:table-cell;
height:100&#37;;
position:relative;
text-align:center;
vertical-align:middle;
}

Ahora edito y vamos con los colores distintos.

trevol · #12 (**permalink**) 08/07/2009, 08:37

gracias, kseso pero me sale un menu vertical simple con solo los enlaces basicos.

kseso? · #13 (**permalink**) 08/07/2009, 08:52

Cita:

Iniciado por trevol

gracias, kseso pero me sale un menu vertical simple con solo los enlaces basicos.

¿quisiste decir horizontal, no?

Trevol, ¿qué quieres hacer? aparte de que los botones sean cuadraros y separados entre ellos (con margin).
¿Necesitas un menú con opciones desplegables?
Si es así, mira a ver cuál se ajusta mejor a tus necesidades de los que tiene publicados Mikmoro:
En las faq´s
En www.araudi.net
En este tema

Escoge el que mejor se acomode a tus necesidades, y después sólo será cuestión de añadir algún margen y la altura y anchura de las opciones.

Pero recuerda la máxima: se hace un cambio en el código y se verifica que todo funciona. Así es más fácil corregir los errores y no destrozarlo todo

Un saludo

trevol · #14 (**permalink**) 08/07/2009, 09:21

Lo unico que me falta es poner los botones cada uno de un color, situar el munu mas abajo de la pagina (con margen arriba) y la separacion entre los botones seguire probando

kseso? · #15 (**permalink**) 08/07/2009, 10:23

Bueno trevol.
Lo prometido es deuda.
Aquí tienes los botones cuadrados alineados horizontalmente, con separación entre ellos, y cada uno con su color:

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" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none; position: relative;}
ul#navlist {
margin-left: 50px;
padding-left:150px ;
}
 
#navlist li  {
display:table;
float:left;
height:8em;
list-style-type:none;
margin:15px;
width:8em;
}
 
#navlist a {
display:table-cell;
height:100%;
position:relative;
text-align:center;
vertical-align:middle;
text-decoration: none;
color: #444;
border: 1px inset #660;
}
 
#navlist a:link.uno {background: #63f;}
#navlist a:link.dos {background: #93f;}
#navlist a:link.tres {background: #f3f;}
#navlist a:link.cuatro {background: #39f;}
#navlist a:link.cinco {background: #c9f;}
 
#navlist a:hover {
color:#cdcdcd;
border: 1px outset #69f;
}
 
#navlist a:hover.uno {background: #600;}
#navlist a:hover.dos {background: #900;}
#navlist a:hover.tres {background: #f00;}
#navlist a:hover.cuatro {background: #360;}
#navlist a:hover.cinco {background: #c60;}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="uno" href="#">Item one</a></li>
<li><a class="dos" href="#">Item two</a></li>
<li><a class="tres" href="#">Item three</a></li>
<li><a class="cuatro" href="#">Item four</a></li>
<li><a class="cinco" href="#">Item five</a></li>
</ul>
</div>
</body>
</html>

trevol · #16 (**permalink**) 08/07/2009, 11:04

Gracias querido amigo no te doy dos besos porque no estas aqui. Ahora solo tengo que arreglarlo un poquillo y ya esta. por cierto porque en mi editor dreamweaber en la parte del diseño no se ve bien y en el navegador si ? Te he dado karma porque tu lo vales, eres un crack

kseso? · #17 (**permalink**) 08/07/2009, 11:12

Trevol, me ruborizas

Dw no lo conozco, nunca lo he usado. Prefiero editores de texto, utilizo PSPad, y para verlo FF (u otros).

Varios usuarios de FdW ya han comentado reiteradamente de los fallos de Dw en la vista de diseño. Pero no se a qué se deberá. Usa un navegador para ello.

Hasta la próxima

C2am · #18 (**permalink**) 08/07/2009, 12:34

kseso? un Maestro!!, que te da tarea y todo.

Señor.
Es cierto lo del DW, te muestra las cosas dezplazadas, y cuando se usa php no te las muestra, así que lo mejor es siempre darle al F12 para ver la página desde el navegador, que al fin y al cabo es donde se mostrará. E incluso puedes gestionar con que navegadores quieres trabajar.