1

Hola tengo el siguiente menú en un barnner:

Pantallazo del HTML

El problema esta en la siguiente parte del codigo

<!--Nav banner: page ico, social networks and buy car-->
            <div class="navBar">
                <div class="container">
                    <div class="row">
                        <div class="col-md-2">
                        <!--page barner ico-->
                            <div class="pageIco">
                                <img src="img/ico/JPBico.png" class="ico">
                            </div>
                        </div>      
                        <div class="col-md-10">
                            <div class="navButtons">
                                <div class="row">
                                    <div class="col-2">
                                        <div class="social">
                                            <img src="img/ico/facebook.png" class="socialIco">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="social">
                                            <img src="img/ico/instagram.png" class="socialIco">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="social">
                                            <img src="img/ico/buycar.png" class="carIco">
                                        </div>     
                                    </div>
                                </div>
                            </div>
                        </div>              
                    </div>
                </div>
            <!--END Nav banner: page ico, social networks and buy car-->    
            </div>

Pudes ver el codigo: https://github.com/felipedelosh/ecomerceFuneraria en el index lineas 30 a 60 la cosa es que intento que los iconos sociales se queden a la derecha y no lo consigo.

Alguien podria ayudarme para que mi pagina se vea de la siguiente manera:

Imagen photoshopeada

4
  • Soy nuevo, pongo el fracmento de codigo? el 21 feb. 2021 a las 0:32
  • Listo acabo de agregar el div el 21 feb. 2021 a las 0:39
  • solo a tu container padre dale display: flex; justify-content- flex-end, en bootstrap seria; d-flex justify-content-end el 21 feb. 2021 a las 1:32
  • @BetaM a entonces el deberia hacer el logo de la empresa fuera del la lista del nav y darle al nav d-flex ustifty-content- space-between el 21 feb. 2021 a las 11:46

2 respuestas 2

1

La solución puede plantearse de la siguiente forma:

  • Usaremos flexbox
  • A la imagen del globo terraqueo envuelvela dentro de un div
  • Aprovechamos que las 3 imágenes restantes ya se encuentran dentro de un contenedor por separado
  • A cada uno de los 2 contenedores anteriores dales un ancho del 50%
  • La imagen del globo originalmente queda del lado izquierdo por lo que ahi no requerimos mayor intervención
  • Ahora al contenedor de las 3 imágenes les aplicamos igualmente flexbox para centrar vertical y horizontalmente de manera mas simple, además de lograr el espacio que debe existir entre los 3 elementos

Código de muestra

<link href="ruta_bootstrap.css" rel="stylesheet"><!--sustitúyela por la real para que puedas ver el funcionamiento planteado-->
<style>
  img {
    border: 1px solid;
    height: 50px;
  }
</style>
<div class="d-flex">
  <div class="bg-primary p-2 w-50">
      <img src="" alt="">
  </div>
  <div class="align-items-center bg-danger d-flex justify-content-around p-2 w-50">
      <img src="" alt="">      
      <img src="" alt="">      
      <img src="" alt="">      
  </div>
</div>

Notas importantes

  • El CSS que puse por separado fue solo para pruebas pues no coloqué imágenes y simule el espacio que ocupan, ese lo remueves cuando coloques las reales.
  • Las clases CSS las puedes consultar directo en la documentación para conocer mas sobre su implementación
