Jump to content
Fórum Script Brasil
  • 0

Question

Olá boa noite, estou fazendo um site para uma pizzaria, estou criando o menu e quero colocar a logo ao lado do menu, mexendo no css já consegui algum resultado mas não o esperado, alguém consegue me ajudar ou me dar algum caminho a seguir?  desde já agradeço a qualquer ajuda.

<!DOCTYPE html>
<html lang="pt-br">
<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">
    <title>Home Pizza</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav id="menu-horizontal">
            <div class="logo">
                <img src="https://i.ibb.co/pbQv0CK/logo.png" />
            </div>
        <ul>
            <li>
                <a href="#">Inicio</a>
            </li>
            <li>
                <a href="#">Cardápio</a>
            </li>
            <li>
                <a href="#">Sobre</a>
            </li>
            <li>
                <a href="#">Contatos</a>
            </li>
        </ul>
    </nav>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');
*{
    margin: 0  auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
#menu-horizontal{
    background-color: #CC470D;
}
#menu-horizontal ul{
    list-style: none;
    padding: 0;
    max-width: 800px;
    background-color: #CC470D;
}
#menu-horizontal ul li{
    display: inline; 
}
#menu-horizontal ul li a{ 
    color: white;
    padding: 50px;
    display: inline-block;
    text-decoration: none;
    transition:background .4s;
    
}
#menu-horizontal ul li a:hover{ 
   
    background-color: #571a00;
}
.logo,.menu-horizontal{
    display:inline-block;
    font-size:0;
    vertical-align:middle;
}
.logo{
    text-align:left;
    width:60%;
    height: 30%;
}
.logo img{
    max-width:100%;
    }

 

Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Olá João eu sou novo e também estou começando. Então não sei se seria a melhor solução mais coloquei a imagem dentro <ul><li>, como você pode ver a abaixo no código. espero que tenha ajudado.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<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">
    <title>Home Pizza</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <nav id="menu-horizontal">

        <ul>
            <li class="logo">
                <img src="https://i.ibb.co/pbQv0CK/logo.png" width="150" height="150" />
            </li>
        
            <li>
                <a href="#">Inicio</a>
            </li>
            <li>
                <a href="#">Cardápio</a>
            </li>
            <li>
                <a href="#">Sobre</a>
            </li>
            <li>
                <a href="#">Contatos</a>
            </li>
        </ul>
    </nav>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');
*{
    margin: 0  auto;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
#menu-horizontal{
    background-color: #CC470D;
    height: 20%;
}
#menu-horizontal ul{
    list-style: none;
    padding: 0;
    max-width: 800px;
    background-color: #CC470D;
    height: 20%;
}
#menu-horizontal ul li{
    display: inline; 
}
#menu-horizontal ul li a{ 
    width: 150px;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 50px;
    display: inline-block;
    text-decoration: none;
    transition:background .4s;
    
}
#menu-horizontal ul li a:hover{ 
   
    background-color: #571a00;

}

.logo,.menu-horizontal{
    display:inline-block;
    font-size:0;
    vertical-align:middle;
}
.logo{
    text-align:left;
    width:10%;
    height: 10%;
}
.logo img{
    max-width:100%;
}

Espero ter ajudado.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      149405
    • Total Posts
      645894
×
×
  • Create New...