Foros del Web » Creando para Internet » HTML »

Ayuda con diseño

Estas en el tema de Ayuda con diseño en el foro de HTML en Foros del Web. Mi problema es este: se pierde el diseño cuando usamos Internet Explorer. Así que o lo hago para uno, o para el otro :S Apreciaría ...
  #1 (permalink)  
Antiguo 01/11/2010, 14:50
 
Fecha de Ingreso: octubre-2010
Mensajes: 93
Antigüedad: 7 años, 1 mes
Puntos: 0
Ayuda con diseño

Mi problema es este:





se pierde el diseño cuando usamos Internet Explorer.
Así que o lo hago para uno, o para el otro :S

Apreciaría que me dieran ideas de cómo solucionarlo

Gracias por su ayuda
  #2 (permalink)  
Antiguo 01/11/2010, 15:48
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Ayuda con diseño

seria mas fácil ayudarte si nos da la URL de la pagina.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 01/11/2010, 16:54
 
Fecha de Ingreso: octubre-2010
Mensajes: 93
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con diseño

Cita:
Iniciado por pitufoweb Ver Mensaje
seria mas fácil ayudarte si nos da la URL de la pagina.




Saludos
puedo poner solamente el código, porque esas páginas estan solamente en mi ordenador
  #4 (permalink)  
Antiguo 01/11/2010, 17:12
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Ayuda con diseño

Claro, también.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #5 (permalink)  
Antiguo 01/11/2010, 17:13
 
Fecha de Ingreso: octubre-2010
Mensajes: 93
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con diseño

Este es el código de la hoja de estilo

