Foros del Web » Creando para Internet » CSS »

problema con alineacion y estilos de menus

 Estas en el tema de problema con alineacion y estilos de menus en el foro de CSS en Foros del Web. hola amigos tengo el siguiente código y me gustaría que me ayudaran con el. El problema es que el menu horizontal no se le ven ...
  #1 (permalink)  
Antiguo 26/08/2009, 09:35
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
problema con alineacion y estilos de menus
hola amigos tengo el siguiente código y me gustaría que me ayudaran con el.

El problema es que el menu horizontal no se le ven los estilos aunque su situacion y alineacion es la que quiero.

Y al menu vertical tampoco se le aplican los estilos y ademas me gustaria alinearlo a la izquierda un poco mas abajo del menu vertical que se vea a su lado.

Os dejo el codigo:
Código HTML:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>prueba foro</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: 150px;
padding-left:100px ;
margin-top:130px;} 
 
#navlist li  {
display:table;
float:left;
height:4em;
list-style-type:none;
margin:15px;
width:4em;
}
 
#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.item1 {background: #ff0000;}
#navlist a:link.item2 {background: #00ff00;}
#navlist a:link.item3 {background: #0000ff;}
#navlist a:link.item4 {background: #ffff00;}
#navlist a:link.item5 {background: #ff3300;}
 #navlist a:hover {
color:#ff3300;
border: 1px outset #69f;
}

 
#navlist a:hover.item1 {background: #ff0033;}
#navlist a:hover.item2{background: #99ff00;}
#navlist a:hover.item3{background: #0033ff;}
#navlist a:hover.item4 {background: #ffff33;}
#navlist a:hover.item5 {background: #ff6600;}

#navlist a:visited.item1 {background: #ff0000;}
#navlist a:visited.item2{background: #00ff00;}
#navlist a:visited.item3 {background: #0000ff;}
#navlist a:visited.tem4 {background: #ffff00;}
#navlist a:visited.item5{background: #ff3300;}
#cabezeras { margin: 50;50;50;}

.contenedor {
padding-top: 220px;
margin-left: 280px ;
margin-right: 210px;
clear:both; }

#cabezeras { margin: 50;50;50;}


.menuvertical{

list-style: none;
margin:40px ;
padding:0,46p;

}





.menuvertical li a { text-decoration: none; }



