2

Texto un proyecto que, cuando se reescala, las letras se desbordan y las imágenes se ponen donde quieren.

Arreglé lo de las letras con un <meta name="viewport" content="width=device-width, initial-scale=1"> Pero las imágenes seguían comiéndose el texto cuando redimensionas la página:

introducir la descripción de la imagen aquí

body {
	color: #FF0000;
	font: 14px Sans-Serif;
	padding: 50px;
	background: #eee;
}

h1 {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
}

p {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
	font-size: 17px;
}

.imagenICO {
	width: 200px;
	height: 150px;
	position: absolute;
	right: 0px;
}

.logo {
	width: 200px;
	height: 81px;
	position: absolute;
	margin-top: 40px;
}

#container {
	box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
	position: relative;
	background: white; 
}

table {
	background-color: #FFFFFF;
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0;
}

th {
	background-color: #FF0000 ;
	color: #FFF;
	cursor: pointer;
	padding: 5px 10px;
}

th small {
	font-size: 9px; 
	color: black;
}

td, th {
	text-align: left;
}

a {
	text-decoration: none;
	color: black;
}
/*
Cambia color de letra
*/
td a {
	color: black;
	display: block;
	padding: 10px 10px;
	font-size: 16px;
}
th a {
	padding-left: 0;
	color: #FFE800;
}

td:first-of-type a {
	background: url(./.images/file.png) no-repeat 10px 50%;
	padding-left: 35px;
}
th:first-of-type {
	padding-left: 35px;
}

td:not(:first-of-type) a {
	background-image: none !important;
} 

tr:nth-of-type(odd) {
	background-color: #FFFFFF;
}

tr:hover td {
	background-color:#DF2727;
}

tr:hover td a {
	color: #FFF;
}
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="./.style.css">
   <script src="./.sorttable.js"></script>
</head>

<body>
<div id="container">
	
	<a title="Logytel" href="http://logytel.es"><img class="logo" src="../LGYTL_LOGO.png" alt="Logytel" /></a>
	<img src="https://www.fundacion-affinity.org/sites/default/files/el-gato-necesita-tener-acceso-al-exterior.jpg" class="imagenICO">

	<h1>Titulo</h1>
	<p>Frase laaaaaaaaaaaaaaaaaaaarga de prueeeeeeeeeeeeeba para ver como se come la letra la imagen.</p>
	<p>Frase laaaaaaaaaaaaaaaaaaaarga de prueeeeeeeeeeeeeba para ver como se come la letra la imagen.</p>

	<table class="sortable">
	    <thead>
		<tr>
			<th>Nombre Fichero</th>
			<th>Tipo</th>
			<th>Tamaño</th>
			<th>Fecha de modificación</th>
		</tr>
		
	    </thead>
   </table>
  </div>
</body>
</html>

Quiero añadir la clase que hace que las imágenes sean responsive:

.responsive {
   max-width: 100%;
   height: auto;
}

Pero si añado la clase responsive a las imágenes, se les va el estilo asignado (obviamente, porque tiene el nombre de otra clase sin el estilo definido anteriormente). Por lo que hice un class="responsive logo" para la imagen de la izquierda y un class="responsive imagenICO" para la de la derecha, con el estilo correspondiente cada una. (Una manera que aprendí hace poco, me sirvió para las clases como material-icons o flex-container, no sé si la estoy usando bien con esto)

Teniendo así el css:

.responsive {
   max-width: 100%;
   height: auto;
}

.imagenICO {
    width: 200px;
    height: 150px;
    position: absolute;
    right: 0px;
}

.logo {
    width: 200px;
    height: 81px;
    position: absolute;
    margin-top: 40px;
}

Y así el html:

<a title="Logytel" href="http://logytel.es"><img class="responsive logo" src="../LGYTL_LOGO.png" alt="Logytel" /></a>

    <img src="https://www.fundacion-affinity.org/sites/default/files/el-gato-necesita-tener-acceso-al-exterior.jpg" class="responsive imagenICO">

