Foros del Web » Creando para Internet » CSS »

width 100% ie

Estas en el tema de width 100% ie en el foro de CSS en Foros del Web. este es mi problema: estoy haciendo una web donde tengo una capa pegada al borde de arriba del navegador. Le puse width:100% y en IE ...
  #1 (permalink)  
Antiguo 07/04/2011, 10:27
 
Fecha de Ingreso: abril-2011
Mensajes: 4
Antigüedad: 6 años, 8 meses
Puntos: 0
width 100% ie

este es mi problema: estoy haciendo una web donde tengo una capa pegada al borde de arriba del navegador. Le puse width:100% y en IE no me la dimensiona entera.

Aqui esta el codigo CSS:
Código CSS:
Ver original
  1. .tb {
  2. position: absolute;
  3. top: 0px;
  4. left: 0px;
  5. width: 100%;
  6. height: 50px;
  7. background-color: #000;
  8. }
  #2 (permalink)  
Antiguo 07/04/2011, 11:02
 
Fecha de Ingreso: febrero-2010
Ubicación: Republica Dominicana
Mensajes: 53
Antigüedad: 7 años, 10 meses
Puntos: 4
Respuesta: width 100% ie

No utilices porcentaje, utiliza Pixeles. asi seria mejor y mas compatible.
  #3 (permalink)  
Antiguo 07/04/2011, 11:13
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: width 100% ie

usa la regla !important. también prueba con la propiedad min-width
  #4 (permalink)  
Antiguo 07/04/2011, 12:09
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: width 100% ie

Quítale el width y, en teoría (ya se sabe como es IE), debería cogerte todo el ancho de la ventana de manera automática.

Un saludo
  #5 (permalink)  
Antiguo 07/04/2011, 12:36
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: width 100% ie

Cita:
Iniciado por fishdesign Ver Mensaje
Quítale el width y, en teoría (ya se sabe como es IE), debería cogerte todo el ancho de la ventana de manera automática.

Un saludo
sí, es lo que tiene ie. que es así de caprichoso. de donde sacas esos??

Cita:
.tb {
position: absolute;
top: 0px;
left: 0px;
/*width: 100%;*/
height: 50px;
background-color: #000;
}


<div class="tb">
el width es este
</div>
el largo de un bloque se adapta; o al valor de la propiedad width, al largo del contenedor (width con unidades relativas) o al largo del contenido

edito: la única manera, que yo conozco, de hacer que el bloque ocupe el 100% del largo sin usar la propiedad width
Cita:
* {
margin: 0;
padding: 0;
position: relative;
}

html, body {
width: 100%;
}

.tb {
positon: absolute;
top: 0px;
left: 0px;
height: 50px;
background-color: #000;
}

Última edición por IsaBelM; 07/04/2011 a las 12:49
  #6 (permalink)  
Antiguo 07/04/2011, 13:46
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: width 100% ie

@IsaBelM
Aquí te dejo un ejemplo de un screenshot de un layout que maqueté no hace mucho.
Es IE8 (también he hecho la prueba en Vista de Compatibilidad y se ve exactamente igual) y la imagen de ese mismo screen es cross-browser.

http://i54.tinypic.com/jacqcw.png

El código es tan simple como el efecto que queremos:

Código CSS:
Ver original
  1. .top{height: 17px; background-color:#5c5c5c;}

En mi ejemplo, el html sería:

Código HTML:
Ver original
  1. <div id="subwrapper">
  2.     <div class="top"></div>
  3.     <div class="bck"></div>
  4. </div>

El id "subwrapper" no tiene ninguna propiedad, por lo que el class "top" no está heredando nada.

@andoniroy
El top y left en 0px tal y como has puesto en tu primer código no debería estar, ya que previamente deberías haber hecho un css reset, por lo que no sería necesario.
  #7 (permalink)  
Antiguo 07/04/2011, 14:49
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
Respuesta: width 100% ie

k tal.

Prueba con este codigo:

body{margin:0;overflow-y:auto}

#tb {
position:absolute;
width: 100%;
height: 50px;
margin:0px;
background: #000
}

