What code to use for my HTML site logo to be on the same menu line

Asked

Viewed 40 times

-3

I’m trying to make the image I put, in case the logo, stay in the upper left corner of the HTML page, and the right side the main menu, without any kind of space between them. But when I insert the image, the menu automatically goes underneath it. Is there a CSS style that can solve the problem? I have the following HTML code:

<html> 
<head>
    <img src="logoempresa.jpg" widht="150px"  height="250px" title="Infotec" >
    <style type="text/css">

        body {
    background-color: lightblue; 
  } 
  h1 { 
    color: black; 
    padding: 60px; 
  }
  body{
    margin: 0;
    top: 0;
    padding: 0;
    background-color: lightblue;
  }

  #menu ul {
    margin: 0;
    background-color: #0A6FF0;
    list-style: none;
  }
  #menu ul li{
    display: inline;<!para ficar em linha-->
  }
  #menu ul li a{
   padding: 30px 10px;
    display: inline-block;
    color: white;
    text-decoration: none;
  }
  #menu ul li a:hover{
    color: #69EEE8;
  }
 


</style>
<meta charset="UTF-8"/>
<title> </title>


</head>
<body>
  <div = id="menu"> <!pois vai ser estilizado-->
    <ul>
        <li><a href = "#">Início</a></li> <!hashtag para significar que nao ira a lugar nenhum-->
        <li><a href="#">Cursos</li>
        <li><a href = "#">Professores</a></li>
        <li><a href = "#">Produtos</a></li>
        <li><a href = "#">Contatos</a></li>
    </ul>
  </div>


<h1> </h1>
<h1><font size="1"></font></p>
<footer> </footer>
</body>
</html>```
php html

1 answer

0


If you just want the logo to be on the left side of the menu, you can use the property display in the body:

body {
    display: flex;
    margin: 0;
    top: 0;
    padding: 0;
    background-color: lightblue;
}

And as a result you will have: inserir a descrição da imagem aqui

The estate flex makes the element a flex container, automatically turning all your direct children into flex items.

  • Thanks for helping Algeu! My menu is now next to the logo, as in the photo you placed, but was in the vertical position. You know what might be going on?

  • I did it! Just put it in the menu ul position: Absolute; Thank you!!

  • @Gabriellarodrigues, I am happy to have helped. If the answer helped you, I ask you to mark the answer as a solution. :)

Browser other questions tagged php html

You are not signed in. Login or sign up in order to post.