Código HTML:
Ver original
  1. #enc
  2. {
  3.     font-family:Tahoma;
  4.     text-align:center;
  5. }
  6.  
  7. table
  8. {
  9.     margin-left:auto;
  10.     margin-right:auto;
  11. }
  12.  
  13. th
  14. {
  15.     background-color:#CEF6F5;
  16.     font-family:Verdana;
  17.     font-size:12px;
  18. }
  19.  
  20. .ver,.ver2,.io,.al
  21. {
  22.     padding-top:5px;
  23.     padding-bottom:5px;
  24.     padding-left:5px;
  25.     padding-right:5px;
  26. }
  27.  
  28. .ver,.ver2,.io,.ed,.al,.m1
  29. {
  30.     font-size:12px;
  31.     font-family:Tahoma;
  32. }
  33.  
  34. .msg
  35. {
  36.     width:400px;
  37.     height:150px;
  38.     border-style:solid;
  39. }
  40.  
  41. .m1
  42. {
  43.     text-align:center;
  44. }
  45. .ver1
  46. {
  47.     margin-left:auto;
  48.     margin-right:auto;
  49.     border-style:solid;
  50. }
  51. .ver
  52. {
  53.     background-color:#CEF6F5;
  54. }
  55.  
  56. .io
  57. {
  58.     background-color:#D0A9F5;
  59. }
  60.  
  61. .ed
  62. {
  63.     text-align:center;
  64.     background-color:#D0A9F5;
  65. }
  66.  
  67. #Field2,#Datos,#cuerpo,#registrar,#enca,#encabe,#encabezado,#enc,#titulo
  68. {
  69.     margin-left:auto;
  70.     margin-right:auto;
  71.    
  72. }
  73.  
  74. #Field1
  75. {
  76.     background-color:#610B0B;
  77.     width:700px;
  78.     float:left;
  79.     height:50px;
  80.     font-family:Tahoma;
  81.     font-size:13px;
  82.     text-align: center;
  83. }
  84.  
  85. .ver2
  86. {
  87.     width:110px;
  88. }
  89.  
  90. #leg
  91. {
  92.     color:#A4A4A4;
  93.     font-family:Tahoma;
  94.     font-weight:bold;
  95.     font-size:14px;
  96. }
  97.  
  98. #dato
  99. {
  100.     border-left-style:dotted;
  101. }
  102. #Datos
  103. {
  104.     border-left-style: dotted;
  105.     border-right-style:dotted;
  106.     border-bottom-style:dotted;
  107.     border-top-style:dotted;
  108.     border-color:green;
  109.     width:400px;   
  110. }
  111.  
  112. #cierra
  113. {
  114.     font-family:Tahoma;
  115.     font-size:13px;
  116.     font-weight:bold;
  117.     background:transparent url(link1.png)  no-repeat;
  118.     background-position:center;
  119.     text-decoration:None;
  120.     color:black;
  121.     display:block;
  122.     width:150px;
  123. }
  124.  
  125. #cierra:hover
  126. {
  127.     font-family:Tahoma;
  128.     font-size:13px;
  129.     font-weight:bold;
  130.     background:transparent url(link1.png)  no-repeat;
  131.     background-position:center;
  132.     Text-decoration:none;
  133.     color:gray;
  134.     display:block;
  135.  
  136. }
  137. #cierra:active
  138. {
  139.     font-family:Tahoma;
  140.     font-size:13px;
  141.     font-weight:bold;
  142.     background:transparent url(link2.png) 0 0 no-repeat;
  143.     background-position:center;
  144.     Text-decoration:none;
  145.     color:blue;
  146.     display:block;
  147.     width:150px;
  148. }
  149.  
  150. #encabezado
  151. {
  152.     border-bottom-style: double;
  153.     background-color:#610B0B;
  154.     width:1200px;
  155.     height:50px;
  156.     color:#D8D8D8;
  157. }
  158.  
  159. #cuerpo
  160. {
  161.     width:600px;
  162.     float:left;
  163. }
  164.  
  165. .logi
  166. {
  167.     font-family:Tahoma;
  168.     font-size:13px;
  169.     color:#D8D8D8;
  170. }
  171. #encabe, #encabezado{
  172.     width:1200px;
  173.     background-color: #3b0b0b;
  174.     border-bottom-style: solid;
  175.     border-top-style: none;
  176.     font-family: Tahoma;
  177.     height: 80px;
  178. }
  179.  
  180. #imagen
  181. {
  182.     width:300px;
  183.     float:left;
  184.     text-align:right;
  185.     background-color:#3B0B0B;
  186. }
  187.  
  188. #enca
  189. {
  190.     width:600px;
  191.     font-family:Tahoma;
  192.     text-align:center;
  193.     border-bottom-style: double;
  194.     color:white;
  195. }
  196.  
  197. p
  198. {
  199.     text-align:center;
  200. }
  201.  
  202. #Field2
  203. {
  204.     width:1200px;
  205.     height:650px;
  206.     background-image:url(gradiente-listo.jpg);
  207.     background-repeat:repeat-x;
  208. }
  209. #cuervo
  210. {
  211.     background-image: url(cuervo2.png);
  212.     background-position: center;
  213.     background-repeat: no-repeat;
  214.     float:left;
  215. }
  216.  
  217. #cuerpo,#cuervo
  218. {
  219.     width:600px;
  220.     height:600px;
  221. }
  222.  
  223. h2
  224. {
  225.     text-align:center;
  226.     font-family: Tahoma;
  227.     font-style: normal;
  228.     font-weight: bold;
  229.     background-color:red;
  230. }
  231.  
  232. h1
  233. {
  234.     text-align:center;
  235.     font-family:Tahoma;
  236.     font-weight:bold;
  237.     line-height:50px;
  238.     width:1200px;
  239. }
  240.  
  241. #pie
  242. {
  243.     text-align:right;
  244.     font-family: Tahoma;
  245.     font-size:12px;
  246.     width:1200px;
  247.     height:50px;
  248.     line-height:100px;
  249. }
  250.  
  251. .alu
  252. {
  253.     width:1200px;
  254. }
  255.  
  256. #leyendaBien
  257. {
  258.     font-family:Teen Light;
  259.     font-weight:bold;
  260.     font-size:30px;
  261.     text-align:center;
  262.     height:100px;
  263.     line-height:50px;
  264. }
  265.  
  266. #titulo
  267. {
  268.    
  269.     line-height:70px;
  270.     color:white;
  271.     text-align:center;
  272.     Font-family:Tahoma;
  273.     font-size:40px;
  274.     width:1200px;
  275.     background-color: #3b0b0b;
  276.     border-bottom-style:double;
  277. }
  #6 (permalink)  
Antiguo 01/11/2010, 17:13
 
Fecha de Ingreso: octubre-2010
Mensajes: 93
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con diseño

