0

Muy buenas querido amigos!, necesito que me ayuden que un div que dentro lleva datos ponerlo en una imagen (item de carousel) centrado. imagen de referencia...introducir la descripción de la imagen aquí

<div id="owl-demo" class="owl-carousel text-center">
    <?php
    require_once("config.php");
    $posts=$db->query("select * from posts order by id");
    $contador=0;
    if ($filas=$posts->fetch_array())
    {
        do
        {
            $contador++;
        ?>
        <div class="item">
            <img class="lazyOwl" src="images/gallery-<?php echo $contador;?>.jpg" alt="Tout dé Cake">
        <h3><?php echo utf8_encode($filas["plato"]);?></h3>
        <ul class="votos">
            <li class="voting_btn up_button" data-voto="likes" data-id="<?php echo $filas["id"]; ?>"><span><?php echo $filas["likes"]; ?></span></li>
            <li class="voting_btn dw_button" data-voto="hates" data-id="<?php echo $filas["id"]; ?>"><span><?php echo $filas["hates"]; ?></span></li>
        </ul>
        </div>

        <?php
        }
        while($filas=$posts->fetch_array());
    }
    else echo "<h3>No hay entradas disponibles.</h3>";
    ?>
    </div>
9
  • Pasa el codigo que estes usando para que tu respuesta sea bien recibida
    – Alvarez
    el 28 dic. 2017 a las 22:15
  • Es la misma pregunta es.stackoverflow.com/questions/127647/…
    – Alvarez
    el 28 dic. 2017 a las 22:16
  • es distinta, quise separar de una pregunta a otra... bueno me podrian ayudar. mover ese div al medio de la imagen :D
    – Danny HO
    el 28 dic. 2017 a las 22:18
  • Y como te ayudo si no posteas codigo? Mira como preguntar
    – Alvarez
    el 28 dic. 2017 a las 22:22
  • Ahi lo tienes amigazo! ojala me puedas ayudar :D
    – Danny HO
    el 28 dic. 2017 a las 22:31

2 respuestas 2

1

Buenas.

Todo el secreto está en CSS. Suponiendo que tu html sea algo parecido a esto:

<div class="soyElFondo">
  <div class="soyElFormulario">
    <fieldset>
      <span>T&iacute;tulo</span><br>
      <ul>
      <li>Contenido</li>
      <li>M&aacute;s contenido</li>
      </ul>
    </fieldset>
  </div>
</div>

Atención a los valores en el atributo class, porque de ellos depende que las propiedades de CSS se apliquen a donde corresponde, así:

.soyElFondo {
   background-image: tu_imagen.png /* apuntando a la imagen que deseas */
   width: 800px;
   height: 800px;
   vertical-align: middle;
}

.soyElFormulario {
  width: 300px;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  position: relative;
  top: 50%;
}

En este link puedes verlo funcionando. Un saludo...

... actualizo mi respuesta, porque no presté atención al 100% a la pregunta (el pequeño gran detalle de PHP). Coloca el atributo de estilo background-image por php.

...
<div class="item soyElFondo" style="background-image: images/gallery-<?php echo $contador;?>.jpg">
    <div class="votos soyElFormulario">
        ...
    </div>
</div>

El resto de mi propuesta va igual, ahora sí. Otro saludo.

0

hay mas en Bootstrap que pocos saben. Generalmente el css de Bootstrap pisa cualquier orden dada desde un estilo propio. En el carrusel de hay una opsion para poder comentario a las imagenes

<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>

https://getbootstrap.com/docs/3.3/javascript/#carousel

Si deseas modificar algo que ya viene por defectos, tienes que crear una hoja de estilo propia y a cada opcion terminarla con !important.

ejemplo:

.margin-top: 10px !important;

Espero haberte ayudado. Saludos!

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.