0

Tengo un problema que es hasta difícil de explicar, asi que dejo los mayores datos posibles.

Aclaración: Estoy usando bootstrap.

Primero comparto una imagen de la zona en cuestión Seccion del problema.

Al hacer clic en la lupa se activa un toggler que me despliega el input buscador. Mi idea es que una vez hecho enter/click en Buscar, se muestren los resultados de la búsqueda en un div que esta oculto sobre RECOMENDADOS. Esto no es toggler ya que recargo la pagina para hacer la petición php, es simplemente un div vacío que se llena para mostrar los resultados de la búsqueda.

El problema es que cuando este div aparece, me rompe literalmente todos los estilos que ya tengo armados. Rotura de estilos.

Realmente no se donde empieza un div y donde empieza el otro. Simplemente quiero que se muestre uno arriba de otro, que el div RECOMENDADOS se desplaza hacia abajo para mostrar en primer lugar los resultados de la búsqueda.

Ahora si dejo código. Primero el css involucrado y luego el html/php:

#rightCol {
  background: #b57d29;
  margin-top: 1vw;
  border: 0.25vw solid #4d0000;
}

.miniLibro {
  width: 250px;
  height: 400px;
  background-size: 100% 100%;
  float: left;
  margin-bottom: 3%;
  transition: 0.5s;
  color: #ffffff;
}

.miniLibro:hover {
  cursor: pointer;
  filter: brightness(130%);
}

.titulo {
  position: relative;
  height: 42px;
  background: #000000;
  filter: opacity(80%);
  font-size: 0.9em;
  text-align: center;
}

.stock {
  position: relative;
  margin-top: 131.1%;
  transition: 0.5s;
  font-size: 1em;
}

.precio {
  position: relative;
  text-align: center;
  font-size: 1.3em;
  float: right;
  border-radius: 40%;
  width: 26%;
  margin-top: -12.5%;
  background-color: #b71f1f;
  transition: 0.5s;
}

.miniLibro:hover>.precio {
  filter: brightness(80%);
}

.enStock {
  background-color: #173019;
  width: 35%;
  text-align: left;
  height: 30px;
  border-radius: 0 90% 0 0;
}

.pocoStock {
  background-color: #e09e02;
  text-align: left;
  width: 35%;
  height: 30px;
  border-radius: 0 90% 0 0;
}

.agotado {
  background-color: #e03901;
  text-align: left;
  width: 35%;
  height: 30px;
  border-radius: 0 90% 0 0;
}