No te recomiendo que uses pixeles ya que como sabes actualmente se manejan diferentes resoluciones.
  #8 (permalink)  
Antiguo 07/04/2011, 16:14
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: width 100% ie

Cita:
Iniciado por fishdesign Ver Mensaje
@IsaBelM
Aquí te dejo un ejemplo de un screenshot de un layout que maqueté no hace mucho.
Es IE8 (también he hecho la prueba en Vista de Compatibilidad y se ve exactamente igual) y la imagen de ese mismo screen es cross-browser.

http://i54.tinypic.com/jacqcw.png

El código es tan simple como el efecto que queremos:

Código CSS:
Ver original
  1. .top{height: 17px; background-color:#5c5c5c;}

En mi ejemplo, el html sería:

Código HTML:
Ver original
  1. <div id="subwrapper">
  2.     <div class="top"></div>
  3.     <div class="bck"></div>
  4. </div>

El id "subwrapper" no tiene ninguna propiedad, por lo que el class "top" no está heredando nada.
has hecho trampa se te ha olvidado las propiedades: position, top y left

edito: incluso sabes por que funcionó esto
Cita:
* {
margin: 0;
padding: 0;
position: relative;
}

html, body {
width: 100%;
}

.tb {
positon: absolute;
top: 0px;
left: 0px;
height: 50px;
background-color: #000;
}
por que no la propiedad position era rechazada ya que no está bien escrita. así que para resumir al final se ha de usar la propiedad width

Última edición por IsaBelM; 07/04/2011 a las 16:28
  #9 (permalink)  
Antiguo 07/04/2011, 17:37
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: width 100% ie

El top y left están a 0px en el reset, pero en ningún caso se pone porcentaje ni se indica un ancho y respecto al position, no hay nada de él en ese reset.
Así que no veo eso de las "trampas" xD
  #10 (permalink)  
Antiguo 07/04/2011, 17:51
 
Fecha de Ingreso: abril-2011
Mensajes: 4
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: width 100% ie

Cita:
Iniciado por frank_harbey12 Ver Mensaje
k tal.

Prueba con este codigo:

body{margin:0;overflow-y:auto}

#tb {
position:absolute;
width: 100%;
height: 50px;
margin:0px;
background: #000
}

No te recomiendo que uses pixeles ya que como sabes actualmente se manejan diferentes resoluciones.
¡¡GRACIAS, ME FUNCIONO A LA PERFECCION!! claro ahora entiendo, me fije que en IE en un textarea me mostraba la barra de scroll vertical, mientras que en el resto de navegadores no. supongo que por la misma razon habria ese espacio en blanco cuando hacia width:100%.

Gracias al resto de gente (gdls, IsaBelM y fishdesign) por haberme ayudado.

Bueno a gdls no tanto porque solo me dijo:

Cita:
Iniciado por gdls Ver Mensaje
No utilices porcentaje, utiliza Pixeles. asi seria mejor y mas compatible.
A esto te digo lo que me ha dicho frank_harbey12 no todo el mundo usa la misma resolucion, unos pueden tener un ancho de 1280 y otros uno de 1024, y otros otra, por eso he usado porcentaje.
  #11 (permalink)  
Antiguo 07/04/2011, 18:04
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: width 100% ie

Vuelvo a decir que no es necesario usar % y es más, no es nada recomendable.
Si puedes evitarlo, porque usarlo?

Es super sencillo hacer esto y te vas a ahorrar poner propiedades de más y que quizás te den problema.


Para los que creen que no es posible.

Copien el siguiente código en un html y abranlo ;)

Queda demostrado que no es necesario ni siquiera el uso de la palabra "width" en todo el código y mucho menos porcentajes.



