Tema: problema con alineacion y estilos de menus
Ver Mensaje Individual
  #11 (permalink)  
Antiguo 27/08/2009, 05:32
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 7 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