3

Estoy montando una página web de un único cuerpo, la cosa es que, a la hora de colocar dos tarjetas de bootstrap con imágenes, estas no solo no se me centran, sino que además, no consigo que el div ocupe todo el largo de la pantalla, haciendo que otros div se me monten encima.

He probado usando los parámetros min-width y width tanto con porcentajes como unidades en px y em pero no consigo que funcione.

Os adjunto el código de CSS de esa parte como el HTML así el cómo se ve actualmente la página web.

Un saludo.

    /*CSS general de la pagina*/
    
    * {
        box-sizing: border-box;
    }
    
    body {
        margin: 0;
        font-size: 1rem;
        line-height: 1.5;
        color: #333;
        overflow-x: hidden;
    }
    
    h1{
        margin-top: 10px;
        font-size: 40px;
        margin-bottom: 0;
        font-family: 'DM Serif Display', serif;
        text-align: center;
    
    }
    
    /* Estilos del menú */
    
    .menus{
        clear: both;
        float: left;
        overflow: hidden;
        width: 100%;
        z-index: 2;
        position: fixed;
        background: black;
        opacity: 0.6;
    }
    
    #menu{
        float: left;
        left: 50%;
        list-style-type: none;
        margin: 0 auto;
        padding: 10px;
        position: relative;
    }
    
    #menu li{
        float: left;
        position: relative;
        right: 50%;
        padding: 5px;
    }
    
    #menu li a{
        font-size: 1em;
        margin: 10px;
        text-decoration: none;
    }
    
    #menu li a:hover{
        color: white;
        font-size: 1.7em;
    }
    
    .nav1{
        color: white;
        opacity: 1;
    }
    
    
    /*Estilos del header*/
    
    .header {
        height: 100vh;
        display: flex;
        align-items: center;
        color: #fff;
    }
    
    .content {
        max-width: 49rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin: auto;
        text-align: center;
    
    }
    
    .header-content p{
        font-size: 1.5rem;
        display: block;
        padding-bottom: 2rem;
    }
    
    /*Botones de las RRSS dentro del Header*/
    .btn{
        background: #c44569;
        color: white;
        font-size: 1.2rem;
        padding: 1rem 2rem;
        text-decoration: none;
        margin-right: 10px;
    }
    
    .button2{
        background: blue;
        color: white;
        font-size: 1.2rem;
        padding: 1rem 2rem;
        text-decoration: none;
        margin-left: 10px;
    }
    
    .btn:hover{
        color: white;
    }
    .button2:hover{
        color: white;
    }
    
    /* Estilos de la pantalla del vídeo y título del header */
    
    .header-video{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        
    }
    
    .header-video video{
        min-width: 100%;
        min-height: 100%;
    
    }
    
    .header-overlay{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: black;
        z-index: 1;
        opacity: .85;
    }
    
    .header-content{
        z-index: 3;
        margin-left: auto;
        margin-right: auto;
    }
    
    .header-content h1{
        font-size: 50px;
        margin-bottom: 0;
        font-family: 'DM Serif Display', serif;
    
    }
    
    /* Estilos de la sección Acerca de */
    .about{
        margin: auto;
        padding: auto;
        height: auto;
    }
    
    .about h1{
        margin-bottom: 20px;
    }
    
    
    .personas{
        width: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .tarjeta{
        width: 18rem;
        float: left;
        margin-left: 40px;
        margin-right: 40px;
        
    }
   <!DOCTYPE html>
    <html lang="es">
    
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Estudio de tatuajes en Sevilla capital">
        <meta name="keywords" content="Ants, Ink, Tattoo, Tatto, Tatuaje, Sevilla">
        <meta name="author" content="Manuel Jesus">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ant Tattoo</title>
        <!--Personal CSS-->
        <link rel="stylesheet" href="./css/estilos.css">
        <!--Bootstrap CSS-->
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <!--Google Fonts CSS-->
        <link href="https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap" rel="stylesheet">
    
    </head>
    
    <body>
        <div class="menus">
            <nav>
                <ul class="navbar" id="menu">
                    <li><a class="nav1" href="#">Inicio</a></li>
                    <li><a class="nav1" href="#">Page 1</a></li>
                    <li><a class="nav1" href="#">Page 2</a></li>
                    <li><a class="nav1" href="#">Page 3</a></li>
                </ul>
        </div>
        </nav>
        <header class="header content">
            <div class="header-video">
                <video src="media/flowers.mp4" type="video/mp4; codecs='avc1,mp4a'" preload autoplay muted loop>
                </video>
            </div>
    
            <div class="header-overlay"></div>
    
            <div class="header-content">
                <h1>Ant Tattoo</h1>
                <p>Tu estudio de tatuajes y piercings ubicado en el centro de<br/>Sevilla capital
                    
                </p>
                <a href="https://www.instagram.com/anttattoosevilla/" target="_blank" class="btn">Siguenos en Instagram</a>
                <a href="https://www.facebook.com/anttattoosevilla/" target="_blank" class="btn button2">Siguenos en Facebook</a>
            </div>
        </header>
    
        <div class="about">
            <!--Aquí va la info acerca de los tatuadores-->
            <h1>Acerca de</h1>
                <div class="personas">
                        <!--Insertar bio y foto de cristina-->
                        <div class="card tarjeta">
                            <img class="card-img-top" src="./media/yose.jpg" alt="cristina"/>
                            <div class="card-body">
                                <p class="card-text">Cristina</p>
                            </div>
                        </div>
    
                        <!--Insertar bio y foto de yose-->
                        <div class="card tarjeta">
                            <img class="card-img-top" src="./media/yose.jpg" alt="yose"/>
                            <div class="card-body">
                                <p class="card-text">Yose</p>
                            </div>
                        </div>
                </div>
        </div>
    
        <div id="trabajos">
            <h1>Nuestros trabajos</h1>
            <!--Buscar script para poner aquí fotos de instagram-->
        </div>
    
        <div id="testimonios">
            <h1>Tu opinión cuenta</h1>
            <!--Insertar opiniones de la gente-->
            <div id="opi-1">
                <!--Opinion 1-->
            </div>
            <div id="opi-2">
                <!--Opinion 2-->
            </div>
            <div id="opi-3">
                <!---Opinion 3-->
            </div>
        </div>
    
        <div id="ubicacion">
            <h1>Donde estamos</h1>
            <!--Insertar mapa google con la ubicación del lugar-->
        </div>
    
        <div id="reservas">
            <h1>Reserva cita</h1>
            <!--Insertar formulario de reservas-->
        </div>
    
        <div id="footer">
            <!--Footer de la página-->
        </div>
        </div>
        <!--JavaScript-->
        <script src="./js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    </body>
    
    </html>

Foto de la web Foto de la web

EDIT He estado pasando el código (con las modificaciones sugeridas realizadas) por partes a otro fichero y, a medida que voy haciendo cambios, voy mirando la web con el inspector de Google Chrome y me doy cuenta que las tarjetas es como si no las cogiera el body. Os adjunto fotografía de que me sale en el inspector.

Fotografía 2

9
  • Por que no estas usando el container, row y col de bootstrap? Commented el 6 jul. 2019 a las 18:59
  • @AlexisNarvaez lo pensé en un primer momento, pero, por ejemplo, a la hora de usar el container no conseguía que el vídeo estuviera en toda la pantalla, sino que no llegaba del todo a los bordes Commented el 6 jul. 2019 a las 20:37
  • @AlexisNarvaez luego acerca de row y col, supongo que lo dices por las fotos y las tarjetas. Pensé que podía quedar más atractivo usar las tarjetas porque me es más fácil usar cabeceras, además, al poner las fotos no me tengo que preocupar porque sean de tamaños diferentes, sino que automáticamente se ajusta al espacio (o es lo que tengo entendido) Commented el 6 jul. 2019 a las 20:39
  • A qué te refieres con "largo"? Hablas del ancho? Estás usando la versión 4 de Bootstrap, ¿porqué no usas la clase container-fluid?. Revisa cómo estás llamando a los scripts en tu proyecto, primero debe ir siempre la libreria de jQuery y luego las demás. Commented el 6 jul. 2019 a las 23:38
  • @JheymanMejia sí. He probado la clase que me dices, pero el error sigue persistiendo Commented el 7 jul. 2019 a las 0:19

1 respuesta 1

3

Como te recomiendan en los comentarios, lo mejor que puedes hacer para evitar que "otros divs se monten encima", es usar contenedores con sus respectivas columnas. Como bien has de saber, Bootstrap divide el ancho total de una página en 12 columnas, de modo que, si quieres tener dos elementos en la misma fila (uno a la derecha y otro a la izquierda) debes usar las clases .row y .col-6. Para centrarlas basta con usar la clase .mx-auto.

De tu código me tomé la libertad de cambiar algunas cosas, primero estabas cerrando mal tu elemento nav y tenía un z-index con un valor que no cumplía su objetivo, lo aumenté a 4 que es el valor mínimo para que esté por encima (en eje Z) de los demás elementos; la clase .personas no añadía muchos cambios a tu diseño, por ello la eliminé así como también eliminé la propiedad float:left de tu clase .tarjeta, esto estaba causando conflicto cuando querías centrarla, en su lugar añadí la propiedad object-fit: cover que evita que tu imagen se distorsione para ocupar el tamaño del componente card. También añadí la clase .my-3, lo que hace es dar un margin en el eje Y (top-bottom) para que en pantallas más pequeñas, las cards no queden "pegadas" una junta a la otra.

Si necesitas algo adicional, puedes dejar un comentario y edito mi respuesta.

/*CSS general de la pagina*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  overflow-x: hidden;
}

h1 {
  margin-top: 10px;
  font-size: 40px;
  margin-bottom: 0;
  font-family: 'DM Serif Display', serif;
  text-align: center;
}


/* Estilos del menú */

.menus {
  clear: both;
  float: left;
  overflow: hidden;
  width: 100%;
  z-index: 4;
  position: fixed;
  background: black;
  opacity: 0.6;
}

#menu {
  float: left;
  left: 50%;
  list-style-type: none;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}

