Tema: Margin Top no me funciona bien
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/05/2010, 23:31
konejo
 
Fecha de Ingreso: mayo-2010
Mensajes: 10
Antigüedad: 13 años, 11 meses
Puntos: 1
Margin Top no me funciona bien
Hola, espero que estén bien. Tengo un problema con los margin-top. En realidad no se si el error estará entre el teclado y la silla, o si es que existirá la posibilidad de que tenga que cambiar el codigo o algo así.

Resulta que lo que quiero es poner 2 Navbar Horizontales, una a la par del titulo o logo de la página y la segunda debajo del slogan.

Con la primera ya tuve éxito, pero con la segunda me está dando dolores de cabeza.

Para mayor orden, yo dividí el sitio en:

Cuerpo: segundo cuerpo para centrar todo el contenido de la página
Encabezado: Donde va el titulo, slogan y NavBar1
Contenido: Donde va la NavBar2 y la información a mostrar
Enlaces de Interés: para poner el facebook y otros enlaces
Pie de Página: el Copyright, numero de contacto y otra mini NavBar Horizontal.

Resulta que en el div de contenido, tengo 2 div mas, uno de Menu para el NavBar2 y otro de información, para escribir el texto a mostrar.

Los margin-top de estas dos divs, no me funcionan. Yo cambio sus valores y no muestran algún cambio de posición, ni en internet explorer, ni en firefox.

Necesito tener un espacio razonal para que se vea bien la página.

Otro punto adicional es que el cuerpo para centrar el contenido de la página es de 900px de ancho. El div de enlace de interés tiene una imagen como fondo, de 900px, sin embargo, no se por qué esta no cubre toda esta área.

Es la segunda vez que trato de crear esta página. A la primera el margin me presentaba el mismo problema, pero el Div de enlaces de interés funcionaba vez.

Esta segunda vez, los margins no funcionan y el div de enlaces de interés me da problemas.

Aqui esta el codigo de la pagina y del .css
El .css esta ordenado de acuerdo a la pagina, se le da formato a los tags de acuerdo a su orden de aparición en la pagina.

Voy a senalar las áreas que tienen el problema en el html y en el .css.

Ademas, voy a poner una imagen de el diseno como deberia ser, y de como va implementado por el momento.

Por cierto, ambos margin-top de los dos div, no hacen cambios ni con numeros positivo ni con numeros negativos. Ni suben, ni bajan.

HTML:

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">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" href="style/iWanaStyle.css" />
  6. <title>Untitled Document</title>
  7. </head>
  8.  
  9. <div class="Cuerpo">
  10.  
  11. <div class="Encabezado">
  12. <a class="Logo" title="iWanaTech Soluciones Informáticas"><img alt="iWanaTech" src="imagenes/Logo.png" width="231" height="119" /></a>
  13. <img class="Slogan" alt="Solucines Informáticas a Su Alcance" title="Soporte Técnico, Redes y Software a Su Alcance" src="imagenes/Slogan.png" width="902" height="126" />
  14.  
  15. <div class="Menu1">
  16.  
  17. <ul class="Opciones1">
  18.  
  19. <li><a class="inicio" title="iWanaTech Soluciones Informáticas" href="index.html"><img alt="Inicio" src="imagenes/BtnInicioSel1.png" width="123" height="38" /></a></li>
  20. <li><a class="soporte1" title="Soporte Técnico" href="index.html"></a></li>
  21. <li><a class="redes1" title="Soporte de Redes" href="index.html"></a></li>
  22. <li><a class="software1" title="Desarrollo de Software" href="index.html"></a></li>
  23. <li><a class="contacto1" title="Contáctenos" href="index.html"></a></li>
  24.  
  25. </ul>
  26.  
  27. </div>
  28.  
  29. </div>
  30.  
  31. <div class="Contenido"> [B]Este Div si funciona bien con sus margins[/B]
  32.  
  33. <div class="Menu2"> [B]Div con problemas de Margin-top[/B]
  34.  
  35. <ul class="Opciones2">
  36.  
  37. <li><a class="QuienesSomos" title="iWanaTech Soluciones Informáticas" href="index.html"><img alt="Inicio" src="imagenes/BtnQuienesSomos.png" width="168" height="84" /></a></li>
  38. <li><a class="soporte2" title="Soporte Técnico" href="index.html"><img alt="Soporte Técnico" src="imagenes/BtnSoporte2.png" width="168" height="84" /></a></li>
  39. <li><a class="redes2" title="Soporte de Redes" href="index.html"><img alt="Soporte de Redeso" src="imagenes/BtnRedes2.png" width="168" height="84" /></a></li>
  40. <li><a class="software2" title="Desarrollo de Software" href="index.html"><img alt="Desarrollo de Software" src="imagenes/BtnSoftware2.png" width="168" height="84" /></a></li>
  41. <li><a class="contacto2" title="Contáctenos" href="index.html"><img alt="Contáctenos" src="imagenes/BtnContacto2.png" width="168" height="84" /></a></li>
  42.  
  43. </ul>
  44.  
  45. </div>
  46.  
  47. <div class="Informacion">[B] Div con problema de Margin-top[/B]
  48.  
  49. <h1>Bienvenidos a iWanaTech</h1>
  50. <p>IwanaTech es una empresa que se dedica a soluciones de tecnologías de información. Los servicios que se brindan son de soporte técnico, instalación o mantenimiento de redes y desarrollo de sistemas informáticos.</p>
  51.  
  52. <h2>Misión</h2>
  53. <p>Proveer servicios de tecnologías de información a nuestros clientes, formando lazos con ellos, basándose en la confianza.</p>
  54.  
  55. <h2>Visión</h2>
  56. <p>er la mejor empresa que brinda servicios de soporte técnico, redes, y desarrollo de software y que a la vez mantiene excelentes relaciones con sus clientes.</p>
  57.  
  58. </div>
  59.  
  60.  
  61. </div>
  62.  
  63. <div class="EnlacesInteres">
  64. </div>
  65.  
  66. <div class="Pie">
  67. </div>
  68.  
  69. </div>
  70.  
  71. <body>
  72. </body>
  73. </html>