Código HTML:
Ver original
  1.     <style>
  2.         html{margin:0;padding:0;vertical-align:baseline;} /*Hack para ajustar el div al top, pero no influye en su ancho */
  3.  
  4.         body{background-color: #f6f6f6;}
  5.         .top{height: 30px; background-color: #000000;}
  6.         .content{}
  7.     </style>
  8. </head>
  9.     <div class="top"></div>
  10.     <div class="content">Lorem ipsum dolor sit amet</div>
  11. </body>
  12. </html>


andoniroy te recomiendo que uses un reset, ya que te puede salvar de muchos errores y te ayudará en crear una web visible para todos los navegadores.


Un saludo
  #12 (permalink)  
Antiguo 07/04/2011, 18:39
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: width 100% ie

buenas...

@fishdesign,
como ya te dijo @isabelm. estas obviando el factor de que el elemento -de acuerdo al autor- tiene posicion absoluta. en este caso, el elemento con tal propiedad tiene un flujo distinto al resto de los elementos. lo que significa, que ya no se deja llevar por las mismas normas. cuando un elemento tiene posicion absoluta, las dimensiones del elemento se adaptan de acuerdo a su contenido si carece de la propiedad width. por tanto, hay dos soluciones para que el elemento se adapte al ancho del navegador. usando la propiedad width, obligadamente debes asignar como valor 100%. la otra alternativa, que al menos me funciona en firefox3+, chrome e iexplorer8, es con la propiedad left y right. para este caso, asignando el valor cero.

__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #13 (permalink)  
Antiguo 07/04/2011, 18:56
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: width 100% ie

zerokilled, no había leído eso.
Así que si tiene posición absoluta, pues cambiará.

No obstante también habría que ver el por qué tiene posición absoluta, ya que quizás no lo necesite.
  #14 (permalink)  
Antiguo 07/04/2011, 19:18
 
Fecha de Ingreso: abril-2011
Mensajes: 4
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: width 100% ie

Cita:
Iniciado por fishdesign Ver Mensaje
zerokilled, no había leído eso.
Así que si tiene posición absoluta, pues cambiará.

No obstante también habría que ver el por qué tiene posición absoluta, ya que quizás no lo necesite.
Uso posicion absoluta porque en el ejemplo que puse solo uso una capa pegada al borde de arriba del navegador, sin embargo en la pagina que estoy haciendo tengo dos capas practicamente iguales, una arriba y otra abajo, las dos con position:absolute, la de arriba con top:0px y la de abajo con bottom:0px

Si hay otra forma mejor de hacerlo soy todo oidos, debo decir que cuando di programacion web me lo enseño una profesora que no sabia mucho, claro que despues de eso segui aprendiendo por mi lado y mejore bastante, pero hay algunas cosas de las que me enseñaron que sigo usando (position:absolute es una).
  #15 (permalink)  
Antiguo 07/04/2011, 20:03
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 6 años, 8 meses
Puntos: 95
Respuesta: width 100% ie

Si lo quieres fijo no vas a tener otra opción me temo.

No obstante, si ves que te da problemas, puedes sacar el ancho de la ventana con JS y te devolverá el valor en px...o si ya usas jQuery, con .width();
  #16 (permalink)  
Antiguo 08/04/2011, 07:11
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: width 100% ie

Cita:
Iniciado por fishdesign Ver Mensaje
Si lo quieres fijo no vas a tener otra opción me temo.

No obstante, si ves que te da problemas, puedes sacar el ancho de la ventana con JS y te devolverá el valor en px...o si ya usas jQuery, con .width();
dios, no das tu brazo a torcer. como le recomiendas implicar javascript o jquery para hacer eso?? sabes que hay gente que navega con javascript deshabilitado?? sabes que has de cargar una librería de no menos de 25kb?? por cierto, que navegador tiene problemas con las unidades relativas??

Etiquetas: 100, width
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 02:41.