.menuvertical a:link.item6 {color: #ff0000; font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item7 {color:#9966CC;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item8{color: #0000ff;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item9 {color: #ffff00;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item10 {color: #ff3300;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
 .menuvertical a:hover {
color:#ff3300;
border: 1px outset #69f;
}

 
#navlist a:hover.item6 {background:ff0033;}
#navlist a:hover.item7 {background: #99ff00;}
#navlist a:hover.item8 {background: #0033ff;}
#navlist a:hover.item9 {background: #ffff33;}
#navlist a:hover.10 {background: #ff6600;}

#navlist a:visited.item6{background: #ff0000;}
#navlist a:visited.item7 {background: #00ff00;}
#navlist a:visited.item8 {background: #0000ff;}
#navlist a:visited.item9 {background: #ffff00;}
#navlist a:visited.item10 {background: #ff3300;}
#cabezeras { margin: 50;50;50;}





</style>





</head>
<div id="navcontainer">
<ul id="navlist">
    <li><a class="item1" href="#"> 1</a></li>
    <li><a class="item2" href="#" >2</a></li>
    <li><a class="item3" href="#">Item three</a></li>
    <li><a class="item4" href="#">Item four</a></li>
    <li><a class="item5" href="#">Item five</a></li>
</ul>
</div>
<div class="contenedor">


<h1> el texto Empieza aquí</h1> 

 <div class="menuvertical">
 
<ul class="menuvertical">
<li ><a class="item6" href="#" >iten 1 </a></li>
<li><a class="item7" href="#">iten 2</a></li>
<li><a class="item8" href="#">iten 3</a></li>
<li><a class="item9" href="#">iten 4</a></li>
<li><a class="item10" href="#">iten 5</a></li>
</ul>
</div>

<body>

</body>
</html>
Última edición por trevol; 27/08/2009 a las 04:56 Razón: corrección de codigo.
  #2 (permalink)  
Antiguo 26/08/2009, 10:15
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problema con alineacion y estilos de menus
Una clase no puede comenzar por un número:
Cita:
<li><a class="6"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 26/08/2009, 10:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
no es ese el problema kseso?, se le puede cambiar y no quedaria alineado el menu vertical donde quiero.
  #4 (permalink)  
Antiguo 26/08/2009, 10:51
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problema con alineacion y estilos de menus
Trevol, los estilos no te los toma porque una clase no puede comenzar por un número. Pásalo por el validador de css para que veas lo que opina. Y puedes usar firebug para darte cuenta de que todas esas clases no son aplicadas (el navegador las ignora).
Abres dos veces <div class="menu vertical"> y una no la cierras.
Vuelves a abrir <body> justo antes de cerrarlo.
La alineación:
tienes duplicado la definición de '.menuvertical':
Cita:
.menuvertical {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:40px;
}

.menuvertical {
margin-left:200px;
margin-top:100px;
padding-left:0;
width:200px;
}
y le estás marcando unos márgenes de 200px a la izquierda y 100px arriba.
Añade a eso que #navcontainer no está declarado en el css y que los márgenes izquierdo de 'ul#navlist' y de '.contenedor' son distintos.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 26/08/2009, 11:07
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Gracias Kseso?, lo que pasa es que con tus correcciones no consigo alinear el menu vertical



y me esta dando muchos problemas, todo lo demás ya esta corregido. como puedo poner el menú donde quiero?
  #6 (permalink)  
Antiguo 26/08/2009, 11:18
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problema con alineacion y estilos de menus
Clarifica ésto, Trevol:
Cita:
Y al menu vertical tampoco se le aplican los estilos y ademas me gustaria alinearlo a la izquierda un poco mas abajo del menu vertical que se vea a su lado
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 26/08/2009, 11:19
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 14 años, 9 meses
Puntos: 137
Respuesta: problema con alineacion y estilos de menus
line-height???...
http://www.librosweb.es/referencia/css/line-height.html
no entiendo
__________________
Toroflix - movies.
  #8 (permalink)  
Antiguo 26/08/2009, 11:41
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Kseso? lo quiero alinear el horizontal arriba y el vertical empezaria un poco mas abajo del horizontal a la izquierda.
  #9 (permalink)  
Antiguo 26/08/2009, 11:54
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problema con alineacion y estilos de menus
Ok, Trevol. Comprendidas tus intenciones: alineados en la vertical los dos menús.

Como ya has habrás hecho unos cuantos cambios a los códigos que publicaste al principio, colócalos de nuevo para trabajar con lo mismo que tienes tú.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 27/08/2009, 05:00
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Pongo el código corregido. Lo único que no consigo es separar los enlaces de el menú vertical entre ellos( separación de link) y alinear el menú vertical a la izquierda que empiece un poco mas abajo que el menú horizontal.



Os dejo el codigo:
Código HTML:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>prueba foro</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: 150px;
padding-left:100px ;
margin-top:130px;} 
 
#navlist li  {
display:table;
float:left;
height:4em;
list-style-type:none;
margin:15px;
width:4em;
}
 
#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.item1 {background: #ff0000;}
#navlist a:link.item2 {background: #00ff00;}
#navlist a:link.item3 {background: #0000ff;}
#navlist a:link.item4 {background: #ffff00;}
#navlist a:link.item5 {background: #ff3300;}
 #navlist a:hover {
color:#ff3300;
border: 1px outset #69f;
}

 
#navlist a:hover.item1 {background: #ff0033;}
#navlist a:hover.item2{background: #99ff00;}
#navlist a:hover.item3{background: #0033ff;}
#navlist a:hover.item4 {background: #ffff33;}
#navlist a:hover.item5 {background: #ff6600;}

#navlist a:visited.item1 {background: #ff0000;}
#navlist a:visited.item2{background: #00ff00;}
#navlist a:visited.item3 {background: #0000ff;}
#navlist a:visited.tem4 {background: #ffff00;}
#navlist a:visited.item5{background: #ff3300;}
#cabezeras { margin: 50;50;50;}

.contenedor {
padding-top: 220px;
margin-left: 280px ;
margin-right: 210px;
clear:both; }

#cabezeras { margin: 50;50;50;}


.menuvertical{

list-style: none;
margin:40px ;
padding:0,46p;

}





.menuvertical li a { text-decoration: none; }



