0

Necesito diseñar una página estática como está en esta imagen solo usando HTML y CSS3, tengo todo hecho lo único que no logro es que la palabra "LOGO" se vaya a la izquierda y los 3 elementos del navbar a la derecha, sin usar librerías.

introducir la descripción de la imagen aquí

Bueno siguiendo con la explicación, la parte del header lo tengo de esta forma

<header>
        <h1>logo</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>

Con respecto al CSS lo tengo configurado así, por lo que no sé como tendría que hacerlo para que quede como en la imagen

header{
    display: block;
    text-align: center;
    background-color: #E7EBDA;
    padding: 0.5em;
    margin: 2em 20em;
}

header h1{
    text-transform: uppercase;
}

header ul{
    display: inline;
    list-style-type: none;
    margin: 0.5em auto;
    text-align: center;
}

header ul li{
    display: inline;
}

header ul li a{
    text-decoration: none;
    border: solid;
    border-color: #7D8471;
    border-radius: 50px;
    background-color: #7D8471;
    color: white;
    padding: 0.3em;
}

header ul li a:hover{
    background-color: #B8B799;
    border-color: #B8B799;
}

header ul li a:active{
    padding: 0.2em;
}
8
  • Hola, por casualidad estás usando bootstrap? Commented el 10 may. 2019 a las 20:32
  • Bienvenido, añade el código por favor, la imagen en este caso se queda corta para poder ayudarte
    – user128299
    Commented el 10 may. 2019 a las 20:32
  • @SebastiánMiranda es un ejercicio y no puedo usar librerías, solo tirar de html y css
    – eriandev
    Commented el 10 may. 2019 a las 20:33
  • Por favor lee Cómo preguntar
    – user128299
    Commented el 10 may. 2019 a las 20:35
  • 1
    @Ragnaval a ok, de todas formas podrías poner el código que llevas hecho? de esta forma podemos ayudarte. Saludos Commented el 10 may. 2019 a las 20:38

3 respuestas 3

1

Podría realizar lo de la siguiente manera con porcentajes y display:inline-block, alinea el título a la izquierda y el <nav> a la derecha:

header{
    display: block;
    background-color: #E7EBDA;
    width:100%;
}

header h1{
    text-transform: uppercase;
    text-align: left;
    width:30%;
    display:inline-block;
}
header nav{
    text-align: right;
    display:inline-block;
    width:60%;
}

header ul{
    display: inline-block;
    list-style-type: none;
    margin: 0.5em auto;
    text-align: center;
}

header ul li{
    display: inline-block;
}

header ul li a{
    text-decoration: none;
    border: solid;
    border-color: #7D8471;
    border-radius: 50px;
    background-color: #7D8471;
    color: white;
    padding: 0.3em;
}

header ul li a:hover{
    background-color: #B8B799;
    border-color: #B8B799;
}

header ul li a:active{
    padding: 0.2em;
}
<header>
        <h1>logo</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>

1
  • Sí me sirvió, muchas gracias!
    – eriandev
    Commented el 10 may. 2019 a las 21:03
0

Bueno en base a tus clases lo más rápido es usar la propiedad float, esta la aplico de la siguiente manera en tu css:

Primero al header le di un alto (height) de 50px

el float se aplica al header h1 para que lo lleve a la izquierda y al header ul para que lo lleve a la derecha, creo que esta es la forma más rápida de hacerlo,porque después hay propiedades flex pero no sé si quieras saber eso ahora que estás partiendo. Ejecuta y ve lo en pantalla completa.

Saludos

header{
    display: block;
    text-align: center;
    background-color: #E7EBDA;
    padding: 0.5em;
    margin: 2em 20em;
    height: 50px;
}

header h1{
    text-transform: uppercase;
    float: left;
    margin: 0;
}

header ul{
    display: inline;
    list-style-type: none;
    margin: 0.5em auto;
    text-align: center;
    float: right;
}

header ul li{
    display: inline;
}

header ul li a{
    text-decoration: none;
    border: solid;
    border-color: #7D8471;
    border-radius: 50px;
    background-color: #7D8471;
    color: white;
    padding: 0.3em;
}

header ul li a:hover{
    background-color: #B8B799;
    border-color: #B8B799;
}

header ul li a:active{
    padding: 0.2em;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<h1 class="al-iz">logo</h1>
        <nav>
            <ul class="al-der">
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Servicios</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
	</header>
</body>
</html>

Al header le di una altura

2
  • creo que deberías revisar el código, le di ejecutar a la muestra que dejaste y sale todo al centro
    – user128299
    Commented el 10 may. 2019 a las 20:53
  • Si, me pasó lo mismo jajaja, pero como te dije, al lado del botón ejecutar, a la derecha sale un link que dice "pagina completa" si le das click vas a ver la página como corresponde Commented el 10 may. 2019 a las 20:54
0

Puedes hacer que header se tenga un display:flex y colocarle un justify-content:space-between o space-around es creo la manera mas facil de hacerlo.

header{
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
background-color: #E7EBDA;
padding: 0.5em;
margin: 2em 20em;

}

reemplaza tu .header por esto, queda así:

introducir la descripción de la imagen aquí

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.