0

Quiero poner un reloj por encima del slideshow en la esquina superior derecha.
tengo el siguiente diseño donde cargo las imagenes desde una carpeta pero el problema es que el reloj se queda pegado en la primer imagen del slideshow y en el resto solo se quedan los separadores de horas y minutos(osea : :).

Esta es la primer imagen del slideshow y se muestra asi el reloj, yo lo que quiero es que ente dentro del div en color negro ypor ensima de todas las imagenes.

introducir la descripción de la imagen aquí

De la segunda imagen en adelante solo se muestra asi:

introducir la descripción de la imagen aquí

Este es mi diseño:

<!DOCTYPE html>
<html>
<head>
<title>slideshow</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
 <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Indicators -->
<ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<?php
  $files = scandir("img/");

?>
<!-- Wrapper for slides -->
<div class="carousel-inner">

  <?php
    $a=0;
    for ($i=2; $i < count($files) ; $i++):

  ?>
  <div id="dynamicImg" class="item <?php echo $a == 0 ? 'active' : ''; ?>">
    <img src="img/<?php echo $files[$i]; ?>" alt="Los Angeles" style="width:100%;">

    <!--Reloj -->
 <div class="wrap">
  <div class="widget">
    <div class="reloj">
    <p id="horas" class="horas"></p>
    <p>:</p>
    <p id="minutos" class="minutos"></p>
    <p>:</p>
    <div class="caja-segundos">
      <p id="ampm" class="ampm"></p>
      <p id="segundos" class="segundos"></p>
    </div>
    </div>    
  </div>
</div>
  </div>
  <?php
    $a++;
  endfor;
  ?>

  </div>


</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>

Este es el css:

{
margin: 0;
padding: 0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.container, #myCarousel,
.carousel-inner{
position: relative;
}
.wrap{
position: absolute;
width:50%;
top: 0;
right: 0;
left: 70%;
margin: 0, auto;
max-width: 1000px;
/*margin:auto;*/
}
.widget{
position: absolute;
width: 60%;
margin: 0;

}
.widget p{
display: inline-block;
line-height: 1em;
}
 .reloj{
position: absolute;
font-family: 'Oswald', sans-serif;
width: 100%;
height: 70px;
padding: 5%;
top: 5%;
font-size: 6em;
text-align: center;
background:rgb(0,0,0,5);
}

.reloj .caja-segundos{
display: inline-block;

}
.reloj .segundos,
.reloj .ampm{

font-size: 2rem;
display: block;
}

En general solo quiero mostrar el slideshow y las imagenes para que se vean completas o se adapten para verse completas en la pantalla y semuestre la hora en la esquina superios derecha, pero no soy bueno con css, espero me puedan ayudar :)
Saludos.

1 respuesta 1

0

Sacalo afuera del contenedor donde esta, ponelo en un div aparte y ponelo florante en ese div.

div {
  border: 2px solid #CCC;
  padding: 1em;
  margin: 1em 0 1em 4em;
  width: 300px;
  position: relative;
}

div img {
  position: absolute;
  top: 50px;
  left: 50px;
}

Si queres leer un poco mas sobre el tema te dejo este LINK

1
  • tendrias un ejemplo mas claro?
    – Manny
    Commented el 2 jun. 2020 a las 14:45

Tu Respuesta

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

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