4

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

sin 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="&lt;Directory&gt;";
				$size="&lt;Directory&gt;";
				$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="&lt;Website&gt;";
					}

			// Cleans up . and .. directories
				if($name=="."){$name=". (Current Directory)"; $extn="&lt;System Dir&gt;"; $favicon=" style='background-image:url($namehref/.favicon.ico);'";}
				if($name==".."){$name=".. (Parent Directory)"; $extn="&lt;System Dir&gt;";}
		}

	// 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">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="0"><a href="./prueba1">&lt;Directory&gt;</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">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="0"><a href="./prueba2">&lt;Directory&gt;</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">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="0"><a href="./prueba3">&lt;Directory&gt;</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:

con width height

Y el objetivo es que quede parecido a esto:

objetivo

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?

2
  • No, a lo que me refiero es a que edites el html desde el navegador para que te deje copiarlo y así lo pegas en la pregunta con la estructura ya generada de los tr que te ha generado el bucle for de php. 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.)
    – x3k
    el 28 feb. 2020 a las 7:55
  • 1
    Ahora creo que es a lo que te referías. He añadido url de logos de internet para que se vea mejor cómo es la imagen, y cómo no se redimensiona aunque lo indique.
    – Lucía
    el 28 feb. 2020 a las 8:03

1 respuesta 1

3

Si lo que quieres es que 2 elementos compartan la misma cabecera puedes hacer que el th de filename ocupe 2 columnas y después separar el contenido en 2 columnas.

Como sería la estructura:

_____________________________________________________
|___________________|__________|__________|__________|
|_________|_________|__________|__________|__________|
|_________|_________|__________|__________|__________|
|_________|_________|__________|__________|__________|

Colspan:

<th colspan="2">Nombre Fichero <br><span class="ingles">Filename</span></th>

Nota: he cambiado el orden de los td de la primera columna para que salgan en el orden que muestras en el ejemplo.

<tr class="dir">
    <td>
        <a href="./prueba1" class="imagen_directorio">prueba1</a>
    </td>
    <td>
        <img src="https://applesitges.com/wp-content/uploads/2019/04/Toshiba-Logo-256x256.png">
    </td>
    <td>
        <a href="./prueba1">&lt;Directory&gt;</a>
    </td>
    <td sorttable_customkey="0">
        <a href="./prueba1">&lt;Directory&gt;</a>
    </td>
    <td sorttable_customkey="20200227082634">
        <a href="./prueba1">Feb 27 2020 8:26 AM</a>
    </td>
</tr>

[Snippet] Solo cambios en el HTML:

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 colspan="2">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><a href="./prueba1" class="imagen_directorio">prueba1</a></td>
			<td><img src="https://applesitges.com/wp-content/uploads/2019/04/Toshiba-Logo-256x256.png"></td>
      <td><a href="./prueba1">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="0"><a href="./prueba1">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="20200227082634"><a href="./prueba1">Feb 27 2020 8:26 AM</a></td>
		</tr>
		<tr class="dir">
      <td><a href="./prueba2" class="imagen_directorio">prueba2</a></td>
			<td><img src="https://cdn.iconscout.com/icon/free/png-256/paypal-5-226456.png"></td>
			<td><a href="./prueba2">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="0"><a href="./prueba2">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="20200227082637"><a href="./prueba2">Feb 27 2020 8:26 AM</a></td>
		</tr>
		<tr class="dir">
      <td><a href="./prueba3" class="imagen_directorio">prueba3</a></td>
			<td><img src="https://lh3.googleusercontent.com/proxy/0U4udERPJf7RGa4-am2mzS7tUagiqv6Aw00-oyTz11L3ES1YAZ7DeqX-3TESHNI6U1PNNrZhChp2jnLptAcdNtwAHZ8fjUryl175KuckBdNomMqFg3q3cMxHxQNgk5dNinap2hSnyzd3SHVfVE5pMgrEskk1CkeJVK4"></td>
			<td><a href="./prueba3">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="0"><a href="./prueba3">&lt;Directory&gt;</a></td>
			<td sorttable_customkey="20200227082640"><a href="./prueba3">Feb 27 2020 8:26 AM</a></td>
		</tr>


	    </tbody>
	<tfoot></tfoot></table>

Tu Respuesta

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

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