Pero no dio resultado. Quiero que las imágenes tengan el mismo estilo que tienen actualmente la del snippet, pero que al redimensionar, las imágenes se ajusten al contenido y no se coman las letras.

Quizá eso es lo único que me atraviesa como los mil demonios, siempre ando con problemas relacionados de este tipo.

3
  • Exacto deberás mirar los diferentes métodos que tienes para posicionar textos e imágenes , posiciones relativas , ... en este caso utilizas posiciones absoluta, es decir, los elementos se situaran todos teniendo las mismas coordenadas de inicio, por lo que si no tienes el suficiente cuidado y colocas dos elementos que empizen en las mismas coordenadas(0,0) dependiendo de sus anchos y altos, se verán superposicionados, o puede que un elemento tape a todos los que tiene detrás. Commented el 12 feb. 2020 a las 7:46
  • Relacionado, y quizás te sirva de ayuda: ¿Cual es la diferencia entre position: relative, position: absolute y position: fixed?
    – x3k
    Commented el 12 feb. 2020 a las 8:01
  • ¡Gracias por la info! Está muy bien explicado, aunque en mi caso se arregló con un display: flex y un float en cada imagen para colocarlas, así que no usé position en ningún lado en el resultado final
    – Lucía
    Commented el 12 feb. 2020 a las 8:13

2 respuestas 2

6

La propiedad position: absolute provoca que el elemento deje de ejercer espacio respecto al flujo normal de la Web, haces que no esté posicionado. Esto provoca que el texto ignore el espacio que ocupa la imagen, provocando que "se meta dentro".

La opción más directa de afrontar tu problema es cambiar el position: absolute por un float: right.

body {
	color: #FF0000;
	font: 14px Sans-Serif;
	padding: 50px;
	background: #eee;
}

h1 {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
}

p {
	text-align: center;
	padding: 20px 0 12px 0;
	margin: 0;
	font-weight: strong;
	font-size: 17px;
}

.imagenICO {
	width: 200px;
	height: 150px;
  float: right;
  margin-left: 10px;
}

.logo {
	width: 200px;
	height: 81px;
	position: absolute;
	margin-top: 40px;
}

#container {
	box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5);
	position: relative;
	background: white; 
}

table {
	background-color: #FFFFFF;
	border-collapse: collapse;
	width: 100%;
	margin: 15px 0;
}

th {
	background-color: #FF0000 ;
	color: #FFF;
	cursor: pointer;
	padding: 5px 10px;
}

th small {
	font-size: 9px; 
	color: black;
}

td, th {
	text-align: left;
}

a {
	text-decoration: none;
	color: black;
}
/*
Cambia color de letra
*/
td a {
	color: black;
	display: block;
	padding: 10px 10px;
	font-size: 16px;
}
th a {
	padding-left: 0;
	color: #FFE800;
}

td:first-of-type a {
	background: url(./.images/file.png) no-repeat 10px 50%;
	padding-left: 35px;
}
th:first-of-type {
	padding-left: 35px;
}

td:not(:first-of-type) a {
	background-image: none !important;
} 

tr:nth-of-type(odd) {
	background-color: #FFFFFF;
}

tr:hover td {
	background-color:#DF2727;
}

tr:hover td a {
	color: #FFF;
}
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="./.style.css">
   <script src="./.sorttable.js"></script>
</head>

<body>
<div id="container">
	
	<a title="Logytel" href="http://logytel.es"><img class="logo" src="../LGYTL_LOGO.png" alt="Logytel" /></a>
	<img src="https://www.fundacion-affinity.org/sites/default/files/el-gato-necesita-tener-acceso-al-exterior.jpg" class="imagenICO">

	<h1>Titulo</h1>
	<p>Frase laaaaaaaaaaaaaaaaaaaarga de prueeeeeeeeeeeeeba para ver como se come la letra la imagen.</p>
	<p>Frase laaaaaaaaaaaaaaaaaaaarga de prueeeeeeeeeeeeeba para ver como se come la letra la imagen.</p>

	<table class="sortable">
	    <thead>
		<tr>
			<th>Nombre Fichero</th>
			<th>Tipo</th>
			<th>Tamaño</th>
			<th>Fecha de modificación</th>
		</tr>
		
	    </thead>
   </table>
  </div>
