Tema: Problema con un lateral
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/02/2010, 14:21
elkpo15
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 14 años, 9 meses
Puntos: 0
Problema con un lateral
Hola a todos estoy, estaba haciendo la pagina pero dentro de un lateral cree un div de menu, que del cual inserte 4 botones en forma vertical, el problema viene que el primer boton me sale un poco mas grande que los 3 de abajos que puede ser?
Otra cosa que casi me olvido, como hago para agregarle separadores al menu horizontal, ya que si utilizo bordes, el menu horizontal pega saltos de lineas y queda muy mal.

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <meta name="description" content="muchas cosas"/>
  6. <meta http-equiv="Refresh" content="60;URL=">  
  7. <link href="Estilos.css" type="text/css" rel="stylesheet"/>
  8. <title>Bienvenidos a mi pagina</title>
  9. </head>
  10. <body>
  11. <div id="contenedor">
  12. <div id="cabezera">
  13. <img src="imagenes/Cabezera.jpg" alt="Cabezera-web" width:"800" height="70"/></div>
  14. <ul id="menuh">
  15. <li><a href="#" class="estilo-menuh">Nada</a></li>
  16. <li><a href="#" class="estilo-menuh">Nada</a></li>
  17. <li><a href="#" class="estilo-menuh">Nada</a></li>
  18. <li><a href="#" class="estilo-menuh">Nada</a></li>
  19. </ul>
  20. <div id="cuerpo">
  21. <div id="lateral">
  22. <h1 class="menuv-title"></h1>
  23. <div id="menuv">
  24. <p><a href="#">Nada</a></p>
  25. <p><a href="#">Nada</a></p>
  26. <p><a href="#">Nada</a></p>
  27. <p><a href="#">Nada</a></p>
  28. </div>
  29. </div>
  30. </div>
  31. </div>

Código HTML: 
Ver original
  1. *
  2. {
  3. margin:0px auto;
  4. padding:0px;
  5. }
  6.  
  7. body
  8. {
  9. background-image:url(imagenes/fondo.gif);
  10. text-align:center;
  11. background-color:#000000;
  12. font-family:Arial, Helvetica, sans-serif;
  13. margin:1em 0em 1em 0;
  14. }
  15.  
  16. #contenedor
  17. {
  18. text-align:left;
  19. width:800px;
  20. background-color:#FFFFFF;
  21. margin:auto;
  22. }
  23.  
  24. #cabezera
  25. {
  26. width:800px;
  27. height:70px;
  28. }
  29.  
  30. #menuh
  31. {
  32. list-style-type:none;
  33. }
  34.  
  35. /*border*/
  36.  
  37. #menuh a:link, #menuh a:visited
  38. {
  39. float:left;
  40. width:200px;
  41. height:20px;
  42. background-image:url(imagenes/Fondo-menuh-boton.jpg);
  43. text-decoration:none;
  44. text-align:center;
  45. }
  46.  
  47. #menuh a:hover
  48. {
  49. background-image:url(imagenes/Fondo-menuh-boton-2.jpg);
  50. color:#339900;
  51. }
  52.  
  53. #menu li
  54. {
  55. display:inline
  56. }
  57.  
  58. .estilo-menuh
  59. {
  60. font-weight:bold;
  61. color:#FF3300;
  62. }
  63.  
  64. #cuerpo
  65. {
  66. background-color:#000000;
  67. width:800px;
  68. height:20em;
  69. float:right;
  70. }
  71.  
  72. #lateral
  73. {
  74. background-color:#000099;
  75. width:10em;
  76. height:20em;
  77. float:left;
  78. }
  79.  
  80. /*Title*/
  81.  
  82. .menuv-title
  83. {
  84. background-image:url(imagenes/Menuv-lateral.jpg);
  85. height:45px;
  86. }
  87.  
  88. /*Menu*/
  89.  
  90. #menuv
  91. {
  92. text-align:center;
  93. }
  94.  
  95. #menuv p
  96. {
  97. margin:0px;
  98. padding:0px;
  99. height:25px;
  100. background-image:url(imagenes/Menuv-boton.jpg)
  101. }
  102.  
  103. #menuv a:link, #menuv a:visited
  104. {
  105. text-decoration:none;
  106. }
  107.  
  108. /*2º imagen boton*/
  109.  
  110. #menuv a:hover
  111. {
  112. }