Foros del Web » Creando para Internet » CSS »

problema con el div que no mantiene su posicion

Estas en el tema de problema con el div que no mantiene su posicion en el foro de CSS en Foros del Web. buenas de nuevo. tengo un problema. he colocado un div principal y dentro del div principal coloque divs de 2 columnas. un div para la ...
  #1 (permalink)  
Antiguo 27/01/2010, 16:44
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Pregunta problema con el div que no mantiene su posicion

buenas de nuevo. tengo un problema. he colocado un div principal y dentro del div principal coloque divs de 2 columnas. un div para la izquierda y un div para la derecha. dentro del div izquierda coloque otro div que se llama buscador. en el div buscador coloque una imagen.

pero cuando al div buscador que he colocado la imagen, le puse margin-top y margin-left de 15px y 5px, en ie7 se muestra bien pero en firefox, el div no mantiene su posicion, es decir, el div izquierda que contiene el div buscador se desplaza hacia abajo.

aqui dejo los resultados.

en firefox.



en ie7.



este es mi css.

Código CSS:
Ver original
  1. #cuerpo{
  2.     width:960px;
  3.     height:328px;
  4.     margin:0px auto;
  5. }
  6.  
  7. #cuerpo_izquierda {
  8.     width:200px;
  9.     height:327px;
  10.     float:left;
  11. }
  12. /*-top (superior), -bottom (inferior), left (izquierda) y right (derecha): */*/
  13. #cuerpo_derecha {
  14.     width:754px;
  15.     height:327px;
  16.     float:right;
  17. }
  18.  
  19. #buscador{
  20.     width:200px;
  21.     height:236px;
  22.     background:url(../imagenes/pedazo1.jpg) no-repeat; 
  23. }
  24.  
  25. #titulo_buscador{
  26.     margin-top:15px;
  27.     margin-left:5px;
  28. }
  29.  
  30. .espacio4{
  31.     width:200px;
  32.     height:13px;
  33. }

y este es mi codigo html.

Código HTML:
Ver original
  1. <div id="cuerpo">
  2.     <div id="cuerpo_izquierda">
  3.       <div id="buscador">
  4.         <div id="titulo_buscador"><img src="imagenes/titulo_buscador.jpg" border="0"/></div>
  5.         <br />
  6.         <div id="grupos_electrogenos">Grupos electrogenos</div>
  7.       </div>
  8.       <div class="espacio4"></div>
  9.       <div id="niveles_energia"> <img src="imagenes/pedazo2.jpg" border="0" /> </div>
  10.     </div>
  11.     <div id="cuerpo_derecha">
  12.       <script type="text/javascript">
  13. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','754','height','327','src','swf/banner2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','swf/banner2' ); //end AC code
  14.       </script>
  15.       <noscript>
  16.       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="754" height="327">
  17.         <param name="movie" value="swf/banner2.swf" />
  18.         <param name="quality" value="high" />
  19.         <embed src="swf/banner2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="754" height="327"></embed>
  20.       </object>
  21.       </noscript>
  22.     </div>
  23.   </div>

aque se debe que en ie7 se muestra bien, miestras que firefox se muestra lo contrario ?.

es por el tamaño de las imagenes ?.

que solucion puedo dar. hacer un hack css ?.

la verdad no domino mucho el tema de los hacks css.

me pueden ayudar en ello ?.
  #2 (permalink)  
Antiguo 27/01/2010, 17:04
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problema con el div que no mantiene su posicion

Te dejo una serie de links que apuntan a tu problema:

Cómo arreglar el modelo de caja CSS de Internet Explorer 5
Comentarios condicionales, filtros y hacks
CSS Differences in Internet Explorer 6, 7 and 8
hasLayout
Comentarios condicionales para IE
IE5-IE6 estandar con IE7.js

Saludos!
  #3 (permalink)  
Antiguo 27/01/2010, 20:20
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: problema con el div que no mantiene su posicion

gracias por los enlaces cristian_cena. revisando el 2do enlace sobre Comentarios condicionales, filtros y hacks

estuve revisando las condicionales, coloque la condicion.

Código HTML:
Ver original
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <!--[if (gte IE 5) & (lt IE 8)]>
  3. <link rel="stylesheet" type="text/css" href="css/estilos_teirsac.css">
  4. <![endif]-->
  5.  
  6. <link rel="stylesheet" type="text/css" href="css/estilos_teirsac.css">
  7. </head>
  8. </body>
  9. </html>

alli me esta diciendo que Este navegador es Internet Explorer 5 o cualquier versión más reciente que sea anterior a Internet .

mi consulta es. al momento de colocar la condicional con el css, se puede colocar despues de la condicion la etiqueta css ?.

es correcto asi ?.

Edito: otra consulta. consegui un menu hack css del blogger de unijimpe, quiero mostrar como este menu:



he modificado el menu hack css. modifique el div principal de la etiqueta <ul>.

Código CSS:
Ver original
  1. ul#navmenu-h {
  2.     margin: 0;
  3.     border: 0 none;
  4.     padding: 22px 16px;
  5.     width: 580px; /*For KHTML*/
  6.     list-style: none;
  7.     height: 15px;
  8.     z-index:5;
  9. }

modifique el padding como esta en la imagen que he mostrado. me muestra bien en ie7, ele firefox, pero en el ie6 no. es como si todo el div del menu se desplazara hacia abajo.