</body>
</html>

3

Tu problema es usar position: absolute; para acomodar las imágenes, es una mala practica en tu caso, debes usar float (un tanto anticuado) o mejor aun display:flex

---- A petición del usuario aquí van sus ejemplos

1.- si "Float" es anticuado en cierta forma, no por que ya no sea valido u obsoleto, sino porque ya tenemos mejor soporte para flex en cuanto a posicionamiento, este es mas recomendado y usado (al menos de mi parte y conocidos).

Sumale a que float saca los componentes de su flujo normal y hay que agregar un clear

.header1{background:#fe0;margin-bottom:100px}
.header1 img{float:left; margin: 0 12px 12px 0}
.header1 img+img{float:right; margin: 0 0 12px 12px}
.header1:after{display:block;content:"";width:100%;height:0;clear:both;}

.header2{background:#fe0;margin-bottom:100px}
.header2 img{float:left; margin: 0 12px 12px 0}
.header2 img+img{float:right; margin: 0 0 12px 12px}

.header3{background:#fe0}
.header3 .logo{float:left; margin: 0 12px 12px 0}
.header3 .elemento{float:right; margin: 0 0 12px 12px}
<div class="header1">
  <img src="http://placeimg.com/200/120/any" class="logo" alt="">
  <img src="http://placeimg.com/250/120/any" alt="">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque excepturi quod ab, sint asperiores alias maiores, veniam officiis obcaecati, a necessitatibus dolore odio dolorum velit nobis. Laboriosam est architecto iste deleniti neque 
</div>

<div class="header2">
  <img src="http://placeimg.com/200/120/any" class="logo" alt="">
  <img src="http://placeimg.com/250/120/any" class="elemento" alt="">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque excepturi quod ab, sint asperiores alias maiores, veniam officiis obcaecati, a necessitatibus dolore odio dolorum velit nobis. Laboriosam est architecto iste deleniti neque p
</div>

<div class="header3">
  <img src="http://placeimg.com/200/120/any" class="logo" alt="">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque excepturi quod ab, sint asperiores alias maiores, veniam officiis obcaecati, a necessitatibus dolore odio dolorum velit nobis. Laboriosam est architecto iste deleniti neque 
  <img src="http://placeimg.com/250/120/any" class="elemento" alt="">
</div>

2.- aqui te va un ejemplo con flex y mira como es mas sencillo

.header4{
  display:flex;
  background:#fe0
}
<div class="header4">
  <div class="logo"><img src="http://placeimg.com/200/120/any" alt=""></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus error quas alias veritatis adipisci delectus molestias, libero maxime! Obcaecati, laboriosam!</div>
  <div class="elemento"><img src="http://placeimg.com/250/120/any" alt=""></div>
</div>

Notese que yo use solo imagenes pero funciona con cualquier elemento

2
  • 1
    ¿float anticuado? ¿Puedes razonarlo? Ademas tu respuesta se vería mucho mejor y mas completa si muestras como funciona con un snippet o pones el código de los 2 ejemplos que has mencionado.
    – x3k
    Commented el 12 feb. 2020 a las 7:57
  • Tu respuesta me sirvió de guía, pero para que fuese una buena respuesta, debería tener un ejemplo de uso como tal. Conseguí lo que quería, aunque añadiendo alguna cosa más. Si pones un código de ejemplo de uso, la marcaré como aceptada. Muchas gracias
    – Lucía
    Commented el 12 feb. 2020 a las 8:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.