elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: (TUTORIAL) Aprende a emular Sentinel Dongle By Yapis


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problemas al usar las propiedades de la etiqueta <div> en mozilla, ayuda xfavor!		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problemas al usar las propiedades de la etiqueta <div> en mozilla, ayuda xfavor!  (Leído 2,682 veces)
saviture

Desconectado Desconectado

Mensajes: 2



Ver Perfil
Problemas al usar las propiedades de la etiqueta <div> en mozilla, ayuda xfavor!
« en: 25 Abril 2011, 00:20 am »
Hola a todos!
Estoy elaborando un proyecto en PHP para la universidad, y tengo problemas en el diseño del index  al momento de cargarlo en el mozilla y chrome!.

Pero, si lo cargo con IE y safari todo eta perfecto!

Creo que los errores nacen, porque no estoy usando el "float" y el "clear" adecuadamente. Asi que espero que me ayuden con esto.

A continuación comparto los códigos:
--------------------------------------------------------------
File: index.php

Código
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="css/style01.css">
  7. </head>
  8.     <body>
  9.     <div id="div_top1">
  10.       <div id="container_top1"></div>
  11.     </div>
  12.     <div id="div_top2">
  13.       <div id="container_top2">C</div>
  14.     </div>
  15.     <div id="div_body">
  16.       <div id="container_body">
  17.         <div id="body_left">
  18.           <div id="box1"></div>
  19.           <div id="box2"></div>
  20.         </div>
  21.         <div id="body_right">
  22.           <div id="box_a"></div>
  23.           <div id="box_b"></div>
  24.           <div id="box_c"></div>
  25.         </div>
  26.       </div>
  27.     </div>
  28.     <div id="div_footer">
  29.       <div id="container_footer"></div>
  30.     </div>
  31.     </body>
  32. </html>
  33.  

--------------------------------------------------------------
File: style01.css

Código
  1. @charset "utf-8";
  2. #div_top1 {
  3. }
  4. #div_top1 #container_top1 {
  5. 	width: 980px;
  6. 	margin-right: auto;
  7. 	margin-left: auto;
  8. 	background-color: #6C9;
  9. 	height: 100px;
  10. }
  11. #div_top2 {
  12. }
  13. #div_top2 #container_top2 {
  14. 	background-color: #900;
  15. 	width: 980px;
  16. 	margin-right: auto;
  17. 	margin-left: auto;
  18. }
  19. #div_body {
  20. }
  21. #div_body #container_body {
  22. 	background-color: #9F0;
  23. 	margin-right: auto;
  24. 	margin-left: auto;
  25. 	width: 980px;
  26. 	height: auto;
  27. }
  28. #div_body #container_body #body_left {
  29. 	width: 200px;
  30. 	background-color: #09F;
  31. 	float: left;
  32. 	clear: left;
  33. 	margin-top: 10px;
  34. 	height: auto;
  35. }
  36. #div_body #container_body #body_left #box1 {
  37. 	background-color: #669;
  38. 	height: 150px;
  39. 	width: 200px;
  40. }
  41. #div_body #container_body #body_left #box2 {
  42. 	background-color: #669;
  43. 	height: 150px;
  44. 	width: 200px;
  45. 	margin-top: 10px;
  46. }
  47. #div_body #container_body #body_right {
  48. 	background-color: #0CC;
  49. 	height: auto;
  50. 	width: 770px;
  51. 	float: left;
  52. 	margin-left: 10px;
  53. 	margin-top: 10px;
  54. }
  55. #div_body #container_body #body_right #box_a {
  56. 	height: 150px;
  57. 	width: 770px;
  58. 	background-color: #990;
  59. }
  60. #div_body #container_body #body_right #box_b {
  61. 	height: 200px;
  62. 	width: 380px;
  63. 	margin-top: 10px;
  64. 	background-color: #C09;
  65. 	float: left;
  66. 	margin-bottom: 10px;
  67. }
  68. #div_body #container_body #body_right #box_c {
  69. 	height: 200px;
  70. 	width: 380px;
  71. 	background-color: #C09;
  72. 	float: left;
  73. 	margin-top: 10px;
  74. 	margin-left: 10px;
  75. 	margin-bottom: 10px;
  76. 	clear: none;
  77. }
  78. #div_footer {
  79. }
  80. #div_footer #container_footer {
  81. 	background-color: #036;
  82. 	margin-right: auto;
  83. 	margin-left: auto;
  84. 	width: 980px;
  85. 	height: 150px;
  86. 	clear: both;
  87. }
  88.  
--------------------------------------------------------------

Con todo esto, el index de ve asi en el mozilla:



Donde se puede observar que el background-color del #container_body es blanco.

Y si revisamos el css, tenemos que:

Código
  1. #div_body #container_body {
  2. 	background-color: #9F0;
  3. 	margin-right: auto;
  4. 	margin-left: auto;
  5. 	width: 980px;
  6. 	height: auto;
  7. }
  8.  


Por lo que el index debería ser de la siguiente forma (se ve asi en IE y safari):


Espero que me hayan entendido, y si tienen una mejor forma para trabajar el diseño del index me gustaría que me lo hagan saber.



