Mi web sobre música muestra en una página inicial tres fotos, correspondientes a los tres grupos cuya canción tiene mejor nota, según este código:
<div class="fotos oculto">
<?php
include("conexion.php");
$contador = 0;
$sql = "SELECT DISTINCT titulo_cancion, nombre_autor, nota_media, ano
FROM listas NATURAL JOIN canciones NATURAL JOIN discos NATURAL JOIN publican NATURAL JOIN autores
ORDER BY nota_media DESC
LIMIT 3";
$resultados = mysqli_query($conexion, $sql);
while($fila = mysqli_fetch_assoc($resultados))
{
$titulo_cancion = utf8_encode($fila['titulo_cancion']);
$nombre_autor = utf8_encode($fila['nombre_autor']);
$nota_media = $fila['nota_media'];
$ano = $fila['ano'];
if(strpos($nombre_autor, ", The")) $nombre_autor_orden = "The ".substr($nombre_autor, 0, strpos($nombre_autor, ", The"));
else $nombre_autor_orden = $nombre_autor;
$recopilatorio = $ano;
$contador++;
echo '<div>';
echo '<form class="cont-img-top3" data-prueba="prueba" method="post" action="index.php?fichero=recopilatorios.php">';
echo '<img class="img-top3" src="imagenes/autores/'.$nombre_autor.'.jpg">';
echo '<div class="num-top3" data-contador2="'.$contador.'">'.$contador.'</div>';
echo '<div class="text-top3"><span class="cancion-top3">'.$titulo_cancion.'</span> de <span class="autor-top3">'.$nombre_autor_orden.'</span> <span class="ano-top3">(<button class="boton-enlace" role="link" name="recopilatorio" value="'.$recopilatorio.'">'.$ano.'</button>)</span></div>';
echo '</form>';
echo '</div>';
}
?>
<button class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-decadas" type="submit">¡Vamos!</button>
<form method="post" action="index.php?fichero=decadas.php">
<div id="modal-decadas" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header justify-content-center"><h5>Elige tu <span style="color: mediumvioletred">década</span> favorita</h5></div>
<div class="modal-body d-flex justify-content-center">
<?php
$decadas = array("1960", "1970", "1980", "1990", "2000");
for($i = 0; $i < count($decadas); $i++) echo '<button class="btn btn-info d-block mx-1 mb-2" name="inicio_decada" value="'.$decadas[$i].'">'.$decadas[$i].'s</button>';
?>
</div>
</div>
</div>
</div>
</form>
</div>
Esto se ve así (obviamente las fotos cambian según varíe la nota de las canciones, y no son del mismo tamaño, aunque procuro que sean rectangulares, más anchas que altas)...
... tras aplicarle algo de CSS (espero haber incluido todas las clases de relevancia, si necesitáis alguna más, pedidla):
.cont-img-top3 {
position: relative;
display: inline-block;
text-align: center;
transition: all 1s ease;
}
.img-top3 {
width: 600px;
border-radius: 20px;
transition: all 1s ease;
}
.num-top3 {
position: absolute;
top: 20px;
left: 30px;
color: mediumvioletred;
font-weight: bold;
font-size: 75px;
font-family: 'Rock Salt', cursive;
text-shadow: 5px 5px 4px pink;
transition: all 0.25s ease;
}
.text-top3 {
position: absolute;
bottom: 20px;
right: 20px;
background-color: powderblue;
border: 2.5px solid lightblue;
border-radius: 10px;
padding: 5px;
transition: all 1s ease;
}
.cancion-top3 {
color: purple;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
}
.autor-top3 {
font-weight: bold;
font-size: 1.2em;
}
.ano-top3 {
font-size: 1.2em;
}
Bien, lo que querría es que esto se dispusiera más o menos así, centrado en pantalla (porque sobre las fotos opera un script de jQuery que las agranda cuando se pasa el ratón sobre ellas; si la 1 o la 3 quedan muy pegadas al borde posiblemente se visualicen mal):
También necesitaría que ese espacio entre las tres fotos se mantuviera constante independientemente de cuáles fueran las fotos para evitar que el botón quede parcialmente oculto.
El "2" posiblemente lo desplace a la derecha de su foto, para que no quede parcialmente oculto; tampoco os preocupéis por eso.
Bien, supongo que esto requeriría operar con float
, absolute
, relative
, etc. para dejarlo todo ordenadito, pero son conceptos de CSS que me resultan bastante opacos, así que si me echaseis una mano para saber por dónde empezar para luego dejarlo totalmente a mi gusto vía ensayo-error, os lo agradecería enormemente.