he colocado esta condicion del enlace que coloco usted cristian_cena.

Código CSS:
Ver original
  1. ul#navmenu-h {
  2.     margin: 0;
  3.     border: 0 none;
  4.     [if IE 5.0] padding: 22px 16px;
  5.     width: 580px; /*For KHTML*/
  6.     list-style: none;
  7.     height: 15px;
  8.     z-index:5;
  9. }

me salio bien en ie6, ie7 y en el firefox, pero parece que no ha reconocido el padding del menu <ul> como la imagen que he mostrado.



a que se debe que no reconoce el padding ?

saludos.

Última edición por esaenz22; 27/01/2010 a las 21:11 Razón: correccion.
  #4 (permalink)  
Antiguo 28/01/2010, 11:48
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problema con el div que no mantiene su posicion

cito="
mi consulta es. al momento de colocar la condicional con el css, se puede colocar despues de la condicion la etiqueta css ?. es correcto asi ?."


Copia y pega el siguiente codigo y guardalo como "cualquier_nombre.html" verás que a través del uso de comentarios condicionales se crea código solo para IE.

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
p{
color:black; 
margin:100px;
}
</style>


<!--[if IE]>
<style type="text/css">
p{
color:red; 
margin:0;
}
</style>
<![endif]-->


</head>
<body>

<p>solo se verá rojo en Internet Explorer</p>



<!--[if IE]>
<a href="/">Este enlace solo se verá en ie</a>
<![endif]-->



</body>
</html> 


Es mejor que utilizes comentarios condicionales a que uses hacks, pues de esta forma generas codigo exclusivo para ie y tus hojas de estilos estarán limpias.


Cito="...
he colocado esta condicion del enlace que coloco usted (usted? ) cristian_cena.

ul#navmenu-h {
margin: 0;
border: 0 none;
[if IE 5.0] padding: 22px 16px;
width: 580px; /*For KHTML*/
list-style: none;
height: 15px;
z-index:5;
}
... "


Pues, hazlo así:

ul#navmenu-h {
margin: 0;
border: 0 none;
padding: 22px 16px;
width: 580px;
list-style: none;
height: 15px;
z-index:5;
}

Y luego incorporas el cc:
<!--[if IE]> /*si quieres puedes buscar por versión de IE, fíjate en el enlace que te pasé*/
ul#navmenu-h {
padding: /*los valores que tu quieras*/;
}
<![endif]-->

Sugerencia: Diseña para firefrox, y luego utiliza los comentarios condicionales para igualar tu diseño en IE

Saludos!
  #5 (permalink)  
Antiguo 28/01/2010, 15:39
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Pregunta Respuesta: problema con el div que no mantiene su posicion

gracias por responder cristian_cena. olvide especificar que el menu en ie6 me muestra de esta manera.



creo que eso se debe al ul#navmenu-h.

Código CSS:
Ver original
  1. ul#navmenu-h {
  2. margin: 0;
  3. border: 0 none;
  4. padding: 22px 16px;
  5. width: 580px;
  6. list-style: none;
  7. height: 15px;
  8. z-index:5;
  9. }

porque me muestra de esa manera ?.

la condicion:

Código CSS:
Ver original
  1. <!--[if IE]> /*si quieres puedes buscar por versión de IE, fíjate en el enlace que te pasé*/
  2. ul#navmenu-h {
  3. padding: /*los valores que tu quieras*/;
  4. }
  5. <![endif]-->

lo coloco debajo del id ul#navmenu-h ?

saludos.

Última edición por esaenz22; 28/01/2010 a las 15:49 Razón: correccion.
  #6 (permalink)  
Antiguo 28/01/2010, 16:11
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problema con el div que no mantiene su posicion

Cito="lo colo debajo del id ul#navmenu-h ?"

Claro, mientras que por un lado creas los estilos para todos los navegadores, por otro vas creando los estilos específicos para IE. Fíjate en este enlace te lo explican uno a uno.

Crea estilos especificos para ie6:

<!--[if IE 6]>
/*AQUI LOS ESTILOS PARA TU MENU, ESTILOS QUE SOLO SE VERÁN EN IE6 */
<![endif]-->


Por último y para exterminar tus dudas, mira el código fuente de este ejemplo creado por el usuario Kseso?

Saludos!
  #7 (permalink)  
Antiguo 28/01/2010, 19:47
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: problema con el div que no mantiene su posicion

Por último y para exterminar tus dudas, mira el código fuente de este ejemplo creado por el usuario Kseso?

ya no quiere que siga preguntando ?.

bueno. gracias de todos modos.

saludos.
  #8 (permalink)  
Antiguo 28/01/2010, 20:40
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problema con el div que no mantiene su posicion

Cita:
Iniciado por esaenz22 Ver Mensaje
ya no quiere que siga preguntando ?
Use el termino "exterminar" por la calidad del ejemplo de Kseso?.
No tengo problema en ayudarte esaenz22. Si tus dudas persisten, ya sabes, para eso está el foro.
Espero te haya sido util mi aporte.

Saludos!
  #9 (permalink)  
Antiguo 28/01/2010, 20:42
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: problema con el div que no mantiene su posicion

entiendo. lo malinterprete mal.

cualquier consulta, lo pondre en el foro.

saludos.

Etiquetas: posicion
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 19:11.