Este es el de la pantalla que ven en las imágenes

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  2.     <link rel="shorcut icon" href="editar.png">
  3.     <link href="estilo.css" rel="stylesheet" type="text/css" media=screen>
  4. <title>Alta de usuario</title>
  5. </head>
  6.        <?php
  7.  
  8.     mysql_connect("localhost","root","admin");
  9.     mysql_select_db("alumnos");
  10.        ?>
  11.     <div id="encabe">
  12.     <div id="imagen"><img src="itnl.jpg"></div>
  13.     <fieldset id="Field1">
  14.      <legend id="leg"> Iniciar Sesi&oacute;n</legend>
  15.         <div id='LogIn'>
  16.          <form action='valida.php' method='post'>
  17.           <table class='log'>
  18.             <tr>
  19.             <td class="logi">Usuario: <input type='text' name='nombreUsuario' size='30'></td>
  20.             <td class="logi"> Contrase&ntilde;a: <input type='password' name='clave' size='30'></td>
  21.             <td valign='bottom' align='center' colspan='2'><input type='submit' value='Entrar'></td>
  22.             </tr>
  23.           </table>
  24.          </form>
  25.         </div>
  26.         </div>
  27.             </fieldset>
  28.    
  29.     <div id="Field2">
  30.    
  31.     <div id="cuervo">
  32.  
  33.     </div>
  34.    
  35.     <div id="cuerpo">
  36.     <div id ="registrar">
  37.         <h1 id="enca"> Reg&iacute;strate</h1>
  38.     </div>
  39.    
  40.     <div id="dato">
  41.     <fieldset id="Datos"><legend id="leg">Datos de la cuenta</legend>
  42.     <form action="guardar.php" method="post">
  43.     <table>
  44.         <tr><td class="ver2">No Control: </td><td><input type="text" name="NC" size='30'></td></tr>
  45.         <tr><td class="ver2">Nombre de usuario</td><td><input type="text" name="username" size="30"></td></tr>
  46.         <tr><td class="ver2">Contraseña</td><td><input type="password" name="pw" size="30"></td></tr>
  47.     </table></fieldset>
  48.    
  49.     <fieldset id="Datos"><legend id="leg">Datos Personales</legend>
  50.     <table>
  51.         <tr><td class="ver2">Nombre: </td><td><input type="text" name="Nombre" size='30'></td></tr>
  52.         <tr><td class="ver2">Apellido: </td><td><input type="text" name="Apellido" size='30'></td></tr>
  53.         <tr><td class="ver2" valign="top">Direccion:</td><td><textarea name="Direccion" cols="24" rows="4"></textarea></td></tr>
  54.     </table></fieldset>
  55.     <fieldset id="Datos"><legend id="leg">Información Adicional</legend>
  56.     <table>
  57.         <tr><td class="ver2">Email: </td><td><input type="text" name="Email" size='30'></td></tr>
  58.         <tr><td class="ver2">Edad: </td><td><input type="text" name="Edad" size='30'></td></tr>
  59.         <tr><td colspan="2" class="al" align="center"><input type="submit" value="Guardar"></td></tr>
  60.     </table></fieldset>
  61.     </form>
  62.     </div> 
  63.     </div>
  64.  
  65.     <div id="pie">
  66.     Creado por Emma Gabriela Colorado Mac&iacute;as
  67.     </div>
  68.     </div>
  69. </body>
  70. </html>
  #7 (permalink)  
Antiguo 01/11/2010, 17:37
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Ayuda con diseño

ok, espera un momento.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #8 (permalink)  
Antiguo 01/11/2010, 17:54
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Ayuda con diseño

hay varios errores en el HTML, primero corrige esos errores. Pasa el validador del W3C.



Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #9 (permalink)  
Antiguo 01/11/2010, 17:58
 
Fecha de Ingreso: octubre-2010
Mensajes: 93
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con diseño

Cita:
Iniciado por pitufoweb Ver Mensaje
hay varios errores en el HTML, primero corrige esos errores. Pasa el validador del W3C.



Saludos
en la hoja de estilo o en el archivo de alta?
  #10 (permalink)  
Antiguo 01/11/2010, 18:29
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Ayuda con diseño

En el HTML.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #11 (permalink)  
Antiguo 01/11/2010, 18:45
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 7 meses
Puntos: 3
Respuesta: Ayuda con diseño

Al haber errores en las etiquetas, algunos navegadores los interpretan como espacios en blanco (o al menos eso me sucedía en una de mis páginas), creo que eso es lo que hace que se desplazan las tablas hacia la derecha.

Saludos =)
  #12 (permalink)  
Antiguo 01/11/2010, 18:47
 
Fecha de Ingreso: noviembre-2010
Mensajes: 6
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: Ayuda con diseño

Hola, generalmente esas diferencias entre navegadores se dan porque no están especificadas las medidas exactas de todos los elementos. ¿Que significa esto? A veces, los valores por defecto son interpretados de diferentes formas por cada navegador, sobre todo los margins y paddings.

Te recomiendo bajar el firebug, e inspeccionar los elementos para ver cual es el que te esta moviendo todo a la derecha, o simplemente especificar margenes y anchos de los que formen parte de esa linea.

También asegurate de que el html valide, como te dijeron mas arriba, ya que va a ahorrar muchos dolores de cabeza.

Saludos y espero que te sirva.
Facu.

-------------------------------------
[URL="http://www.cooperativaelmate.com.ar"]http://www.cooperativaelmate.com.ar[/URL]
  #13 (permalink)  
Antiguo 01/11/2010, 18:55
 
Fecha de Ingreso: octubre-2010
Mensajes: 93
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con diseño

Muchisimas gracias por recomendarme ese validador!!!!
me ha servido de maravilla, ahora estoy en proceso de corregir esos errores


mchisimas gracias
  #14 (permalink)  
Antiguo 01/11/2010, 18:55
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Ayuda con diseño

