En mi sitio web las imágenes se superponen mi principal contenido de texto cuando en un tamaño de pantalla menor. En mi casa estaba perfectamente bien, porque mi pantalla es mucho más grande, pero ahora estoy en la universidad y se ve horrible.

Existe algo que pueda hacer para solucionar esto?

#content {  
    font-size:16px;
    margin: 0 auto;
    width: 955px; 
}

Aquí está una imagen del problema:
http://i776.photobucket.com/albums/yy41/tom14431996/problem-1_zpsa410ef94.png

Como se puede ver en la imagen se superpone al texto.

Este es un código de ejemplo de cómo mi primera imagen, se añade:

#imageholder1 {
float: left;
left: 2%;
position: fixed;
top: 11%;
border: double;
border-color: #333;

}

Y este es mi código de texto:

#content {
    font-size:16px;
    margin: 0 auto;
    width: 955px; 
}
  • Se puede crear un violín? jsfiddle.net
  • Acaba de quitar position: fixed;
  • 2014 derechos de autor? uy….
  • float y position no se mezclan.
InformationsquelleAutor Tom Bailey | 2013-04-15

3 Comentarios

  1. 2

    Primero de todos, no de la posición de las imágenes con position: fixed; para su situación actual. position: fixed; es para mantener un elemento fijo en la pantalla, de manera que nunca se mueve. Al ver las imágenes en una pantalla más pequeña, el texto debe mover en algún lugar, por lo que se superpone a las imágenes fijas.

    Pruebe a establecer un ancho de su texto de la clase/id de algo como 50% por lo que se adapta a tu ancho de la pantalla. Me pueden ayudar si puedo ver un poco más de html/css.

    Intentar position: relative; en las imágenes.

  2. 1

    position: fixed es poner las imágenes sobre el texto. Mantener las imágenes en línea si desea el texto a mostrar su alrededor.

  3. 1

    Esto sucede, es porque estás usando position: fixed; – cuando haces eso, el elemento no ocupa espacio en el diseño, y va en la parte superior de la estática de los elementos en posición (el valor predeterminado). Su float: left; está haciendo nada aquí, ya que no se puede tener un elemento que flote y se fija la posición. Usted puede solucionar este problema mediante el uso de márgenes y/o relleno para garantizar un tamaño mínimo, por lo que los elementos fijos son siempre sobre la parte superior de los márgenes/relleno. O usted puede utilizar realmente flotar, lo que hará que el flujo de contenido alrededor de las imágenes.

    • Así que debo acaba de quitar el position: fixed; en todas las imágenes y, a continuación, la posición de ellos el uso de márgenes/relleno?
    • No, si usted está utilizando los márgenes/relleno sería en el contenido, para dar cuenta de la posición fija de las imágenes. Pero con el flotador en su lugar es definitivamente una mejor solución. En el caso de que usted probablemente quiera usar el margen así, pero por diferentes razones.

Dejar respuesta

Please enter your comment!
Please enter your name here