.
« Última modificación: 25 Abril 2011, 04:57 am por saviture » En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Problemas al usar las propiedades de la etiqueta <div> en mozilla, ayuda xfavor!
« Respuesta #1 en: 25 Abril 2011, 16:34 pm »
Hola, donde terminan body_left y body_right (estos 2 usan float) debes limpiar el float. Yo lo hice a lo rápido así que añadí otro div en el html y una linea en el css.

queda así:

index.php
Código
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="css/style01.css">
  7. </head>
  8.     <body>
  9.     <div id="div_top1">
  10.       <div id="container_top1"></div>
  11.     </div>
  12.     <div id="div_top2">
  13.       <div id="container_top2">C</div>
  14.     </div>
  15.     <div id="div_body">
  16.       <div id="container_body">
  17.         <div id="body_left">
  18.           <div id="box1">dasd</div>
  19.           <div id="box2">dsad</div>
  20.         </div>
  21.         <div id="body_right">
  22.           <div id="box_a"></div>
  23.           <div id="box_b"></div>
  24.           <div id="box_c"></div>
  25.         </div>
  26. 		<div class="clear"></div>
  27.       </div>
  28.     </div>
  29.     <div id="div_footer">
  30.       <div id="container_footer"></div>
  31.     </div>
  32.     </body>
  33. </html>

style01.css
Código
  1. @charset "utf-8";
  2. #div_top1 {
  3. }
  4. #div_top1 #container_top1 {
  5. 	width: 980px;
  6. 	margin-right: auto;
  7. 	margin-left: auto;
  8. 	background-color: #6C9;
  9. 	height: 100px;
  10. }
  11. #div_top2 {
  12. }
  13. #div_top2 #container_top2 {
  14. 	background-color: #900;
  15. 	width: 980px;
  16. 	margin-right: auto;
  17. 	margin-left: auto;
  18. }
  19.  
  20. #div_body #container_body #body_left {
  21. 	width: 200px;
  22. 	background-color: #09F;
  23. 	float: left;
  24. 	clear: left;
  25. 	margin-top: 10px;
  26. 	height: auto;
  27. }
  28. #div_body #container_body #body_left #box1 {
  29. 	background-color: #669;
  30. 	height: 150px;
  31. 	width: 200px;
  32. }
  33. #div_body #container_body #body_left #box2 {
  34. 	background-color: #669;
  35. 	height: 150px;
  36. 	width: 200px;
  37. 	margin-top: 10px;
  38. }
  39. #div_body #container_body #body_right {
  40. 	background-color: #0CC;
  41. 	height: auto;
  42. 	width: 770px;
  43. 	float: left;
  44. 	margin-left: 10px;
  45. 	margin-top: 10px;
  46. }
  47. #div_body #container_body #body_right #box_a {
  48. 	height: 150px;
  49. 	width: 770px;
  50. 	background-color: #990;
  51. }
  52. #div_body #container_body #body_right #box_b {
  53. 	height: 200px;
  54. 	width: 380px;
  55. 	margin-top: 10px;
  56. 	background-color: #C09;
  57. 	float: left;
  58. 	margin-bottom: 10px;
  59. }
  60. #div_body #container_body #body_right #box_c {
  61. 	height: 200px;
  62. 	width: 380px;
  63. 	background-color: #C09;
  64. 	float: left;
  65. 	margin-top: 10px;
  66. 	margin-left: 10px;
  67. 	margin-bottom: 10px;
  68. 	clear: none;
  69. }
  70. #div_footer {
  71. }
  72. #div_footer #container_footer {
  73. 	background-color: #036;
  74. 	margin-right: auto;
  75. 	margin-left: auto;
  76. 	width: 980px;
  77. 	height: 150px;
  78. 	clear: both;
  79. }
  80. #div_body {
  81. }
  82. #div_body #container_body {
  83. 	background-color:#9F0 !important;
  84. 	margin-right: auto;
  85. 	margin-left: auto;
  86. 	width: 980px;
  87. 	height: auto;
  88. }
  89. .clear {clear:both;}

Saludos
« Última modificación: 25 Abril 2011, 16:36 pm por drvy | BSM » En línea
saviture

Desconectado Desconectado

Mensajes: 2



Ver Perfil
Re: Problemas al usar las propiedades de la etiqueta <div> en mozilla, ayuda xfavor!
« Respuesta #2 en: 26 Abril 2011, 16:06 pm »
drvy | BSM gracias por la ayuda, nose me habia ocurrido limpiar el float.
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Fromulario: Recuperar un Dato y Aplicarle una Etiqueta (Ayuda)
PHP 		MakiaResc 4 1,811 Último mensaje 23 Enero 2008, 04:18 am
por MakiaResc
Como usar las propiedades de el activex de Adobe, el Acrobat 7.0 browse contro?
Programación Visual Basic 		morenochico 2 3,956 Último mensaje 9 Enero 2009, 07:53 am
por morenochico
problemas wfiwafy---respuesta urgente xfavor!!!!
Foro Libre 		jcars95 1 1,882 Último mensaje 26 Septiembre 2010, 02:19 am
por simorg
Problemas con clase,objetos y propiedades
.NET (C#, VB.NET, ASP) 		DanielPy 3 2,631 Último mensaje 3 Agosto 2013, 20:42 pm
por Novlucker
Problemas para mostrar correctamente etiqueta <img> mediante PHP
PHP 		irenuchi_04 6 2,493 Último mensaje 18 Agosto 2015, 18:58 pm
por MinusFour
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines