0

Hola estoy recien empezando con el HTML y el CSS y tengo un problema, estoy haciendo una pagina proyecto y estoy en la parte del header, todo me fue bien con el nav y eso pero cuando quiero juntar el texto del logo con la imagen del logo queda un espacio enorme entre estos. Me gustaria poner o el texto debajo de la imagen del logo, o al lado pegado, con la palabra ''Onigiri'' arriba y abajo de esa la palabra ''Sushi'', digamos, ambas palabras una encima de otra. Si alguien puede ayudarme con esto porfavor lo agradeceria bastante, desde ya gracias! introducir la descripción de la imagen aquí

Este es mi codigo HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Onigiri Sushi</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
<header class="header">
    <div class="container logo-nav-container">
    <img class="logo" src="onigiri.png" alt="" width="120px" height="120px">
    <h1>Onigiri Sushi</h1>
        <nav class="navigation">
<ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Nosotros</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
</ul>
    </div>

<link href="https://fonts.googleapis.com/css2?family=Koulen&display=swap" rel="stylesheet">

</header>

<main class="main">

    <div class="class container">

        <h1>
            Hola soy el título
        </h1>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>
        
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates illum eius, temporibus architecto molestiae, ducimus aut facilis, nesciunt dignissimos libero eos? Soluta facere vero, qui molestiae facilis magni cum et?</p>

        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam, cum dolor consequuntur quos, repellat impedit culpa tempora fuga voluptatem eaque, accusamus ratione quaerat a excepturi autem hic provident amet dolorum?</p>

    </div>
</main>

<footer class="footer">
    <div class="container">
        <p>Página diseñada por Santino Fernandez</p>
    </div>
</footer>

</body>
</html>

Y mi código CSS:

body {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color: #333;
   font-size: 1.2rem;
   line-height: 1.6em;
   margin: 0%;
}

h1 {
    font-size: 2rem;
    line-height: 1.3em;
}

p{
    margin-bottom: 1.6em;
}

.container {
    width: 85%;
    max-width: 850px;
    margin: 0 auto;
}

.header {
    background: #333;
    color: white;
    padding: 0rem 0;
    font-family: 'Koulen', cursive;

    position: fixed;
    left: 0;
    top: 0;
    right: 0;
}

.header a {
    color: white;
    text-decoration: none;
}

.logo-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation ul li {
    display: inline-block;
    
}

.navigation ul li a {
    display: block;
    padding: 0rem 1rem;
    transition: all 0.4s linear;
    border-radius: 5px;
}

.navigation ul li a:hover {
    background-color: #4a4a4a;
}

.main {
    padding-top: 12rem;
}

2 respuestas 2

0

Lo que puedes hacer es meter el logo y el texto dentro de un div y jugar con eso:

<header class="header">
<div class="container logo-nav-container">
    <div class="logoimagen">
        <img class="logo" src="onigiri.png" alt="" width="120px" height="120px">
        <h1>Onigiri Sushi</h1>
    </div>
    <nav class="navigation">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Nosotros</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </div>
</header>

Ya dentro de ese div puede jugar con el width, con display...

 .logoimagen {
     display: flex;
     width: 100px:
 }

introducir la descripción de la imagen aquí

1
  • Muchas gracias de verdad! Commented el 20 may. 2022 a las 21:48
0

A lo que te ha dicho @PedroPicateclas le completaría con

.logoimagen {
   display:flex;
   flex-direction: column;
   align-items: center;
}

y así te aseguras que siempre van a estar el logo arriba y el texto abajo.

Y si quieres que se ponga uno al lado del otro pues con

.logoimagen {
   display:flex;
   align-items:center;
}
1

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.