Foros del Web » Creando para Internet » HTML »

Se ve mal el lateral

Estas en el tema de Se ve mal el lateral en el foro de HTML en Foros del Web. Tengo un problema, estoy haciendo el segundo lateral de una pagina y me esta pegando un salto de linea cosa que se me esta viendo ...
  #1 (permalink)  
Antiguo 18/02/2010, 13:31
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 7 años, 10 meses
Puntos: 0
Se ve mal el lateral

Tengo un problema, estoy haciendo el segundo lateral de una pagina y me esta pegando un salto de linea cosa que se me esta viendo asi



Me parece raro por que las medidas me estan dando todas justas aca dejo los codigos html y css:

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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <meta name="description" content="muchas cosas"/>
  5. <meta http-equiv="Refresh" content="60;URL=">  
  6. <link href="Estilos.css" type="text/css" rel="stylesheet"/>
  7. <title>Bienvenidos a mi pagina</title>
  8. </head>
  9. <div id="contenedor">
  10.     <div id="cabezera">
  11.     <img src="imagenes/Cabezera.jpg" alt="Cabezera-web" width:="800" height="70"/></div>
  12.         <ul id="menuh">
  13.  
  14.         <li><a href="#" class="estilo-menuh">Nada</a></li>
  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.         </ul>
  19. <div id="cuerpo">
  20.     <div id="lateral">
  21.  
  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.  
  30.     </div>
  31.     <!-- el medio -->
  32.     <div id="centro">
  33.     </div>
  34.     <!-- lateral2 -->
  35.     <div id="lateral2">
  36.     </div>
  37. </div>
  38. </div>

Código CSS:
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:50em;
  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. font-weight:bold;
  107. }
  108.  
  109. /*2� imagen boton*/
  110.  
  111. #menuv a:hover
  112. {
  113. }
  114.  
  115. #centro
  116. {
  117. width:30em;
  118. height:20em;
  119. background-color:#FF0000;
  120. }
  121.  
  122. #lateral2
  123. {
  124. float:right;
  125. width:10em;
  126. height:20em;
  127. background-color:#006666;
  128. }
  #2 (permalink)  
Antiguo 19/02/2010, 13:16
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Se ve mal el lateral

debes agregar al div centro ("float:left;" en el archivo css) en
  #3 (permalink)  
Antiguo 19/02/2010, 13:17
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Se ve mal el lateral

#centro
{
width:30em;
height:20em;
background-color:#FF0000;
float:left; // Agregarle esta línea
}
  #4 (permalink)  
Antiguo 19/02/2010, 19:37
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Se ve mal el lateral

Uuuu mil gracias joseph por la soluciòn; Otra pregunta tengo, por que si no le pongo "float:left" el segundo lateral pega un salto de linea a que se debe esto es mi duda
  #5 (permalink)  
Antiguo 19/02/2010, 19:42
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Se ve mal el lateral

Ok, lo que te queda es ajustar los tamaños para que queden acoplados, porque queda un espacio entre el div del centro y el lateral 2. Eso lo ajustas modificando el ancho de los div (Me imagino que le colocarás mas al del centro.

no se cuanto le debes aumenta, no recuerdo la medida em; yo uso píxeles, pero intenta colocándole 40em;

#centro
{
width:40em;
height:20em;
background-color:#FF0000;
float:left; // Agregarle esta línea
}
  #6 (permalink)  
Antiguo 19/02/2010, 19:47
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Se ve mal el lateral

[Otra pregunta tengo, por que si no le pongo "float:left" el segundo lateral pega un salto de linea a que se debe esto es mi duda[/QUOTE]

No sabría darte una respuesta muy certera, pero a mi parecer (Como los div no estan unidos como las tablas, debes decirte tamaño y donde van a estar (porque como su nombre lo dice float, estan como flotando en la pág. y hay que ubicarlas configurando su ubicación, tamaño, etc..) al no colocarle nada el va a tratar de ubicarse donde cree que va (creo que por defecto busca el centro).
  #7 (permalink)  
Antiguo 19/02/2010, 20:48
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Se ve mal el lateral

Claro por que yo lo veia de una forma que por ejemplo si bueno sabemos que el primer lateral flota para la izquierda, el segundo lateral para la derecha, entonces el centro no deberia flotar ya que no esta ni de izquierda y ni de derecha; Entonces estaba bastante confundido por que primero pensaba ponerle float:center cosa que no funciono.
Gracias por la solucion
  #8 (permalink)  
Antiguo 19/02/2010, 20:53
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Se ve mal el lateral

Si logicamente debería funcionar así, pero al del centro hay que pegarlo a algunos de los lados (Creo que si lo colocas hacia la derecha también funciona). bueno cualquier cosa postea a ver si te podemos ayudar.
  #9 (permalink)  
Antiguo 20/02/2010, 09:15
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Se ve mal el lateral

Despues otro problema que tengo es cuando abro la pagina con el internet explorer, el menu horizontal se ve muy mal y despues el cuerpo de la pagina tambien eso tampoco se que puede ser
  #10 (permalink)  
Antiguo 20/02/2010, 13:05
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Se ve mal el lateral

Debes especificar con detalles el problema
  #11 (permalink)  
Antiguo 21/02/2010, 04:33
 
Fecha de Ingreso: febrero-2010
Mensajes: 30
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Se ve mal el lateral

Claro a lo que yo me refiero que con el "browser" firefox la pagina se visualiza correctamente pero ahora si utilizo "Internet explorer" se visualiza mal el menu horizontal y el cuerpo de la pagina como el segundo lateral y entre otras entidades; Lo que decia, es a que se debe este error de que se visualize mal en internet explorer
  #12 (permalink)  
Antiguo 21/02/2010, 04:50
 
Fecha de Ingreso: febrero-2003
Mensajes: 233
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: Se ve mal el lateral

la verdad es que deberías volver a envíar el código con las moficaciones para chequear, porque cuando ví el error del float... se veía bien en IE

Etiquetas: lateral, mal
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 09:18.