0

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html lang="es">
    <head>
        <!--Required meta tags-->
        <meta name="author" content="FelipedelosH">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="title" content="JPBGLOBALCOMERCIALIZADORA">
        <title>JPB Global comercializadora</title>
        <link rel="shortcut icon" type="image/x-icon" href="img/ico/JPBIcoMin.png" />
        
        <!--Bootstrap-->
        <link href="css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

        <!--My styles css-->
        <link href="css/mainPageStyles.css" rel="stylesheet" type="text/css">
        
        </head>
    <body> 
        <!--Bootstrap-->
        <script src="js/bootstrap.min.js"></script>

        <!--Page Content-->
        <div class="mainPage">
            <!--Whatssap Button-->
            <div class="btnWhatsapp">
                <a href="https://api.whatsapp.com/send?phone=+573104234025&text=test" target="_blank"><img src="img/ico/whatsapp.png"></a>
            </div>
            <!--Whatssap Button-->
            <!--Nav banner: page ico, social networks and buy car-->
            <div class="navBar">
                <div class="container">
                    <div class="row">
                        <div class="col-md-2">
                        <!--page barner ico-->
                            <div class="pageIco">
                                <img src="img/ico/JPBico.png" class="ico">
                            </div>
                        </div>      
                        <div class="col-md-10">
                            <div class="navButtons">
                                <div class="row">
                                    <div class="col-2 ms-auto">
                                        <div class="social">
                                            <img src="img/ico/facebook.png" class="socialIco">
                                        </div>
                                    </div>
                                    <div class="col-2 ">
                                        <div class="social">
                                            <img src="img/ico/instagram.png" class="socialIco">
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="social">
                                            <img src="img/ico/buycar.png" class="carIco">
                                        </div>     
                                    </div>
                                </div>
                            </div>
                        </div>              
                    </div>
                </div>
            <!--END Nav banner: page ico, social networks and buy car-->    
            </div>

            <!--Form-->
            <div class="form">
            <!--END Form-->
            </div>

            <!--TitleMisionVision-->
            <div class="container">
                <div class="row">
                    <h1 class="text-center">Soluciones JPB global comercializadora</h1>
                </div>
                <div class="row">
                    <h4 class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa enim earum molestias consequuntur</h4>
                </div>
            </div>

            <!--Products and solutions-->
            </div class="solutions">
            <!--END Products and solutions-->
            </div>

            <!--Video-->
            <div class="container">
                <div class="row">
                    <div class="embed-responsive embed-responsive-16by9" id="video"> 
                        <video controls id="videoBackground" muted autoplay loop class="videoContainer">
                            <source src="media/mortuaryPrinter.mp4" type="video/mp4" >
                        </video>
                    </div>
                </div>
            <!--END Video-->
            </div>

            <!--Solutions-->
            <div class="container">
                <div class="mainSolutionIcons">
                    <div class="row">
                        <div class="col-1">
                            <div class="solutionMovil">
                                <img src="img/ico/movil.jpg" class="solutionIco">
                                <p>Movil</p>
                            </div> 
                        </div>
                        <div class="col-1">
                            <div class="solutionPos">
                                <img src="img/ico/pos.jpg" class="solutionIco">
                                <p>POS</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionEtiquetas">
                                <img src="img/ico/etiquetas.jpg" class="solutionIco">
                                <p>Etiquetas</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSinRevestimiento">
                                <img src="img/ico/sin-revestimiento.jpg" class="solutionIco">
                                <p>Sin revestimiento</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionKioscos">
                                <img src="img/ico/kioscos.jpg" class="solutionIco">
                                <p>Kioscos</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSuministros">
                                <img src="img/ico/suministros.jpg" class="solutionIco">
                                <p>Suministros</p>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="solutionSoftware">
                                <img src="img/ico/software.jpg" class="solutionIco">
                                <p>Software</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <h1 class="text-center" style="background: yellow;">Nuestras soluciones</h1>
                </div>
                <div class="container" style="background: pink;">
                    <div class="row">
                        <div class="col-6">
                            <div class="solution">
                                <div class="row">
                                    <div class="col-6">
                                        <img src="img/ico/software.jpg" class="solutionIco">
                                    </div>
                                    <div class="col-6">
                                        <p>A</p>
                                    </div>
                                </div>
                            </div>
                            <div class="solution">
                                <div class="row">
                                    <div class="col-6">
                                        <img src="img/ico/software.jpg" class="solutionIco">
                                    </div>
                                    <div class="col-6">
                                        <p>A</p>
                                    </div>
                                </div>
                            </div>
                            <div class="solution">
                                <div class="row">
                                    <div class="col-6">
                                        <img src="img/ico/software.jpg" class="solutionIco">
                                    </div>
                                    <div class="col-6">
                                        <p>A</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="solution">
                                <div class="row">
                                    <div class="col-6">
                                        <img src="img/ico/software.jpg" class="solutionIco">
                                    </div>
                                    <div class="col-6">
                                        <p>A</p>
                                    </div>
                                </div>
                            </div>
                            <div class="solution">
                                <div class="row">
                                    <div class="col-6">
                                        <img src="img/ico/software.jpg" class="solutionIco">
                                    </div>
                                    <div class="col-6">
                                        <p>A</p>
                                    </div>
                                </div>
                            </div>
                            <div class="solution">
                                <div class="row">
                                    <div class="col-6">
                                        <img src="img/ico/software.jpg" class="solutionIco">
                                    </div>
                                    <div class="col-6">
                                        <p>A</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <!--END Solutions-->
            </div>

            <!--History-->
            <div class="history">
                <div class="container">
                    <img src="img/history.jpg" class="imgHistory">
                </div>
            <!--END History-->
            </div>

            <!--Legend-->
            <div class="container">
                <div class="legend">
                    <h1 class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa enim earum molestias consequuntur, porro eos quidem officia nesciunt eum. Voluptatum consequatur ullam nemo distinctio sapiente sed reiciendis iste veniam deserunt!</h1>
                </div>
            <!--END Legend-->
            </div>

            <!--Footer-->
            <div class="footer">
                <p class="text-center" id="copyright">2020</p>
            <!--END Footer-->
            </div>
            
        <!--END Page Content-->
        </div>
    </body>
</html>

2
  • 1
    Copie y pegue y yo la veo exactamene igual. :/ el 21 feb. 2021 a las 17:48
  • 1
    Holaaaaa, amigo muchas gracias tu respuesta es correcta, la cosa es que olvide limpiar la cache del navegador :) entonces por eso no me mostraba nadita gracias <3 el 21 feb. 2021 a las 18:01

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.