Quiero edit el tamaño de una imagen, y alinearla con el respectivo texto, pero en cambio, cuando le asigno un width
y un height
en vez de cambiar el tamaño según se le ha asignado, se desplaza.
Sin asignarle un width
height
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Family</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./.style.css">
<script src="./.sorttable.js"></script>
</head>
<body>
<div id="container">
<h1>FAMILY</h1>
<table class="sortable">
<thead>
<tr>
<th>Nombre Fichero <br>
<span class="ingles">Filename</span></th>
<th>Tipo <br>
<span class="ingles">Type</span></th>
<th>Tamaño <br>
<span class="ingles">Size</span></th>
<th>Fecha de modificación <br>
<span class="ingles">Modification Date</span></th>
</tr>
</thead>
<tbody>
<?php
// Adds pretty filesizes
function pretty_filesize($file) {
$size=filesize($file);
if($size<1024){$size=$size." Bytes";}
elseif(($size<1048576)&&($size>1023)){$size=round($size/1024, 1)." KB";}
elseif(($size<1073741824)&&($size>1048575)){$size=round($size/1048576, 1)." MB";}
else{$size=round($size/1073741824, 1)." GB";}
return $size;
}
// Checks to see if veiwing hidden files is enabled
if($_SERVER['QUERY_STRING']=="hidden")
{$hide="";
$ahref="./";
$atext="Hide";}
else
{$hide=".";
$ahref="./?hidden";
$atext="";}
// Opens directory
$myDirectory=opendir(".");
// Gets each entry
while($entryName=readdir($myDirectory)) {
$dirArray[]=$entryName;
}
// Closes directory
closedir($myDirectory);
// Counts elements in array
$indexCount=count($dirArray);
// Sorts files
sort($dirArray);
// Loops through the array of files
for($index=0; $index < $indexCount; $index++) {
// Decides if hidden files should be displayed, based on query above.
if(substr("$dirArray[$index]", 0, 1)!=$hide) {
// Resets Variables
$favicon="";
$class="file";
// Gets File Names
$name=$dirArray[$index];
$namehref=$dirArray[$index];
// Gets Date Modified
$modtime=date("M j Y g:i A", filemtime($dirArray[$index]));
$timekey=date("YmdHis", filemtime($dirArray[$index]));
// Separates directories, and performs operations on those directories
if(is_dir($dirArray[$index]))
{
$extn="<Directory>";
$size="<Directory>";
$sizekey="0";
$class="dir";
// Gets favicon.ico, and displays it, only if it exists.
if(file_exists("$namehref/favicon.ico"))
{
$favicon=" style='background-image:url($namehref/favicon.ico);'";
$extn="<Website>";
}
// Cleans up . and .. directories
if($name=="."){$name=". (Current Directory)"; $extn="<System Dir>"; $favicon=" style='background-image:url($namehref/.favicon.ico);'";}
if($name==".."){$name=".. (Parent Directory)"; $extn="<System Dir>";}
}
// File-only operations
else{
// Gets file extension
$extn=pathinfo($dirArray[$index], PATHINFO_EXTENSION);
// Gets and cleans up file size
$size=pretty_filesize($dirArray[$index]);
$sizekey=filesize($dirArray[$index]);
}
$nombre_directorio = $name;
$url_imagen = '';
switch($nombre_directorio) {
case 'prueba1':
$url_imagen = './.LGYTL_LOGO.png'; break;
case 'prueba2':
$url_imagen = './.cocacola.png'; break;
case 'prueba3':
$url_imagen = './.LGYTL_LOGO.png'; break;
}
// Output
echo("
<tr class='$class'>
<td><img src='" .$url_imagen. "'><a href='./$namehref' class='imagen_directorio'>$name</a></td>
<td><a href='./$namehref'>$extn</a></td>
<td sorttable_customkey='$sizekey'><a href='./$namehref'>$size</a></td>
<td sorttable_customkey='$timekey'><a href='./$namehref'>$modtime</a></td>
</tr>");
}
}
?>
</tbody>
</table>
</div>
</body>
</html>
Lo que se muestra en el navegador:
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;
}
.ingles {
color: black;
}
p {
text-align: center;
padding: 20px 0 12px 0;
font-weight: bold;
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: 13px;
}
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;
}
.imagen_directorio{
float: left;
width: 40px;
height: 20px;
}
/* icons for file types (icons by famfamfam) */
/* images */
table tr td:first-of-type a[href$=".jpg"],
table tr td:first-of-type a[href$=".png"],
table tr td:first-of-type a[href$=".gif"],
table tr td:first-of-type a[href$=".svg"],
table tr td:first-of-type a[href$=".jpeg"]
{background-image: url(./.images/image.png);}
/* zips */
table tr td:first-of-type a[href$=".zip"]
{background-image: url(./.images/zip.png);}
/* css */
table tr td:first-of-type a[href$=".css"]
{background-image: url(./.images/css.png);}
/* docs */
table tr td:first-of-type a[href$=".doc"],
table tr td:first-of-type a[href$=".docx"],
table tr td:first-of-type a[href$=".ppt"],
table tr td:first-of-type a[href$=".pptx"],
table tr td:first-of-type a[href$=".pps"],
table tr td:first-of-type a[href$=".ppsx"],
table tr td:first-of-type a[href$=".xls"],
table tr td:first-of-type a[href$=".xlsx"]
{background-image: url(./.images/office.png)}
/* videos */
table tr td:first-of-type a[href$=".avi"],
table tr td:first-of-type a[href$=".wmv"],
table tr td:first-of-type a[href$=".mp4"],
table tr td:first-of-type a[href$=".mov"],
table tr td:first-of-type a[href$=".m4a"]
{background-image: url(./.images/video.png);}
/* audio */
table tr td:first-of-type a[href$=".mp3"],
table tr td:first-of-type a[href$=".ogg"],
table tr td:first-of-type a[href$=".aac"],
table tr td:first-of-type a[href$=".wma"]
{background-image: url(./.images/audio.png);}
/* web pages */
table tr td:first-of-type a[href$=".html"],
table tr td:first-of-type a[href$=".htm"],
table tr td:first-of-type a[href$=".xml"]
{background-image: url(./.images/xml.png);}
table tr td:first-of-type a[href$=".php"]
{background-image: url(./.images/php.png);}
table tr td:first-of-type a[href$=".js"]
{background-image: url(./.images/script.png);}
/* directories */
table tr.dir td:first-of-type a
{background-image: url(./.images/folder.png);}
img {
width:100px;
height: 80px;
}
<table class="sortable">
<thead>
<tr>
<th>Nombre Fichero <br>
<span class="ingles">Filename</span></th>
<th>Tipo <br>
<span class="ingles">Type</span></th>
<th>Tamaño <br>
<span class="ingles">Size</span></th>
<th>Fecha de modificación <br>
<span class="ingles">Modification Date</span></th>
</tr>
</thead>
<tbody>
<tr class="dir">
<td><img src="https://applesitges.com/wp-content/uploads/2019/04/Toshiba-Logo-256x256.png"><a href="./prueba1" class="imagen_directorio">prueba1</a></td><td><a href="./prueba1"><Directory></a></td>
<td sorttable_customkey="0"><a href="./prueba1"><Directory></a></td>
<td sorttable_customkey="20200227082634"><a href="./prueba1">Feb 27 2020 8:26 AM</a></td>
</tr>
<tr class="dir">
<td><img src="https://cdn.iconscout.com/icon/free/png-256/paypal-5-226456.png"><a href="./prueba2" class="imagen_directorio">prueba2</a></td>
<td><a href="./prueba2"><Directory></a></td>
<td sorttable_customkey="0"><a href="./prueba2"><Directory></a></td>
<td sorttable_customkey="20200227082637"><a href="./prueba2">Feb 27 2020 8:26 AM</a></td>
</tr>
<tr class="dir">
<td><img src="https://lh3.googleusercontent.com/proxy/0U4udERPJf7RGa4-am2mzS7tUagiqv6Aw00-oyTz11L3ES1YAZ7DeqX-3TESHNI6U1PNNrZhChp2jnLptAcdNtwAHZ8fjUryl175KuckBdNomMqFg3q3cMxHxQNgk5dNinap2hSnyzd3SHVfVE5pMgrEskk1CkeJVK4"><a href="./prueba3" class="imagen_directorio">prueba3</a></td>
<td><a href="./prueba3"><Directory></a></td>
<td sorttable_customkey="0"><a href="./prueba3"><Directory></a></td>
<td sorttable_customkey="20200227082640"><a href="./prueba3">Feb 27 2020 8:26 AM</a></td>
</tr>
</tbody>
<tfoot></tfoot></table>
Y sale de esta forma en el navegador, desplazándose y comiéndose parte del texto:
Y el objetivo es que quede parecido a esto:
He probado con todos los tipos de display
, con todos los position
, con text-align
, align-items
y nada. No cambia, y si cambia, no es como debe.
No sé qué debería estar cambiando para que me haga caso... Porque no creo que sea porque esté con código php, o quizá sí, no sé. En ese caso, ¿cómo debería hacerlo?
html
desde el navegador para que te deje copiarlo y así lo pegas en la pregunta con la estructura ya generada de lostr
que te ha generado el buclefor
dephp
. Lo puedes hacer como se indica aquí, si usas chrome es exactamente igual. También puedes copiar directamente el elemento table. (Voy eliminando comentarios para que no se alargue esto.)