0

Estoy intentando que mi barra de navegación cuente con las opciones a la izquierda e "iniciar sesion" esté a la derecha.

He probado con float, margin, padding pero no logro hacerlo. También he probado creando un id para los botones y asi trabajar con ellos individualmente pero me descuadra el nav.

Se que es mucho código pero he estado pensando que el error puede estar en la estructura html quizás.

/*Configuracion general de pagina*/
*{
    padding: 0%;
    margin: 0%;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    
}
/*Barra de Navegacion*/
nav{
    background: #8bc34a;
    height: 80px;
    width: 100%;
    
}

.enlace{
    position: absolute;
    padding: 10px 0px;
    margin-left: 2%;
    width: 50px;
}

.logo{
    height: 60px;
    border-radius: 50px;
}

nav ul{
    float: right;
    margin-right: 20px;
    
}

nav ul li{
    display: inline-block;
    line-height: 80px;

}

nav ul li a{
    color: white;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 7px 15px;
    text-transform: uppercase;
    
}

#sesion{
    background: #00bcd4;
    border-radius: 50px;
    border: #dcedc8 solid 5px;
    
}

/*Hovers de Barra de Navegacion*/
.logo:hover{
    border: #00bcd4 solid 2px;
    transition: .2s;
}

#sesion:hover{
    color: #00bcd4;
    background: #dcedc8;
    border: #00bcd4 solid 5px;
    transition: .5s;
}

.boton:hover{
    color: #00bcd4;
    transition: .5s;
}

/*Cosas que dejo pre hechas para funcionalidades de mas adelante uwu*/
.checkbtn{
    font-size: 30px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

/*Seccion de contenido*/
section{
    background: url(fondo.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: calc(100vh - 80px);
}

section{
    background: url(img/junta-propietarios-imgEs20200901012745.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.5;
    height: calc(100vh - 30px - 80px);
}

/*Footer*/
footer{
    background: #757575;
    height: 30px;
    width: 100%;
}

.texto{
    display: inline-block;
    color: white;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 7px 20px;
}

#instituto{
    float: right;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <!--MetaDatos, Titulo y Conecciones(Librerias)-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="Index_meh.css" rel="stylesheet" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <title>Papaya | Home</title>
</head>
<body>
    <!--Navegacion-->
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn"><i class="fas fa-bars"></i></label>
        <a href="#" class="enlace"><img src="img/images.jpg" class="logo" alt="No se encuentra imagen"></a>
        <ul>
            <li><a class="boton" href="#">Quienes Somos</a></li>
            <li><a class="boton" href="#">Galeria</a></li>
            <li><a class="boton" href="#">Contacto</a></li>
            <li><a id="sesion" href="#">Iniciar Sesion</a></li>
        </ul>
    </nav>
    <!--Contenido-->
    <section></section>
    <!--Footer-->
    <footer>
        <p class="texto">Cesar Aros | Andres Nuñez | Mario Mora</p>
        <p class="texto" id="instituto">Instituto Santo Tomas | Informatica</p>
    </footer>
</body>
</html>

2
  • Debajo del HTML, no supe como dividir el codigo en dos partes asi que le puso un ESTO ES MI CSS
    – KiriLink
    Commented el 29 mar. 2022 a las 21:29
  • Ok, perdona, no me fijé bien. Bueno, he arreglado un poco la pregunta para que sea mejor aceptada por la comunidad. A ver si alguien te ayuda (particularmente prefiero usar bootstrap que CSS puro, por lo tanto no podria ayudarte con certeza, lo siento). Suerte!
    – masterguru
    Commented el 29 mar. 2022 a las 21:47

1 respuesta 1

2

Puedes hacer lo siguiente:

/*Configuracion general de pagina*/
*{
    padding: 0%;
    margin: 0%;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    
}

header{
    width: 100%;display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    background: #8bc34a;
}

nav{
    display: flex;
    align-items: center;
}

nav > ul{
    display: flex;
}

nav ul li a{
    color: white;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 7px 15px;
    text-transform: uppercase;
    
}

.btn{
    font-size: 18px;
    padding: 7px 15px;
    margin-right: 25px;
    background: #00bcd4;
    border-radius: 50px;
    border: #dcedc8 solid 5px;
}

.logo{
    height: 60px;
    border-radius: 50px;
}

#sesion{
    background: #00bcd4;
    border-radius: 50px;
    border: #dcedc8 solid 5px;
    
}

/*Hovers de Barra de Navegacion*/
.logo:hover{
    border: #00bcd4 solid 2px;
    transition: .2s;
}

#sesion:hover{
    color: #00bcd4;
    background: #dcedc8;
    border: #00bcd4 solid 5px;
    transition: .5s;
}

.boton:hover{
    color: #00bcd4;
    transition: .5s;
}

/*Cosas que dejo pre hechas para funcionalidades de mas adelante uwu*/
.checkbtn{
    font-size: 30px;
    color: #fff;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

/*Seccion de contenido*/
section{
    background: url(fondo.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: calc(100vh - 80px);
}

section{
    background: url(img/junta-propietarios-imgEs20200901012745.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: 0.5;
    height: calc(100vh - 30px - 80px);
}
<!DOCTYPE html>
<html lang="es">
<head>
    <!--MetaDatos, Titulo y Conecciones(Librerias)-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Papaya | Home</title>
</head>
<body>
    <header>
        <nav>
            <input type="checkbox" id="check">
            <label for="check" class="checkbtn"><i class="fas fa-bars"></i></label>
            <a href="#" class="enlace"><img src="http://tulogo.cat/wp-content/uploads/2018/08/TuLogo300ppp.jpg" class="logo" alt="No se encuentra imagen"></a>
            <ul>
                <li><a class="boton" href="#">Quienes Somos</a></li>
                <li><a class="boton" href="#">Galeria</a></li>
                <li><a class="boton" href="#">Contacto</a></li>
            </ul>
        </nav>
        <button class="btn">INICIAR SESIÓN</button>
    </header>
    <!--Contenido-->
    <section></section>
    <!--Footer-->
    <footer>
        <p class="texto">Cesar Aros | Andres Nuñez | Mario Mora</p>
        <p class="texto" id="instituto">Instituto Santo Tomas | Informatica</p>
    </footer>
</body>
<script src="script.js"></script>
</html>

Lo que hacemos es crear una etiqueta header, (vamos a trabajar con flexbox), dentro de ese header, tenemos el nav (con la imagen de logo y el menú) y además un button (muy importante qué esté fuera del nav). Aplicamos display:flex al headerpara que ponga en línea el nav con el botón de iniciar sesión, y un justify-content: space-between para que coloque a un extremo de la pantalla los elementos, es decir, en la parte izquierda va a poner el nav y en la parte derecha al botón. Además, aplicamos display:flex al nav (para qué ponga los elementos en línea, en este caso la imagen y la botonera, y aplicamos de vuelta flex a la ul, para que ponga en línea también la botonera. Para más información sobre flexbox: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

2
  • Muchas gracias te pasaste, ahora mismo voy a investigar el flexbox y algunas cosas mas, te agradesco muchisimo
    – KiriLink
    Commented el 29 mar. 2022 a las 22:10
  • De nada, cualquier otra pregunta estoy a la orden. ¡Saludos!
    – Fabricio
    Commented el 29 mar. 2022 a las 22:12

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.