.miniLibro:hover>.stock {
  filter: brightness(80%);
}
<div class="container">
  <div class="row">
    <div id="leftCol" class="col-lg-4">
    </div>
    <div id="rightCol" class="col-lg-8">

      <?php 
          if (isset($_POST['buscar'])) {
            require 'conexion.php';
            $src = $_POST['src'];
            $consulta = "
              SELECT titulo, imagen, categoria, precio, cantidad
              FROM lecturas_db.inventario
              WHERE titulo LIKE '%$src%'
            ";
            $resultado = mysqli_query($conexion,$consulta);
            $direct = 'img/cover/'; 
         /* $_SERVER['DOCUMENT_ROOT'].'/Lecturas Comics/ agregar para ruta completa */
            if (!$resultado) {
              echo "Error";
            }
            else { ?>
      <div class="container">
        <h2 align="center">
          <?php
                if(mysqli_num_rows($resultado)>0) {
                  echo "Mostrando resultados para '".$_POST['src']."'.";
                 } else {
                   echo "No hay resultados para '".$_POST['src']."'.";
                 } ?>
        </h2>
        <?php
              while($row = mysqli_fetch_array($resultado)) {
                if($row['categoria'] == 'proximamente') { ?>
          <a href="busProx.php?titulo=<?php echo $row['titulo'] ?>">
             <div
               style="background-image: url('<?php echo $direct.$row["imagen"] ?>')"
               class="miniLibro">
                 <div class="titulo" align="center">
                   <b><?php echo $row['titulo'] ?></b>
                 </div>
                 <div class="stock" align="left">
                   <div class="proximamente"> <b>
                          Próximamente
                        </b></div>
                 </div>
               </div>
          </a>
          <?php } else { ?>
          <a href="busLibro.php?titulo=<?php echo $row['titulo'] ?>">
            <div
              style="background-image: url('<?php echo $direct.$row["imagen"] ?>')"
              class="miniLibro">
              <div class="titulo" align="center">
                <b><?php echo $row['titulo'] ?></b>
              </div>
              <div class="stock" align="left">
                <b><?php if($row['cantidad'] > '3') { ?>
                <div class="enStock">En Stock</div> 
                  <?php } if($row['cantidad'] <= '3' && $row['cantidad'] > '0') { ?>
                <div class="pocoStock">
                  <?php echo $row['cantidad'] ?> en Stock
                </div>
                <?php } if($row['cantidad'] == '0') { ?>
                <div class="agotado">Agotado</div>
                <?php } ?>
                </b>
              </div>
              <div class="precio" align="right">
                <b><?php echo "$".$row['precio'] ?></b>
              </div>
            </div>
            <?php } ?>
          </a></div><br>
      <?php }
            }
          }
         ?>
      <div class="container">
        <h1 align="center"><b>RECOMENDADOS</b></h1><br>
        <?php
          require 'conexion.php';
          $direct = 'img/cover/';
          $sql = "
            SELECT titulo, imagen, precio, cantidad
            FROM lecturas_db.inventario
            WHERE categoria = 'recomendado' ORDER BY titulo ASC
          ";
          $resultado = mysqli_query($conexion,$sql);
          while ($row = mysqli_fetch_array($resultado)) { ?>
          <a href="busLibro.php?titulo=<?php echo $row['titulo'] ?>">
          <div 
            style="background-image: url('<?php echo $direct.$row["imagen"] ?>')"
            class="miniLibro">
              <div class="titulo" align="center">
                <b><?php echo $row['titulo'] ?></b>
              </div>
              <div class="stock" align="left">
                <b><?php if($row['cantidad'] > '3') { ?>
                  <div class="enStock">
                    En Stock
                  </div> 
                <?php } if($row['cantidad'] <= '3' && $row['cantidad'] > '0') { ?>
                  <div class="pocoStock">
                    <?php echo $row['cantidad'] ?> en Stock
                  </div>
                <?php } if($row['cantidad'] == '0') { ?>
                  <div class="agotado">
                    Agotado
                  </div>
                <?php }
                ?></b>
              </div>
              <div class="precio" align="right">
                <b><?php echo "$".$row['precio'] ?></b>
              </div>
            </div>
        <?php } ?>
          </a>
      </div>
    </div>

  </div>
</div>

Actualizo: Luego de revisar detenidamente el codigo por si me habia dejado algun div abierto o cerrado de mas, y tras no encontrar error, decidi revisar la ubicacion de los contenedores desde el mismo navegador y estos se encuentran perfectamente ubicador, uno sobre el otro.

El problema es que el contenido de estos contenedores se sale para afuera. Les muestro Buscador

Ese es el contenedor de mi busqueda, vean como el contenedor esta bien ubicado pero el libro queda por fuera. Ahora les muestro el siguente contenedor. Recomendados

vean como en realidad solo me marca el titulo.

5
  • pareciera que estas cerrando el último while antes del cierre del anchor </a> Commented el 1 ene. 2019 a las 21:46
  • Si, aunque dudo que ese sea el problema. Gracias! Commented el 1 ene. 2019 a las 22:00
  • visualmente hay un contenedor que se cierra de mas o de menos, fijate de ver el source de la página (CTRL+U) y formatear el html para ver donde cae cada etiqueta Commented el 1 ene. 2019 a las 22:17
  • Reviso y reviso pero no encuentro nada. Voy a intentar escribiendolo desde 0 Commented el 1 ene. 2019 a las 23:14
  • 1
    Por favor, comparte el código html generado y no el php que lo genera para que podamos ver el problema en concreto. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información.
    – Alvaro Montoro
    Commented el 2 ene. 2019 a las 8:57

1 respuesta 1

0

Para comenzar no debería de haber dos divs con la clase container si podrías el codigo final de esa sección sería bueno, podrías colocar los dos coni, aunque podrías probar con esta logíca, mira como lo haría yo: http://jsfiddle.net/enq3u8yj

Puede basarte de ese código, corregí algunas reglas css para que sea responsive ya que tenias algunos errores, espero te sirvar

#leftCol {
  height: auto;
  width: 100%;
  background: red; /*Pon tu color o eliminar si no quieres color de fondo*/
  
}
#rightCol {
  background: #b57d29;
}

.miniLibro {
  width: 100%;
  height: auto;
  background-size: 100% 100%;
  float: left;
  margin-bottom: 3%;
  transition: 0.5s;
  color: #ffffff;
}