#menu li {
  float: left;
  position: relative;
  right: 50%;
  padding: 5px;
}

#menu li a {
  font-size: 1em;
  margin: 10px;
  text-decoration: none;
}

#menu li a:hover {
  color: white;
  font-size: 1.7em;
}

.nav1 {
  color: white;
  opacity: 1;
}


/*Estilos del header*/

.header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: #fff;
}

.content {
  max-width: 49rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
  text-align: center;
}

.header-content p {
  font-size: 1.5rem;
  display: block;
  padding-bottom: 2rem;
}


/*Botones de las RRSS dentro del Header*/

.btn {
  background: #c44569;
  color: white;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
  margin-right: 10px;
}

.button2 {
  background: blue;
  color: white;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  text-decoration: none;
  margin-left: 10px;
}

.btn:hover {
  color: white;
}

.button2:hover {
  color: white;
}


/* Estilos de la pantalla del vídeo y título del header */

.header-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.header-video video {
  min-width: 100%;
  min-height: 100%;
}

.header-overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  z-index: 1;
  opacity: .85;
}

.header-content {
  z-index: 3;
  margin-left: auto;
  margin-right: auto;
}

.header-content h1 {
  font-size: 50px;
  margin-bottom: 0;
  font-family: 'DM Serif Display', serif;
}