.CSS

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4.     background-image:url(../imagenes/Nav%20Bar.png);
  5.     background-repeat:repeat-x;
  6. }
  7.  
  8. img{
  9.     border:0;
  10. }
  11.  
  12. .Cuerpo{
  13.     width:900px;
  14.     margin:0 auto;
  15. }
  16.  
  17. .Slogan{
  18.     margin-top:7px;
  19. }
  20.  
  21. .Menu1{
  22.     margin-left:260px;
  23.     margin-top:-163px;
  24. }
  25.  
  26. .Opciones1{
  27.     margin:0;
  28.     padding:0;
  29.     list-style:none;
  30. }
  31.  
  32. .Opciones1 li{
  33.     float:left;
  34. }
  35.  
  36. .Opciones1 li a{
  37.     text-decoration:none;
  38.     margin-left:2px;
  39.     display:block;
  40.     width:123px;
  41.     height:38px;
  42. }
  43.  
  44. .inicio{
  45.     background-image:url(../imagenes/BtnInicio1.png);
  46. }
  47.  
  48. .soporte1{
  49.     background-image:url(../imagenes/BtnSoporte1.png);
  50. }
  51.  
  52. .redes1{
  53.     background-image:url(../imagenes/BtnRedes1.png);
  54. }
  55.  
  56. .software1{
  57.     background-image:url(../imagenes/BtnSoftware1.png);
  58. }
  59.  
  60. .contacto1{
  61.     background-image:url(../imagenes/BtnContacto1.png);
  62. }
  63.  
  64. .inicio:hover{
  65.     background-image:url(../imagenes/BtnInicioSel1.png);
  66. }
  67.  
  68. .soporte1:hover{
  69.     background-image:url(../imagenes/BtnSoporteSel1.png);
  70. }
  71.  
  72. .redes1:hover{
  73.     background-image:url(../imagenes/BtnRedesSel1.png);
  74. }
  75.  
  76. .software1:hover{
  77.     background-image:url(../imagenes/BtnSoftwareSel1.png);
  78. }
  79.  
  80. .contacto1:hover{
  81.     background-image:url(../imagenes/BtnContactoSel1.png);
  82. }
  83.  
  84. .Contenido{
  85.     width:900px;
  86.     margin-top:162px;
  87.     border-left:#EAEAEA thin solid;
  88.     border-right:#EAEAEA thin solid;
  89. }
  90.  
  91. .Menu2{
  92.     margin-top:23px;<- Margin top con problemas numeros positivos y negativos
  93.     margin-left:15px;
  94.     margin-right:15px;
  95. }
  96.  
  97. .Opciones2{
  98.     margin:0;
  99.     padding:0;
  100.     list-style:none;
  101. }
  102.  
  103. .Opciones2 li{
  104.     float:left;
  105. }
  106.  
  107. .Opciones2 li a{
  108.     text-decoration:none;
  109.     margin-left:5px;
  110.     display:block;
  111.     width:168px;
  112.     height:84px;
  113. }
  114.  
  115. .Informacion{
  116.     margin-top:20px;<- Margin top con problemas numeros positivos y negativos
  117.     margin-left:30px;
  118.     margin-right:30px;
  119. }
  120.  
  121. .EnlacesInteres{
  122.     width:900px;
  123.     height:58px;
  124.     margin-top:-20px;
  125.     background-image:url(../imagenes/FondoEnlaceInteres.png);
  126.     background-repeat:no-repeat;
  127. }


Diseno original



Pagina Implementada




gracias por su ayuda y tiempo
Última edición por konejo; 11/05/2010 a las 23:39