celineadiction:

Primero, tenes que recordar que el atributo ID debe de tener un valor único.
P ej:

id="leg"
id="leg"

para varios tags, está mal

debería ser

id="leg1"
id="leg2"

Etc.

Segundo:

Si vás a incluir en tu doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

entonces tus input e img deben estar debidamente cerrados, tenés completamente mal anidados los divs, forms, fieldset y legend...
Corrigiendo esto, se corrige el diseño del form en ie, pero se desacomoda la tabla superior, te recomiendo que rehagas todo cuidadosamente, por lo pronto tu html para body correcto sería

Código HTML:
Ver original
  1. <div id="encabe">
  2. <div id="imagen">
  3. <img src="itnl.jpg" alt="" />
  4. </div>
  5. <fieldset id="Field1">
  6. <legend id="leg0">Iniciar Sesión</legend>
  7. <div id='LogIn'>
  8. <form action='valida.php' method='post'>
  9. <table class='log'>
  10. <tr>
  11. <td class="logi">
  12. Usuario: <input type='text' name='nombreUsuario' size='30' />
  13. </td>
  14. <td class="logi">
  15. Contraseña: <input type='password' name='clave' size='30' />
  16. </td>
  17. <td valign='bottom' align='center' colspan='2'>
  18. <input type='submit' value='Entrar' />
  19. </td>
  20. </tr>
  21. </form>
  22. </div>
  23. </div>
  24. <div id="Field2">
  25. <div id="cuervo"></div>
  26. <div id="cuerpo">
  27. <div id="registrar">
  28. <h1 id="enca">
  29. Regístrate
  30. </h1>
  31. </div>
  32. <div id="dato">
  33. <form action="guardar.php" method="post">
  34. <fieldset id="Datos1">
  35. <legend id="leg1">Datos de la cuenta</legend>
  36. <tr>
  37. <td class="ver2">
  38. No Control:
  39. </td>
  40. <td>
  41. <input type="text" name="NC" size='30' />
  42. </td>
  43. </tr>
  44. <tr>
  45. <td class="ver2">
  46. Nombre de usuario
  47. </td>
  48. <td>
  49. <input type="text" name="username" size="30" />
  50. </td>
  51. </tr>
  52. <tr>
  53. <td class="ver2">
  54. Contraseña
  55. </td>
  56. <td>
  57. <input type="password" name="pw" size="30" />
  58. </td>
  59. </tr>
  60. <fieldset id="Datos2">
  61. <legend id="leg2">Datos Personales</legend>
  62. <tr>
  63. <td class="ver2">
  64. Nombre:
  65. </td>
  66. <td>
  67. <input type="text" name="Nombre" size='30' />
  68. </td>
  69. </tr>
  70. <tr>
  71. <td class="ver2">
  72. Apellido:
  73. </td>
  74. <td>
  75. <input type="text" name="Apellido" size='30' />
  76. </td>
  77. </tr>
  78. <tr>
  79. <td class="ver2" valign="top">
  80. Direccion:
  81. </td>
  82. <td>
  83. <textarea name="Direccion" cols="24" rows="4">
  84. </td>
  85. </tr>
  86. <fieldset id="Datos3">
  87.  
  88. <legend id="leg3">Información Adicional</legend>
  89. <tr>
  90. <td class="ver2">
  91. Email:
  92. </td>
  93. <td>
  94. <input type="text" name="Email" size='30' />
  95. </td>
  96. </tr>
  97. <tr>
  98. <td class="ver2">
  99. Edad:
  100. </td>
  101. <td>
  102. <input type="text" name="Edad" size='30' />
  103. </td>
  104. </tr>
  105. <tr>
  106. <td colspan="2" class="al" align="center">
  107. <input type="submit" value="Guardar" />
  108. </td>
  109. </tr>
  110. </form>
  111. </div>
  112. </div>
  113. <div id="pie">
  114. Creado por Emma Gabriela Colorado Macías
  115. </div>
  116. </div>
  117. </body>

el css, no lo toque ni revisé, pero, no garantizo nada porque si corregí los id repetidos de algunos elementos.


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 01/11/2010, 19:37
 
Fecha de Ingreso: octubre-2010
Mensajes: 93
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Ayuda con diseño

si, eso ya lo revisé muchisimas gracias n_n
ahora solamente me keda corregir el Field1 que ese por mas que le muevo no logro que se mire igual en IE que en google chrome, en google chrome se mira muy bien, pero en IE se corre el color hacia arriba
  #16 (permalink)  
Antiguo 02/11/2010, 02:21
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 7 meses
Puntos: 3
Respuesta: Ayuda con diseño

Puedes probar a definir las medidas de los elementos con los que tienes problemas.

Saludos.

Etiquetas: diseño
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




La zona horaria es GMT -6. Ahora son las 14:31.