/* Estilos de la sección Acerca de */

.about h1 {
  margin-bottom: 20px;
}

.tarjeta {
  width: 18rem;
  margin-left: 40px;
  margin-right: 40px;
  object-fit: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>
  <div class="menus">
    <nav>
      <ul class="navbar" id="menu">
        <li><a class="nav1" href="#">Inicio</a></li>
        <li><a class="nav1" href="#">Page 1</a></li>
        <li><a class="nav1" href="#">Page 2</a></li>
        <li><a class="nav1" href="#">Page 3</a></li>
      </ul>
    </nav>
  </div>

  <header class="header content">
    <div class="header-video">
      <video src="media/flowers.mp4" type="video/mp4; codecs='avc1,mp4a'" preload autoplay muted loop>
                </video>
    </div>

    <div class="header-overlay"></div>

    <div class="header-content">
      <h1>Ant Tattoo</h1>
      <p>Tu estudio de tatuajes y piercings ubicado en el centro de<br/>Sevilla capital

      </p>
      <a href="https://www.instagram.com/anttattoosevilla/" target="_blank" class="btn">Siguenos en Instagram</a>
      <a href="https://www.facebook.com/anttattoosevilla/" target="_blank" class="btn button2">Siguenos en Facebook</a>
    </div>
  </header>

  <div class="about">
    <!--Aquí va la info acerca de los tatuadores-->
    <h1>Acerca de</h1>
    <div class="container-fluid">
      <div class="row">

        <!--Insertar bio y foto de cristina-->
        <div class="col-md-6 col-sm-6 my-3">
          <div class="card mx-auto tarjeta">
            <img class="card-img-top" src="https://via.placeholder.com/300" alt="cristina" />
            <div class="card-body">
              <p class="card-text">Cristina</p>
            </div>
          </div>
        </div>

        <!--Insertar bio y foto de yose-->
        <div class="col-md-6 col-sm-6 my-3">
          <div class="card mx-auto tarjeta">
            <img class="card-img-top" src="https://via.placeholder.com/100" alt="yose" />
            <div class="card-body">
              <p class="card-text">Yose</p>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>

  <div id="trabajos">
    <h1>Nuestros trabajos</h1>
    <!--Buscar script para poner aquí fotos de instagram-->
  </div>

  <div id="testimonios">
    <h1>Tu opinión cuenta</h1>
    <!--Insertar opiniones de la gente-->
    <div id="opi-1">
      <!--Opinion 1-->
    </div>
    <div id="opi-2">
      <!--Opinion 2-->
    </div>
    <div id="opi-3">
      <!---Opinion 3-->
    </div>
  </div>

  <div id="ubicacion">
    <h1>Donde estamos</h1>
    <!--Insertar mapa google con la ubicación del lugar-->
  </div>

  <div id="reservas">
    <h1>Reserva cita</h1>
    <!--Insertar formulario de reservas-->
  </div>

  <div id="footer">
    <!--Footer de la página-->
  </div>


</body>

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.