Text a project that, when rescaled, the letters overflow and the images are placed where they want.
I fixed the letters with a <meta name="viewport" content="width=device-width, initial-scale=1">
But the images kept eating the text when you resized the page:
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>
I want to add the class that makes the images responsive :
.responsive {
max-width: 100%;
height: auto;
}
But if I add the responsive class to the images, the assigned style is lost (obviously, because it has the name of another class without the previously defined style). So I made one class="responsive logo"
for the image on the left and one class="responsive imagenICO"
for the one on the right, with the corresponding style for each one. (A way I learned recently, it worked for classes like material-icons
or flex-container
, I don't know if I'm using it right with this)
Having the css like this:
.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;
}
And so the 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">
But it didn't work. I want the images to have the same style as the one in the snippet currently has, but when resizing, the images fit the content and don't eat the letters.
Perhaps that is the only thing that crosses me like hell, I always have related problems of this type.
The property
position: absolute
causes the element to stop exerting space with respect to the normal flow of the Web, you make it not be positioned. This causes the text to ignore the space that the image occupies, causing it to "snap inside".The most direct option to deal with your problem is to change the
position: absolute
for afloat: right
.Your problem is using position: absolute; to accommodate the images, it is a bad practice in your case, you must use float (somewhat outdated) or better still display:flex
---- At the request of the user here are their examples
1.- If "Float" is outdated in a certain way, not because it is no longer valid or obsolete, but because we already have better support for flex in terms of positioning, this is more recommended and used (at least on my part and acquaintances ).
Add to that float removes the components from their normal flow and you have to add a clear
2.- Here is an example with flex and see how it is easier
Note that I use only images but it works with any element