.menuvertical a:link.item6 {color: #ff0000; font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item7 {color:#9966CC;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item8{color: #0000ff;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item9 {color: #ffff00;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
.menuvertical a:link.item10 {color: #ff3300;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
 .menuvertical a:hover {
color:#ff3300;
border: 1px outset #69f;
}

 
#navlist a:hover.item6 {background:ff0033;}
#navlist a:hover.item7 {background: #99ff00;}
#navlist a:hover.item8 {background: #0033ff;}
#navlist a:hover.item9 {background: #ffff33;}
#navlist a:hover.10 {background: #ff6600;}

#navlist a:visited.item6{background: #ff0000;}
#navlist a:visited.item7 {background: #00ff00;}
#navlist a:visited.item8 {background: #0000ff;}
#navlist a:visited.item9 {background: #ffff00;}
#navlist a:visited.item10 {background: #ff3300;}
#cabezeras { margin: 50;50;50;}





</style>





</head>
<div id="navcontainer">
<ul id="navlist">
    <li><a class="item1" href="#"> 1</a></li>
    <li><a class="item2" href="#" >2</a></li>
    <li><a class="item3" href="#">Item three</a></li>
    <li><a class="item4" href="#">Item four</a></li>
    <li><a class="item5" href="#">Item five</a></li>
</ul>
</div>
<div class="contenedor">


<h1> el texto Empieza aquí</h1> 

 <div class="menuvertical">
 
<ul class="menuvertical">
<li ><a class="item6" href="#" >iten 1 </a></li>
<li><a class="item7" href="#">iten 2</a></li>
<li><a class="item8" href="#">iten 3</a></li>
<li><a class="item9" href="#">iten 4</a></li>
<li><a class="item10" href="#">iten 5</a></li>
</ul>
</div>

<body>

</body>
</html>
Última edición por trevol; 27/08/2009 a las 05:04 Razón: correccion
  #11 (permalink)  
Antiguo 27/08/2009, 05:32
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problema con alineacion y estilos de menus
A ver si he entendido y acertado, Trevol.
Menú vertical alineado en la vertical con el principio del menú horizontal y algo mas de separación vertical entre las opciones del menú vertical.

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. <head>
  4. <title>Kseso? jugando con css</title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. * {margin: 0; padding:0; outline: none; border: 0;}
  8. #navcontainer {
  9. margin: 30px 0 0 150px;
  10. overflow: auto;
  11. }
  12.  
  13. ul#navlist {}
  14.  
  15. #navlist li  {
  16. display:table;
  17. float:left;
  18. height:4em;
  19. list-style-type:none;
  20. margin-right:15px;
  21. width:4em;
  22. }
  23.  
  24. #navlist a {
  25. display:table-cell;
  26. height:100%;
  27. position:relative;
  28. text-align:center;
  29. vertical-align:middle;
  30. text-decoration: none;
  31. color: #444;
  32. border: 1px inset #660;
  33. }
  34.  
  35. #navlist a:link.item1 {background: #ff0000;}
  36. #navlist a:link.item2 {background: #00ff00;}
  37. #navlist a:link.item3 {background: #0000ff;}
  38. #navlist a:link.item4 {background: #ffff00;}
  39. #navlist a:link.item5 {background: #ff3300;}
  40. #navlist a:hover {
  41. color:#ff3300;
  42. border: 1px outset #69f;
  43. }
  44.  
  45. #navlist a:hover.item1 {background: #ff0033;}
  46. #navlist a:hover.item2{background: #99ff00;}
  47. #navlist a:hover.item3{background: #0033ff;}
  48. #navlist a:hover.item4 {background: #ffff33;}
  49. #navlist a:hover.item5 {background: #ff6600;}
  50.  
  51. #navlist a:visited.item1 {background: #ff0000;}
  52. #navlist a:visited.item2{background: #00ff00;}
  53. #navlist a:visited.item3 {background: #0000ff;}
  54. #navlist a:visited.tem4 {background: #ffff00;}
  55. #navlist a:visited.item5{background: #ff3300;}
  56.  
  57. .contenedor {
  58. clear: both;
  59. margin: 15px 0 0 150px;
  60. }
  61. h1 {margin: 10px 0 0;}
  62. #cabezeras { margin: 50;50;50;}
  63.  
  64. .menuvertical{
  65. list-style: none;
  66. }
  67. .menuvertical li {
  68. margin:7px 0;
  69. width:60px;}
  70.  
  71. .menuvertical li a { text-decoration: none;
  72. padding: 5px 10px 5px 0;
  73. display: block;
  74. }
  75.  
  76. .menuvertical a:link.item6 {color: #ff0000; font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
  77. .menuvertical a:link.item7 {color:#9966CC;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
  78. .menuvertical a:link.item8{color: #0000ff;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
  79. .menuvertical a:link.item9 {color: #ffff00;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
  80. .menuvertical a:link.item10 {color: #ff3300;font-family:fantasy; font-style:oblique; font-size:20px; font-weight:200;}
  81.  .menuvertical a:hover {
  82. color:#ff3300;
  83. border: 1px outset #69f;
  84. }
  85.  
  86. #navlist a:hover.item6 {background:ff0033;}
  87. #navlist a:hover.item7 {background: #99ff00;}
  88. #navlist a:hover.item8 {background: #0033ff;}
  89. #navlist a:hover.item9 {background: #ffff33;}
  90. #navlist a:hover.10 {background: #ff6600;}
  91.  
  92. #navlist a:visited.item6{background: #ff0000;}
  93. #navlist a:visited.item7 {background: #00ff00;}
  94. #navlist a:visited.item8 {background: #0000ff;}
  95. #navlist a:visited.item9 {background: #ffff00;}
  96. #navlist a:visited.item10 {background: #ff3300;}
  97. #cabezeras { margin: 50;50;50;}
  98. </style>
  99. </head>
  100. <body>
  101. <div id="navcontainer">
  102.   <ul id="navlist">
  103.     <li><a class="item1" href="#"> 1</a></li>
  104.     <li><a class="item2" href="#" >2</a></li>
  105.     <li><a class="item3" href="#">Item three</a></li>
  106.     <li><a class="item4" href="#">Item four</a></li>
  107.     <li><a class="item5" href="#">Item five</a></li>
  108.   </ul>
  109. </div>
  110. <div class="contenedor">
  111.   <h1> el texto Empieza aquí</h1> 
  112.   <div class="menuvertical">
  113.     <ul class="menuvertical">
  114.       <li ><a class="item6" href="#" >iten 1 </a></li>
  115.       <li><a class="item7" href="#">iten 2</a></li>
  116.       <li><a class="item8" href="#">iten 3</a></li>
  117.       <li><a class="item9" href="#">iten 4</a></li>
  118.       <li><a class="item10" href="#">iten 5</a></li>
  119.     </ul>
  120.   </div>
  121. </div>
  122. </body>
  123. </html>

Pero sigues sin corregir los errores del html (div sin cerrar y etiqueta <body> innecesaria justo antes del cierre de </body>. Corrige también algunas cosillas del css. No lo he mirado más que en las propiedades que influían en el tema de la colocación.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Última edición por kseso?; 27/08/2009 a las 05:47
  #12 (permalink)  
Antiguo 27/08/2009, 06:08
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Gracias kseso? pero el problema no ha sido resuelto ya que yo me he explicado mal.

primero: debes de respetar la alineación de mi menú horizontal.( del código original)

segundo: el menú vertical estará antes del texto pero alineado a la izquierda, es decir en una columna a la izquierda y el texto quedará alineado como mi código original.


haber si he conseguido explicarme de todas formas gracias.
  #13 (permalink)  
Antiguo 27/08/2009, 18:42
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
por favor necesito ayuda
  #14 (permalink)  
Antiguo 28/08/2009, 05:32
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problema con alineacion y estilos de menus
Pues lo siento, Trevol, no alcanzo a representarme la composicón de tu página.
Pero sólo es una cuestión de ajustar los valores de margin/padding del menú vertical, y sus contenidos (ul/li/a)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 28/08/2009, 06:34
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Así lo haré kseso? , muchas gracias me espera mucho trabajo.
  #16 (permalink)  
Antiguo 28/08/2009, 10:05
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Cita:
Pero sólo es una cuestión de ajustar los valores de margin/padding del menú vertical, y sus contenidos (ul/li/a)

el problema es que cuando modifico algún valor se mueven todos los menús de forma dependiente. no hay forma de situarlos en la pagina de forma independiente, que los valores que tome uno no afecte a la situación de otro. Por que se mueven en bloque? como puedo situarlos de forma independiente?
  #17 (permalink)  
Antiguo 28/08/2009, 12:37
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Ya lo solucioné amigos,(alexK, kseso?) muchas gracias. Era una cuestión de utilizar la alineación de forma absoluta, yo lo hacia de forma relativa y no encontraba la manera. Muchas gracias estoy contento.
  #18 (permalink)  
Antiguo 28/08/2009, 14:20
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problema con alineacion y estilos de menus
trevol.
Seguro que al final la satisfacción ha sido mayor que el trabajo que te ha costado.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #19 (permalink)  
Antiguo 29/08/2009, 06:15
 
Fecha de Ingreso: agosto-2008
Mensajes: 606
Antigüedad: 15 años, 8 meses
Puntos: 11
Respuesta: problema con alineacion y estilos de menus
Pues si kseso, al final lo que te cuesta hacer te reporta mayores satisfaciones.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 18:57.