.miniLibro:hover {
  cursor: pointer;
  filter: brightness(130%);
}

.titulo {
  position: relative;
  height: 42px;
  background: #000000;
  filter: opacity(80%);
  font-size: 0.9em;
  text-align: center;
}

.stock {
  position: relative;
  margin-top: 131.1%;
  transition: 0.5s;
  font-size: 1em;
}

.precio {
  position: relative;
  text-align: center;
  font-size: 1.3em;
  float: right;
  border-radius: 40%;
  width: 26%;
  margin-top: -12.5%;
  background-color: #b71f1f;
  transition: 0.5s;
}

.miniLibro:hover>.precio {
  filter: brightness(80%);
}

.enStock {
  background-color: #173019;
  width: 35%;
  text-align: left;
  height: 30px;
  border-radius: 0 90% 0 0;
}

.pocoStock {
  background-color: #e09e02;
  text-align: left;
  width: 35%;
  height: 30px;
  border-radius: 0 90% 0 0;
}

.agotado {
  background-color: #e03901;
  text-align: left;
  width: 35%;
  height: 30px;
  border-radius: 0 90% 0 0;
}

.miniLibro:hover>.stock {
  filter: brightness(80%);
}
<div class="container">
<div class="row">
  <div id="leftCol" class="col-sm-4 col-md-4 col-lg-4">
    Izquierda
  </div>
  <div id="rightCol" class="col-sm-8 col-md-8 col-lg-8">
    <!-- Seccion busqueda -->
    <div class="row">
      <div class="col-12">
        <h3>Resultado de busqueda</h3>
      </div>      
    </div>
    <div class="row">
      
      <!-- Muestra para mostrar imprimir con PHP -->
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!-- Fin muestra para mostrar imprimir con PHP -->

      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
    <!-- Fin Seccion busqueda -->

    <!-- Recomendados -->
    <div class="row">
      <div class="col-12">
        <h3>Recomendados</h3>
     </div>      
    </div>
    <div class="row">

      <!-- Muestra para mostrar imprimir con PHP -->
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!-- Fin muestra para mostrar imprimir con PHP -->

    </div>
    <!-- Recomendados -->
  </div>
</div>
</div>

Actualizacion 1: En teoría sólo debería de haber un solo div con la clase container, vendría siendo el div padre que cubriría todo, dentro puedes poner todos los divs (header, nav, side, section, article, footer) que desees. No necesariamente el div debe de contener la clase row, puedes utilizar para que no te confundas, div con su respectivo id="divBusqueda" id="divRecomendados" a fin solo quieres para identificarlo y mostrarlo con el PHP, te dejaré un ejemplo, espero responda a tu inquietud

<div class="container">

  <!-- rightCol -->
  <div id="rightCol" class="col-sm-8 col-md-8 col-lg-8">

    <!-- Section Busqueda -->
    <div id="divBusqueda">

      <!-- Muestra para mostrar imprimir con PHP -->
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!-- Fin muestra para mostrar imprimir con PHP -->

    </div>
    <!-- Section Busqueda -->

    <!-- Section Recomendados -->
    <div id="divRecomentados">

      <!-- Muestra para mostrar imprimir con PHP -->
      <div class="col-12 col-sm-6 col-md-6 col-lg-4">
        <a href="#titulo">
          <div style="background-image: url(https://m.media-amazon.com/images/M/MV5BOTM3NzE5OTE1Nl5BMl5BanBnXkFtZTgwNzQwNjM3NjM@._V1_SY1000_CR0,0,674,1000_AL_.jpg)" class="miniLibro">
            <div class="titulo" align="center">
              <b>Blumblebee</b>
            </div>
            <div class="stock" align="left">
              <div class="proximamente">
                <b>Próximamente</b>
              </div>
            </div>
          </div>
        </a>
      </div>
      <!-- Fin muestra para mostrar imprimir con PHP -->
    </div>
    <!-- Fin Section Recomendados -->

  </div>
  <!-- rightCol -->
</div>

2
  • 1
    Deberías poner también el código en la propia respuesta, no solo un enlace a jsfiddle, podría desaparecer o no estar disponible para otros usuarios.
    – Fly
    Commented el 2 ene. 2019 a las 9:51
  • Me funciono, pero quiero saber si realmente lo comprendi. Basicamente en vez de encerrar en container debi haber usado los row? Esa fue la solucion realmente, verdad? Commented el 2 ene. 2019 a las 14:15

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.