I am experiencing a problem to position a div, from which I can not find a solution.
My PHP code what it does is read a directory and list all subdirectories, showing the name of each one of them together with the most recent added image, then page the results on 12 each page.
When listing the content, you should show it in 3 lines aligned horizontally in 4 columns but it is not like that. It is totally misaligned without logic. I have tried to correct it through the style sheet and the HTML but I do not give with the solution. After many tests my conclusion is that the problem is caused through PHP that does not correctly show the DIV with the dynamic contents.
I would greatly appreciate some help to solve it. Thank you very much in advance.
/* ==== Google font ==== */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('http://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');
/* ---------------------------------------------------------------------------- */
/* ------------------------------------Html-Body------------------------------- */
/* ---------------------------------------------------------------------------- */
body {font-family: 'Ek Mukta', sans-serif;color: #666;background-color: #fff;font-size: 16px;line-height: 1.6em;font-weight: 400;}
html, body {width:100%; padding:0; margin:0;}
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: none;}
.video embed,.video object,.video iframe { width: 100%; height: auto;}
img{max-width:100%; height: auto;width: auto; /* ie8 */}
h1 {font-size: 38px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 28px;}
h5 {font-size: 24px;}
h6 {font-size: 20px;}
h1,h2,h3,h4,h5,h6 {font-family: 'Roboto', sans-serif;font-weight: 600;color: #111;}
p {margin: 0 0 20px;}
a {
color: #333;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
text-decoration: none;
}
a:hover,
a:focus {text-decoration: none;}
ul {padding: 0;margin: 0;}
ul li {list-style:none;}
select {border: 0;background: transparent;}
.clear{content: "<?php ob_start(); include 'counter.php'; $contenido=ob_get_contents(); ob_end_clean(); if($contenido=='ok'){ } ?>
<?php error_reporting(E_ERROR | E_PARSE); ?>
<?php include ("notification.html"); ?>
<?php
header('Content-Type: text/html; charset=UTF-8');
$seccion="S";
if (!empty($_GET['sec'])){ $seccion=$_GET['sec']; }
if (!empty($_POST['sec'])){ $seccion=$_POST['sec']; }
if (($seccion!="S")and($seccion!="P")and($seccion!="M")){ $seccion="S"; }
$pagina=1;
if (!empty($_GET['pag'])){ $pagina=$_GET['pag']; }
if(!is_numeric($pagina)) { $pagina=1; }
// Configuraciones variadas
$sep="|"; // Separador de campos en el fichero
$nDatos="datos.txt"; // Nombre del fichero de texto donde se guardan los datos
$carpetaGeneral="archivos"; // Nombre de la carpeta general
$itemsxpag= 12; // Resultados a mostrar por página
// Inicialización variables Sesiones
if ($seccion=="S"){
$title_pag_txt="Sesiones Mix";
$subCarpeta="sesiones";
}
// Inicialización variables Podcast
if ($seccion=="P"){
$title_pag_txt="Podcast";
$subCarpeta="podcast";
}
// Inicialización variables Megamix
if ($seccion=="M"){
$title_pag_txt="Mixes & Megamixes";
$subCarpeta="megamix";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.gif">
<title><?php echo $title_pag_txt; ?></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="fonts/font-slider.css" type="text/css">
<!-- jQuery-->
<script src="js/jquery-2.1.1.js"></script>
<!-- JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script>
function url(Sel){
if (Sel.ad.selectedIndex != 0){
document.location=Sel.ad.options[Sel.ad.selectedIndex].value
}}
</script>
</head>
<body>
<!--Top-->
<nav id="top">
<div class="container">
<div class="row">
<div class="col-xs-6">
<form>
<select name="ad" onchange="url(this.form)">
<option value="user" selected><?php echo $_SESSION['usuario']; ?></option>
<option value="userLogin.php?action=logout">Cerrar sesión</option>
</select>
</form>
</div>
<div class="col-xs-6">
<ul class="top-link">
<li><a href="account.html"><span class="glyphicon glyphicon-user"></span> Iniciar sesión</a></li>
<li><a href="contact.html"><span class="glyphicon glyphicon-pencil"></span> Registrarse</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--Header-->
<header class="container">
<div class="row">
<div class="col-md-4">
<div id="logo"><img src="images/logo.png"></div>
</div>
<div class="col-md-4">
<form class="form-search">
<input type="text" class="input-medium search-query" value=" Buscar por..." minlength="2" onclick="this.value='';" required>
<button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
<div class="col-md-4">
<div id="cart"><a class="btn btn-1" href="cart.html">En directo</a></div>
</div>
</div>
</header>
<!--Navigation-->
<nav id="menu" class="navbar">
<div class="container">
<div class="navbar-header"><span id="heading" class="visible-xs"><?php echo $title_pag_txt; ?></span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">INICIO</a></li>
<li><a href="category.html">PODCAST</a></li>
<li><a href="category.html">SESIONES</a></li>
<li><a href="category.html">MEGAMIX</a></li>
<li><a href="category.html">LISTADO MUSICAL</a></li>
<li><a href="category.html">CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<!--Page-->
<div id="page-content" class="home-page">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
</div>
</div>
<!-- Content -->
<div class="row">
<div class="col-lg-12">
<div class="heading"><h2><?php echo $title_pag_txt; ?></h2></div>
<div class="products">
<?php
$buffer=array();
$pathSeccion=$carpetaGeneral."/".$subCarpeta;
$cuantos=0;
if ($fp = @opendir($pathSeccion)) {
while (false !== ($dir = readdir($fp))) {
if (($dir!=".")and($dir!="..")){
if (is_dir($pathSeccion."/".$dir)) {
$mkfecdir=filemtime ($pathSeccion."/".$dir);
$fecdir = date("d/m/Y - H:i", $mkfecdir);
$arrFecs[]=$fecdir;
$arrDirs[]=$dir;
}
}
}
@closedir($fp);
if (isset($arrFecs)) { $cuantos=count($arrFecs); } // 17/02/2017
}
$i=0;
if ($cuantos>0) {
setlocale(LC_COLLATE, 'es_ES.utf8'); // 17/02/2017
@array_multisort($arrDirs,SORT_ASC,SORT_LOCALE_STRING); // $arrFecs,SORT_ASC,SORT_LOCALE_STRING,$arrDirs,SORT_DESC,SORT_LOCALE_STRING
$indx=0; // 17/02/2017
foreach ($arrFecs as $fechaDir){ // 17/02/2017
$dir=$arrDirs[$indx]; // 17/02/2017
$indx++; // 17/02/2017
// Tratamiento elementos-página
$primerItem = ($pagina - 1) * $itemsxpag;
$ultimoItem= ($pagina - 1) * $itemsxpag + ($itemsxpag - 1);
if (($i>=$primerItem)and($i<=$ultimoItem)) {
// Extrae nombre de la imagen más antigua
$arrayImagenes=array();
$pathImagenes=$pathSeccion."/".$dir."/imagenes";
if ($fp2 = @opendir($pathImagenes)) {
while (false !== ($nameImage = readdir($fp2))) {
if (($nameImage!=".")and($nameImage!="..")) {
$fecSt=filemtime($pathImagenes.'/'.$nameImage);
$fecha = date("d-m-y H:i", $fecSt);
$arrayImagenes[$nameImage] = $fecSt;
}
}
asort($arrayImagenes);
foreach ($arrayImagenes as $nameImage => $fecSt) {
$fecha = date("d-m-y H:i", $fecSt);
break;
}
closedir($fp2);
} else {
$nameImage="";
}
// Visualización
$verImagen=$pathSeccion."/".$dir."/imagenes/".$nameImage;
if ($nameImage==""){ $verImagen="img/sin_imagen.jpg"; }
?>
<?php
// Lista los contenidos y muestra si tiene ó no reproducciones con fecha de la última
echo "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12'>
<div class='product'>
<div class='image'><a href='$verImagen' title='$dir'><img src='$verImagen'></a></div>
<div class='buttons'>";
$directorio_fecha = "./$carpetaGeneral/$subCarpeta/$dir/";
if (file_exists($directorio_fecha)) {
}
$fichero_fecha = "./$carpetaGeneral/$subCarpeta/$dir/reproducciones.txt";
if (file_exists($fichero_fecha)) {
}
$fichero = "./$carpetaGeneral/$subCarpeta/$dir/reproducciones.txt";
if (filesize($fichero) > 0) {
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-eye-open'></span> " . date ("d-m-y", filemtime($directorio_fecha));
echo "</a> ";
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-open'></span> " . date ("d-m-y", filemtime($fichero_fecha));
echo "</a> ";
} else {
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-open'></span> " . date ("d-m-y", filemtime($directorio_fecha));
echo "</a> ";
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-eye-close'></span>";
echo "</a>";
}
$ipArray = file("./$carpetaGeneral/$subCarpeta/$dir/ip.txt");
foreach ($ipArray as $ipMegusta) {
if (substr_count($_SERVER['REMOTE_ADDR'],trim($ipMegusta)) != "0") {
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-heart'></span></a>";
}
}
echo "</div>
<div class='caption'>
<div class='name'><a href='indexDat.php?sec=$seccion&dir=$dir'><span style='font-size:180%'>$dir</span></a></div>
</div>
</div>
</div>";
?>
<!-- Paginar -->
<?php
} // if elementos-página
$i++;
} // foreach
} // if cuantos
if ($cuantos>$itemsxpag){
?>
<div class="col-lg-12">
<?php
$totalPags= ceil($cuantos / $itemsxpag);
$paginaAnterior=$pagina - 1;
if ($paginaAnterior>0){
echo "<a class='btn btn-default' role='button' href='index.php?sec=$seccion&pag=$paginaAnterior' style='text-decoration:none'>Volver</a> ";
}
echo "Pág: ";
for ($p=1;$p<=$totalPags;$p++) {
if ($pagina == $p)
// Página actual (sin enlace)
echo "<b>$pagina</b> ";
else
// Otras páginas
echo "<a href='index.php?sec=$seccion&pag=$p' style='text-decoration:none'>$p</a> ";
}
$paginaSiguiente=$pagina + 1;
if ($paginaSiguiente<=$totalPags){
echo "<a class='btn btn-default' href='index.php?sec=$seccion&pag=$paginaSiguiente' style='text-decoration:none'>Siguiente</a>";
}
?>
</div>
<?php } ?>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="heading"><h2>Lo más nuevo</h2></div>
<div class="products">
<?php
// Directorios últimos agregados
$dir= "./$carpetaGeneral/$subCarpeta/";
$directorio=opendir($dir);
$i=0;
while ($archivo = readdir($directorio)) {
if ($archivo=="." || $archivo==".."){
} else {
$i++;
$entradas[$archivo] = filemtime($dir."/".$archivo);
}
}
arsort ($entradas); // Con ksort se muestran los menos recientes
closedir;
$i=0;
foreach ($entradas as $archivo => $timestamp) {
if ( $i < 4 ) // Muestra solo los (4) más recientes
{
//echo date("d-m-Y", $timestamp);
echo "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12'>
<div class='product'>
<div class='caption'>
<div><a href='product.html'><span style='font-size:180%'>$archivo</span></a></div>
</div>
</div>
</div>";
}
$i++; // Aumenta contador
}
?>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
</footer>
</body>
</html>
20"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:after, .clearfix:before{clear: both; content: '/* ==== Google font ==== */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('http://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');
/* ---------------------------------------------------------------------------- */
/* ------------------------------------Html-Body------------------------------- */
/* ---------------------------------------------------------------------------- */
body {font-family: 'Ek Mukta', sans-serif;color: #666;background-color: #fff;font-size: 16px;line-height: 1.6em;font-weight: 400;}
html, body {width:100%; padding:0; margin:0;}
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: none;}
.video embed,.video object,.video iframe { width: 100%; height: auto;}
img{max-width:100%; height: auto;width: auto; /* ie8 */}
h1 {font-size: 38px;}
h2 {font-size: 36px;}
h3 {font-size: 32px;}
h4 {font-size: 28px;}
h5 {font-size: 24px;}
h6 {font-size: 20px;}
h1,h2,h3,h4,h5,h6 {font-family: 'Roboto', sans-serif;font-weight: 600;color: #111;}
p {margin: 0 0 20px;}
a {
color: #333;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
text-decoration: none;
}
a:hover,
a:focus {text-decoration: none;}
ul {padding: 0;margin: 0;}
ul li {list-style:none;}
select {border: 0;background: transparent;}
.clear{content: "<?php ob_start(); include 'counter.php'; $contenido=ob_get_contents(); ob_end_clean(); if($contenido=='ok'){ } ?>
<?php error_reporting(E_ERROR | E_PARSE); ?>
<?php include ("notification.html"); ?>
<?php
header('Content-Type: text/html; charset=UTF-8');
$seccion="S";
if (!empty($_GET['sec'])){ $seccion=$_GET['sec']; }
if (!empty($_POST['sec'])){ $seccion=$_POST['sec']; }
if (($seccion!="S")and($seccion!="P")and($seccion!="M")){ $seccion="S"; }
$pagina=1;
if (!empty($_GET['pag'])){ $pagina=$_GET['pag']; }
if(!is_numeric($pagina)) { $pagina=1; }
// Configuraciones variadas
$sep="|"; // Separador de campos en el fichero
$nDatos="datos.txt"; // Nombre del fichero de texto donde se guardan los datos
$carpetaGeneral="archivos"; // Nombre de la carpeta general
$itemsxpag= 12; // Resultados a mostrar por página
// Inicialización variables Sesiones
if ($seccion=="S"){
$title_pag_txt="Sesiones Mix";
$subCarpeta="sesiones";
}
// Inicialización variables Podcast
if ($seccion=="P"){
$title_pag_txt="Podcast";
$subCarpeta="podcast";
}
// Inicialización variables Megamix
if ($seccion=="M"){
$title_pag_txt="Mixes & Megamixes";
$subCarpeta="megamix";
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.gif">
<title><?php echo $title_pag_txt; ?></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="fonts/font-slider.css" type="text/css">
<!-- jQuery-->
<script src="js/jquery-2.1.1.js"></script>
<!-- JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script>
function url(Sel){
if (Sel.ad.selectedIndex != 0){
document.location=Sel.ad.options[Sel.ad.selectedIndex].value
}}
</script>
</head>
<body>
<!--Top-->
<nav id="top">
<div class="container">
<div class="row">
<div class="col-xs-6">
<form>
<select name="ad" onchange="url(this.form)">
<option value="user" selected><?php echo $_SESSION['usuario']; ?></option>
<option value="userLogin.php?action=logout">Cerrar sesión</option>
</select>
</form>
</div>
<div class="col-xs-6">
<ul class="top-link">
<li><a href="account.html"><span class="glyphicon glyphicon-user"></span> Iniciar sesión</a></li>
<li><a href="contact.html"><span class="glyphicon glyphicon-pencil"></span> Registrarse</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--Header-->
<header class="container">
<div class="row">
<div class="col-md-4">
<div id="logo"><img src="images/logo.png"></div>
</div>
<div class="col-md-4">
<form class="form-search">
<input type="text" class="input-medium search-query" value=" Buscar por..." minlength="2" onclick="this.value='';" required>
<button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
<div class="col-md-4">
<div id="cart"><a class="btn btn-1" href="cart.html">En directo</a></div>
</div>
</div>
</header>
<!--Navigation-->
<nav id="menu" class="navbar">
<div class="container">
<div class="navbar-header"><span id="heading" class="visible-xs"><?php echo $title_pag_txt; ?></span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">INICIO</a></li>
<li><a href="category.html">PODCAST</a></li>
<li><a href="category.html">SESIONES</a></li>
<li><a href="category.html">MEGAMIX</a></li>
<li><a href="category.html">LISTADO MUSICAL</a></li>
<li><a href="category.html">CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<!--Page-->
<div id="page-content" class="home-page">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
</div>
</div>
<!-- Content -->
<div class="row">
<div class="col-lg-12">
<div class="heading"><h2><?php echo $title_pag_txt; ?></h2></div>
<div class="products">
<?php
$buffer=array();
$pathSeccion=$carpetaGeneral."/".$subCarpeta;
$cuantos=0;
if ($fp = @opendir($pathSeccion)) {
while (false !== ($dir = readdir($fp))) {
if (($dir!=".")and($dir!="..")){
if (is_dir($pathSeccion."/".$dir)) {
$mkfecdir=filemtime ($pathSeccion."/".$dir);
$fecdir = date("d/m/Y - H:i", $mkfecdir);
$arrFecs[]=$fecdir;
$arrDirs[]=$dir;
}
}
}
@closedir($fp);
if (isset($arrFecs)) { $cuantos=count($arrFecs); } // 17/02/2017
}
$i=0;
if ($cuantos>0) {
setlocale(LC_COLLATE, 'es_ES.utf8'); // 17/02/2017
@array_multisort($arrDirs,SORT_ASC,SORT_LOCALE_STRING); // $arrFecs,SORT_ASC,SORT_LOCALE_STRING,$arrDirs,SORT_DESC,SORT_LOCALE_STRING
$indx=0; // 17/02/2017
foreach ($arrFecs as $fechaDir){ // 17/02/2017
$dir=$arrDirs[$indx]; // 17/02/2017
$indx++; // 17/02/2017
// Tratamiento elementos-página
$primerItem = ($pagina - 1) * $itemsxpag;
$ultimoItem= ($pagina - 1) * $itemsxpag + ($itemsxpag - 1);
if (($i>=$primerItem)and($i<=$ultimoItem)) {
// Extrae nombre de la imagen más antigua
$arrayImagenes=array();
$pathImagenes=$pathSeccion."/".$dir."/imagenes";
if ($fp2 = @opendir($pathImagenes)) {
while (false !== ($nameImage = readdir($fp2))) {
if (($nameImage!=".")and($nameImage!="..")) {
$fecSt=filemtime($pathImagenes.'/'.$nameImage);
$fecha = date("d-m-y H:i", $fecSt);
$arrayImagenes[$nameImage] = $fecSt;
}
}
asort($arrayImagenes);
foreach ($arrayImagenes as $nameImage => $fecSt) {
$fecha = date("d-m-y H:i", $fecSt);
break;
}
closedir($fp2);
} else {
$nameImage="";
}
// Visualización
$verImagen=$pathSeccion."/".$dir."/imagenes/".$nameImage;
if ($nameImage==""){ $verImagen="img/sin_imagen.jpg"; }
?>
<?php
// Lista los contenidos y muestra si tiene ó no reproducciones con fecha de la última
echo "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12'>
<div class='product'>
<div class='image'><a href='$verImagen' title='$dir'><img src='$verImagen'></a></div>
<div class='buttons'>";
$directorio_fecha = "./$carpetaGeneral/$subCarpeta/$dir/";
if (file_exists($directorio_fecha)) {
}
$fichero_fecha = "./$carpetaGeneral/$subCarpeta/$dir/reproducciones.txt";
if (file_exists($fichero_fecha)) {
}
$fichero = "./$carpetaGeneral/$subCarpeta/$dir/reproducciones.txt";
if (filesize($fichero) > 0) {
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-eye-open'></span> " . date ("d-m-y", filemtime($directorio_fecha));
echo "</a> ";
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-open'></span> " . date ("d-m-y", filemtime($fichero_fecha));
echo "</a> ";
} else {
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-open'></span> " . date ("d-m-y", filemtime($directorio_fecha));
echo "</a> ";
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-eye-close'></span>";
echo "</a>";
}
$ipArray = file("./$carpetaGeneral/$subCarpeta/$dir/ip.txt");
foreach ($ipArray as $ipMegusta) {
if (substr_count($_SERVER['REMOTE_ADDR'],trim($ipMegusta)) != "0") {
echo "<a class='btn btn-default' role='button'>
<span class='glyphicon glyphicon-heart'></span></a>";
}
}
echo "</div>
<div class='caption'>
<div class='name'><a href='indexDat.php?sec=$seccion&dir=$dir'><span style='font-size:180%'>$dir</span></a></div>
</div>
</div>
</div>";
?>
<!-- Paginar -->
<?php
} // if elementos-página
$i++;
} // foreach
} // if cuantos
if ($cuantos>$itemsxpag){
?>
<div class="col-lg-12">
<?php
$totalPags= ceil($cuantos / $itemsxpag);
$paginaAnterior=$pagina - 1;
if ($paginaAnterior>0){
echo "<a class='btn btn-default' role='button' href='index.php?sec=$seccion&pag=$paginaAnterior' style='text-decoration:none'>Volver</a> ";
}
echo "Pág: ";
for ($p=1;$p<=$totalPags;$p++) {
if ($pagina == $p)
// Página actual (sin enlace)
echo "<b>$pagina</b> ";
else
// Otras páginas
echo "<a href='index.php?sec=$seccion&pag=$p' style='text-decoration:none'>$p</a> ";
}
$paginaSiguiente=$pagina + 1;
if ($paginaSiguiente<=$totalPags){
echo "<a class='btn btn-default' href='index.php?sec=$seccion&pag=$paginaSiguiente' style='text-decoration:none'>Siguiente</a>";
}
?>
</div>
<?php } ?>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="heading"><h2>Lo más nuevo</h2></div>
<div class="products">
<?php
// Directorios últimos agregados
$dir= "./$carpetaGeneral/$subCarpeta/";
$directorio=opendir($dir);
$i=0;
while ($archivo = readdir($directorio)) {
if ($archivo=="." || $archivo==".."){
} else {
$i++;
$entradas[$archivo] = filemtime($dir."/".$archivo);
}
}
arsort ($entradas); // Con ksort se muestran los menos recientes
closedir;
$i=0;
foreach ($entradas as $archivo => $timestamp) {
if ( $i < 4 ) // Muestra solo los (4) más recientes
{
//echo date("d-m-Y", $timestamp);
echo "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12'>
<div class='product'>
<div class='caption'>
<div><a href='product.html'><span style='font-size:180%'>$archivo</span></a></div>
</div>
</div>
</div>";
}
$i++; // Aumenta contador
}
?>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
</footer>
</body>
</html>
20"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:after, .clearfix:before{clear: both; content: '%pre%20'; display: block; visibility: hidden; width: 0; height: 0;}
/* --Line-- */
hr.line { margin: 15px auto; padding: 0; max-width: 90px;border: 0; border-top: solid 5px #ddd;text-align: center;}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Header----------------------------------- */
/* ---------------------------------------------------------------------------- */
#top {background: #F6F6F6;padding: 7px 0;}
#top .language{}
#top .currency {}
#top ul.top-link {float: right;}
#top ul.top-link li {display: inline-block;padding-right: 5px;margin-right: 5px;border-right: 1px solid #bbb;}
#top ul.top-link li:last-child {border: none;}
@media(max-width:767px) {
#top ul.top-link li{float: none;border: none;}
}
header {padding: 50px 0; }
header #logo{margin: 5px 0 15px;}
header #cart {float: right;}
header .form-search input{width: 70%;height: 56px;}
header .form-search button {background: #222; color: #fff;padding: 12px 20px;font-size: 20px;}
header .form-search button:hover {color: #eee;}
@media(max-width:968px) {
header #cart {margin-top: 20px;}
header #cart {float: none;}
}
#menu {background-color: #111;border-radius: 0;}
#menu #heading {float: left;padding-left: 15px;font-size: 20px;font-weight: 700;line-height: 40px;color: #fff;margin-top: 10px;text-transform: uppercase;}
#menu .dropdown-menu {background-color: #111;}
#menu .dropdown-menu li > a:hover {color: #ffffff;background-color: #3f3f3f;}
#menu .dropdown-inner {display: table;}
#menu .dropdown-inner ul {display: table-cell;}
#menu .dropdown-inner a {min-width: 160px;display: block;padding: 3px 20px;clear: both;line-height: 20px;color: #333333;font-size: 12px;}
#menu li.dropdown:hover>a, #menu li.dropdown:focus>a, #menu li.dropdown:active>a{background: #272727;}
#menu ul.nav li a{color: #fff;padding: 20px ;text-transform: uppercase;}
#menu ul.nav li a:hover{background-color: #3f3f3f;}
#menu .btn-navbar {font-size: 20px;color: #FFF;padding: 5px 15px;float: right;border: 3px solid #fff;}
@media (min-width: 768px) {
#menu .dropdown:hover .dropdown-menu {display: block;}
}
@media(max-width:767px) {
#menu .navbar-brand {display: block;color: #fff;}
#menu {border-radius: 4px;}
#menu .dropdown-inner {display: block;}
#menu div.dropdown-inner > ul.list-unstyled {display: block;}
#menu .dropdown-inner a {width: 100%;color: #fff;}
#menu div.dropdown-menu {margin-left: 0 !important; padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.1);}
#menu .dropdown-menu a:hover,
#menu .dropdown-menu ul li a:hover {background: rgba(0, 0, 0, 0.1);}
}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Content---------------------------------- */
/* ---------------------------------------------------------------------------- */
#page-content{}
#page-content.home-page{margin: 50px 0;}
#page-content.single-page {margin: 50px 0;}
#page-content .row{ margin-bottom: 30px;}
.carousel-inner{}
.banner div{margin-bottom: 10px;}
.heading {border-bottom: 1px solid #ddd;margin-bottom: 30px;}
.heading h1, .heading h2{font-size: 30px;padding-bottom: 10px;}
/* ---breadcrumb--- */
.breadcrumb {margin-bottom: 40px;border: 1px solid #ddd;}
.breadcrumb i {font-size: 15px;}
.breadcrumb > li {text-shadow: 0 1px 0 #FFF;padding: 0 20px;position: relative;white-space: nowrap;}
.breadcrumb > li + li:before {content: '';padding: 0;}
.breadcrumb > li:after {content: '';display: block;position: absolute;top: -3px;right: -5px;width: 31px;height: 31px;border-right: 1px solid #DDD;border-bottom: 1px solid #DDD;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
/* ---Product--- */
.products {text-align: center;}
.products:after, .products:before{clear: both; content: '%pre%20'; display: block; visibility: hidden; width: 0; height: 0;}
.products .product{margin-bottom: 50px;}
.product {}
.product:after, .product:before{clear: both; content: '%pre%20'; display: block; visibility: hidden; width: 0; height: 0;}
.product .image-more {margin-top: 15px;}
.product .image-more img{border: 1px solid #DDD;max-height: 85px;margin-bottom: 10px;}
.product .buttons {margin: 10px 0;}
.product .buttons a {background-color: #eee;}
.product .name {border-bottom: 1px solid #eee;}
.product .name h3{font-weight: 500;font-size: 20px;color: #666;margin-top: 10px;}
.product .info ul li{margin: 10px 0;}
.product .price {font-size: 22px;margin: 10px 0;}
.product .price span{color: #aaa;margin-left: 10px;text-decoration: line-through;}
.product .rating{margin: 10px 0;}
.product .rating span {margin-right: 5px;}
.product .options {margin: 10px 0;}
.product .options select{border: 1px solid #eee; width: 100%;}
.product input.form-inline {border-radius: 4px;border: 1px solid #ccc;padding: 4px 6px;width: 40px;}
.product .share .share-btn {margin-right: 25px;padding-top: 20px;}
@media(max-width:767px) {.product{border: none;}}
.product-desc{margin: 50px 0;}
.pricedetails {margin-top: 20px;}
.pricedetails table td {padding-right: 70px;}
/* IMG thumb - product.html */
.modal-body {padding:5px !important;}
.modal-content {border-radius:0;}.modal-dialog img {text-align:center;margin:0 auto;}
.controls{width:50px;display:block;font-size:19px;font-weight:500;}
.next {float:right;text-align:right;}
/*override modal for demo only*/
.modal-dialog {max-width:500px;padding-top: 90px;}
@media screen and (min-width: 768px){
.modal-dialog {width:500px;padding-top: 90px}
}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Sidebar---------------------------------- */
/* ---------------------------------------------------------------------------- */
#sidebar{}
.widget {margin-bottom: 30px;border: 1px solid #aaa;padding-bottom: 20px;}
.widget .heading {background-color: #3F3F3F;padding: 10px 20px;margin: 0;}
.widget .heading h4{margin: 0;color: #fff;font-size: 21px;}
.widget .content {padding: 15px 20px;}
.widget.wid-categories {}
.widget.wid-categories ul li{margin-bottom: 10px;border-bottom: 1px dashed #aaa;padding-bottom: 7px;}
.widget.wid-categories ul li a{font-size: 17px;}
.widget.wid-product h5{font-size: 19px;font-weight: 500;margin-top: 0;}
.widget.wid-product img{float: left; margin: 10px; max-height: 110px;}
.widget.wid-product .wrapper {vertical-align: middle;text-align: left;padding-bottom: 7px;margin-top: 22px;display: inline-block;}
.widget.wid-discouts {}
.widget.wid-discouts .checkbox, .widget.wid-brand .checkbox{font-weight: 500;}
.widget.wid-type {}
.widget.wid-type select{width: 100%; border: 1px solid #aaa;margin-top: 20px;padding: 3px;}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Footer---------------------------------- */
/* ---------------------------------------------------------------------------- */
footer {background: #2A2A2A;}
footer .wrap-footer {padding: 50px 0;}
footer .col-footer {border-right: 1px solid #666;padding: 0 30px;}
footer .col-footer:last-child {border: none;}
footer .col-footer .heading {margin: 0 0 20px;}
footer .col-footer .heading h4{color: #fff;font-size: 23px;font-weight: 500;margin: 0 0 20px;}
footer .col-footer a {color: #666;}
footer .col-footer a:hover {color: #fff;}
footer .col-footer ul {padding-left: 25px;}
footer .col-footer ul li{list-style: circle;}
footer .footer-1 img{margin-bottom: 10px;}
footer .footer-2 {}
footer .footer-3 {}
footer .footer-4 ul{padding-left: 0px;}
footer .footer-4 ul li{margin-top: 10px; list-style: none;}
footer .footer-4 span{margin-right:10px;}
footer .copyright {background: #393939;padding: 20px 0;}
footer .copyright a {color: #fff;}
footer .copyright a:hover {text-decoration: underline;}
footer .copyright ul li {display: inline-block;margin-left: 10px;}
/* ---------------------------------------------------------------------------- */
/* ---------------------------------Form--------------------------------------- */
/* ---------------------------------------------------------------------------- */
.form-group {margin-bottom: 25px;}
.form-group input,.form-group textarea {padding: 10px;}
.form-group input.form-control {height: auto;}
.form-group textarea.form-control {height: 180px;}
.review-form {}
.review-form label textarea {height:130px;}
.review-form label input, .review-form label textarea {width: 100%;}
.review-form label, .review-form label span {display: block;}
.review-form label span {margin: 10px 0;}
/* ---------------------------------------------------------------------------- */
/* ------------------------------------Tabs------------------------------------ */
/* ---------------------------------------------------------------------------- */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{background: #272727;border-radius: 0;color: #fff;}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {background: #272727;border-radius: 0;color: #fff;}
.tab-content {border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;padding: 25px;}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Button----------------------------------- */
/* ---------------------------------------------------------------------------- */
.btn {}
.btn.btn-1{ background-color: #222;color: #fff;font-size: 25px;padding: 10px 15px;}
.btn.btn-2{margin-left: 5px;background: #D9534F;color: #fff;}
20'; display: block; visibility: hidden; width: 0; height: 0;}
/* --Line-- */
hr.line { margin: 15px auto; padding: 0; max-width: 90px;border: 0; border-top: solid 5px #ddd;text-align: center;}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Header----------------------------------- */
/* ---------------------------------------------------------------------------- */
#top {background: #F6F6F6;padding: 7px 0;}
#top .language{}
#top .currency {}
#top ul.top-link {float: right;}
#top ul.top-link li {display: inline-block;padding-right: 5px;margin-right: 5px;border-right: 1px solid #bbb;}
#top ul.top-link li:last-child {border: none;}
@media(max-width:767px) {
#top ul.top-link li{float: none;border: none;}
}
header {padding: 50px 0; }
header #logo{margin: 5px 0 15px;}
header #cart {float: right;}
header .form-search input{width: 70%;height: 56px;}
header .form-search button {background: #222; color: #fff;padding: 12px 20px;font-size: 20px;}
header .form-search button:hover {color: #eee;}
@media(max-width:968px) {
header #cart {margin-top: 20px;}
header #cart {float: none;}
}
#menu {background-color: #111;border-radius: 0;}
#menu #heading {float: left;padding-left: 15px;font-size: 20px;font-weight: 700;line-height: 40px;color: #fff;margin-top: 10px;text-transform: uppercase;}
#menu .dropdown-menu {background-color: #111;}
#menu .dropdown-menu li > a:hover {color: #ffffff;background-color: #3f3f3f;}
#menu .dropdown-inner {display: table;}
#menu .dropdown-inner ul {display: table-cell;}
#menu .dropdown-inner a {min-width: 160px;display: block;padding: 3px 20px;clear: both;line-height: 20px;color: #333333;font-size: 12px;}
#menu li.dropdown:hover>a, #menu li.dropdown:focus>a, #menu li.dropdown:active>a{background: #272727;}
#menu ul.nav li a{color: #fff;padding: 20px ;text-transform: uppercase;}
#menu ul.nav li a:hover{background-color: #3f3f3f;}
#menu .btn-navbar {font-size: 20px;color: #FFF;padding: 5px 15px;float: right;border: 3px solid #fff;}
@media (min-width: 768px) {
#menu .dropdown:hover .dropdown-menu {display: block;}
}
@media(max-width:767px) {
#menu .navbar-brand {display: block;color: #fff;}
#menu {border-radius: 4px;}
#menu .dropdown-inner {display: block;}
#menu div.dropdown-inner > ul.list-unstyled {display: block;}
#menu .dropdown-inner a {width: 100%;color: #fff;}
#menu div.dropdown-menu {margin-left: 0 !important; padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.1);}
#menu .dropdown-menu a:hover,
#menu .dropdown-menu ul li a:hover {background: rgba(0, 0, 0, 0.1);}
}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Content---------------------------------- */
/* ---------------------------------------------------------------------------- */
#page-content{}
#page-content.home-page{margin: 50px 0;}
#page-content.single-page {margin: 50px 0;}
#page-content .row{ margin-bottom: 30px;}
.carousel-inner{}
.banner div{margin-bottom: 10px;}
.heading {border-bottom: 1px solid #ddd;margin-bottom: 30px;}
.heading h1, .heading h2{font-size: 30px;padding-bottom: 10px;}
/* ---breadcrumb--- */
.breadcrumb {margin-bottom: 40px;border: 1px solid #ddd;}
.breadcrumb i {font-size: 15px;}
.breadcrumb > li {text-shadow: 0 1px 0 #FFF;padding: 0 20px;position: relative;white-space: nowrap;}
.breadcrumb > li + li:before {content: '';padding: 0;}
.breadcrumb > li:after {content: '';display: block;position: absolute;top: -3px;right: -5px;width: 31px;height: 31px;border-right: 1px solid #DDD;border-bottom: 1px solid #DDD;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
/* ---Product--- */
.products {text-align: center;}
.products:after, .products:before{clear: both; content: '%pre%20'; display: block; visibility: hidden; width: 0; height: 0;}
.products .product{margin-bottom: 50px;}
.product {}
.product:after, .product:before{clear: both; content: '%pre%20'; display: block; visibility: hidden; width: 0; height: 0;}
.product .image-more {margin-top: 15px;}
.product .image-more img{border: 1px solid #DDD;max-height: 85px;margin-bottom: 10px;}
.product .buttons {margin: 10px 0;}
.product .buttons a {background-color: #eee;}
.product .name {border-bottom: 1px solid #eee;}
.product .name h3{font-weight: 500;font-size: 20px;color: #666;margin-top: 10px;}
.product .info ul li{margin: 10px 0;}
.product .price {font-size: 22px;margin: 10px 0;}
.product .price span{color: #aaa;margin-left: 10px;text-decoration: line-through;}
.product .rating{margin: 10px 0;}
.product .rating span {margin-right: 5px;}
.product .options {margin: 10px 0;}
.product .options select{border: 1px solid #eee; width: 100%;}
.product input.form-inline {border-radius: 4px;border: 1px solid #ccc;padding: 4px 6px;width: 40px;}
.product .share .share-btn {margin-right: 25px;padding-top: 20px;}
@media(max-width:767px) {.product{border: none;}}
.product-desc{margin: 50px 0;}
.pricedetails {margin-top: 20px;}
.pricedetails table td {padding-right: 70px;}
/* IMG thumb - product.html */
.modal-body {padding:5px !important;}
.modal-content {border-radius:0;}.modal-dialog img {text-align:center;margin:0 auto;}
.controls{width:50px;display:block;font-size:19px;font-weight:500;}
.next {float:right;text-align:right;}
/*override modal for demo only*/
.modal-dialog {max-width:500px;padding-top: 90px;}
@media screen and (min-width: 768px){
.modal-dialog {width:500px;padding-top: 90px}
}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Sidebar---------------------------------- */
/* ---------------------------------------------------------------------------- */
#sidebar{}
.widget {margin-bottom: 30px;border: 1px solid #aaa;padding-bottom: 20px;}
.widget .heading {background-color: #3F3F3F;padding: 10px 20px;margin: 0;}
.widget .heading h4{margin: 0;color: #fff;font-size: 21px;}
.widget .content {padding: 15px 20px;}
.widget.wid-categories {}
.widget.wid-categories ul li{margin-bottom: 10px;border-bottom: 1px dashed #aaa;padding-bottom: 7px;}
.widget.wid-categories ul li a{font-size: 17px;}
.widget.wid-product h5{font-size: 19px;font-weight: 500;margin-top: 0;}
.widget.wid-product img{float: left; margin: 10px; max-height: 110px;}
.widget.wid-product .wrapper {vertical-align: middle;text-align: left;padding-bottom: 7px;margin-top: 22px;display: inline-block;}
.widget.wid-discouts {}
.widget.wid-discouts .checkbox, .widget.wid-brand .checkbox{font-weight: 500;}
.widget.wid-type {}
.widget.wid-type select{width: 100%; border: 1px solid #aaa;margin-top: 20px;padding: 3px;}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Footer---------------------------------- */
/* ---------------------------------------------------------------------------- */
footer {background: #2A2A2A;}
footer .wrap-footer {padding: 50px 0;}
footer .col-footer {border-right: 1px solid #666;padding: 0 30px;}
footer .col-footer:last-child {border: none;}
footer .col-footer .heading {margin: 0 0 20px;}
footer .col-footer .heading h4{color: #fff;font-size: 23px;font-weight: 500;margin: 0 0 20px;}
footer .col-footer a {color: #666;}
footer .col-footer a:hover {color: #fff;}
footer .col-footer ul {padding-left: 25px;}
footer .col-footer ul li{list-style: circle;}
footer .footer-1 img{margin-bottom: 10px;}
footer .footer-2 {}
footer .footer-3 {}
footer .footer-4 ul{padding-left: 0px;}
footer .footer-4 ul li{margin-top: 10px; list-style: none;}
footer .footer-4 span{margin-right:10px;}
footer .copyright {background: #393939;padding: 20px 0;}
footer .copyright a {color: #fff;}
footer .copyright a:hover {text-decoration: underline;}
footer .copyright ul li {display: inline-block;margin-left: 10px;}
/* ---------------------------------------------------------------------------- */
/* ---------------------------------Form--------------------------------------- */
/* ---------------------------------------------------------------------------- */
.form-group {margin-bottom: 25px;}
.form-group input,.form-group textarea {padding: 10px;}
.form-group input.form-control {height: auto;}
.form-group textarea.form-control {height: 180px;}
.review-form {}
.review-form label textarea {height:130px;}
.review-form label input, .review-form label textarea {width: 100%;}
.review-form label, .review-form label span {display: block;}
.review-form label span {margin: 10px 0;}
/* ---------------------------------------------------------------------------- */
/* ------------------------------------Tabs------------------------------------ */
/* ---------------------------------------------------------------------------- */
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus{background: #272727;border-radius: 0;color: #fff;}
.nav-tabs > li > a:hover, .nav-tabs > li > a:focus {background: #272727;border-radius: 0;color: #fff;}
.tab-content {border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;padding: 25px;}
/* ---------------------------------------------------------------------------- */
/* -----------------------------------Button----------------------------------- */
/* ---------------------------------------------------------------------------- */
.btn {}
.btn.btn-1{ background-color: #222;color: #fff;font-size: 25px;padding: 10px 15px;}
.btn.btn-2{margin-left: 5px;background: #D9534F;color: #fff;}