Foros del Web » Creando para Internet » CSS »

menus botones cuadrados independientes

Estas en el tema de menus botones cuadrados independientes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/07/2009, 15:50
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
menus botones cuadrados independientes

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?
  #2 (permalink)  
Antiguo 06/07/2009, 16:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menus botones cuadrados independientes

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 06/07/2009, 17:05
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

gracias kseso
  #4 (permalink)  
Antiguo 07/07/2009, 18:43
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

por favor alguien me puede poner ejemplo de codigo de menus con botones cuadrados separados entre ellos, soy principiante en css. Os lo agradeceria.
  #5 (permalink)  
Antiguo 07/07/2009, 19:46
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: menus botones cuadrados independientes

Me parece que Kseso? te dio un buen punto de partida.
Busca un menu horizontal rectangular y modificalo.
  #6 (permalink)  
Antiguo 07/07/2009, 20:31
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

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.
  #7 (permalink)  
Antiguo 07/07/2009, 21:12
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

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?
  #8 (permalink)  
Antiguo 08/07/2009, 00:18
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: menus botones cuadrados independientes

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.
  #9 (permalink)  
Antiguo 08/07/2009, 05:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menus botones cuadrados independientes

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 08/07/2009, 07:45
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

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
  #11 (permalink)  
Antiguo 08/07/2009, 09:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menus botones cuadrados independientes

Mira a ver estas modificaciones:
Código css:
Ver original
  1. #navlist li {
  2. display:table;
  3. float:left;
  4. height:8em;
  5. list-style-type:none;
  6. margin:15px;
  7. width:8em;
  8. }
  9. #navlist a {
  10. display:table-cell;
  11. height:100&#37;;
  12. position:relative;
  13. text-align:center;
  14. vertical-align:middle;
  15. }
Ahora edito y vamos con los colores distintos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 08/07/2009, 09:37
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

gracias, kseso pero me sale un menu vertical simple con solo los enlaces basicos.
  #13 (permalink)  
Antiguo 08/07/2009, 09:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menus botones cuadrados independientes

Cita:
Iniciado por trevol Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #14 (permalink)  
Antiguo 08/07/2009, 10:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

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
  #15 (permalink)  
Antiguo 08/07/2009, 11:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menus botones cuadrados independientes

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin:0;padding:0; border:0; outline:none; position: relative;}
  7. ul#navlist {
  8. margin-left: 50px;
  9. padding-left:150px ;
  10. }
  11.  
  12. #navlist li  {
  13. display:table;
  14. float:left;
  15. height:8em;
  16. list-style-type:none;
  17. margin:15px;
  18. width:8em;
  19. }
  20.  
  21. #navlist a {
  22. display:table-cell;
  23. height:100%;
  24. position:relative;
  25. text-align:center;
  26. vertical-align:middle;
  27. text-decoration: none;
  28. color: #444;
  29. border: 1px inset #660;
  30. }
  31.  
  32. #navlist a:link.uno {background: #63f;}
  33. #navlist a:link.dos {background: #93f;}
  34. #navlist a:link.tres {background: #f3f;}
  35. #navlist a:link.cuatro {background: #39f;}
  36. #navlist a:link.cinco {background: #c9f;}
  37.  
  38. #navlist a:hover {
  39. color:#cdcdcd;
  40. border: 1px outset #69f;
  41. }
  42.  
  43. #navlist a:hover.uno {background: #600;}
  44. #navlist a:hover.dos {background: #900;}
  45. #navlist a:hover.tres {background: #f00;}
  46. #navlist a:hover.cuatro {background: #360;}
  47. #navlist a:hover.cinco {background: #c60;}
  48. </head>
  49. <div id="navcontainer">
  50. <ul id="navlist">
  51. <li><a class="uno" href="#">Item one</a></li>
  52. <li><a class="dos" href="#">Item two</a></li>
  53. <li><a class="tres" href="#">Item three</a></li>
  54. <li><a class="cuatro" href="#">Item four</a></li>
  55. <li><a class="cinco" href="#">Item five</a></li>
  56. </ul>
  57. </div>
  58. </body>
  59. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 08/07/2009 a las 11:28
  #16 (permalink)  
Antiguo 08/07/2009, 12:04
 
Fecha de Ingreso: agosto-2008
Mensajes: 580
Antigüedad: 9 años, 4 meses
Puntos: 11
Respuesta: menus botones cuadrados independientes

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
  #17 (permalink)  
Antiguo 08/07/2009, 12:12
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: menus botones cuadrados independientes

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 08/07/2009, 13:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: menus botones cuadrados independientes

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:54.