How can I put this image next to the buttons?

Asked

Viewed 48 times

-2

I’m a beginner in the area and I need your help. I’m trying to put this image next to the buttons but I’m not getting it. I tried using background-image but it didn’t work.

I left my code to see if someone gives me a north. From now on, thank you.

inserir a descrição da imagem aqui

* {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


.menu {
    display: flex;
    width: 100%;
    padding: 22px;
    border-bottom: 2px solid gray;
}

.menu a {
    text-decoration: none;
    margin-left: 17px;
    font-weight: bold;
    color: gray;
}

.lateral {
    /*background-color: grey;*/
    width: 100%;
}
.botao_lateral {
    background-color: rgb(179, 182, 179);
    padding: 15px;
    width: 20%;
    margin: 20px;
    border-radius: 10px;

}

.botao_lateral a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 16px;
}

.lateral img {
    width: 600px;
}
    <body>
        <div class="menu">
            <a href="">Home</a>
            <a href="">Sobre</a>
            <a href="">Contato</a>
        </div>

        <div class="lateral">
            <div class="botao_lateral">
                <a href="">Inicio</a>
            </div>
            
            <div class="botao_lateral">
                <a href="">Comunidade</a>
            </div>

            <div class="botao_lateral">
                <a href="">Amigos</a>
            </div>

            <div class="botao_lateral">
                <a href="">Chat</a>
            </div>

            <img src="imagens/logo.jpeg" alt="imagem logo"/>    
        </div>

html css

3 answers

0

* {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


.menu {
    display: flex;
    width: 100%;
    padding: 22px;
    border-bottom: 2px solid gray;
}

.menu a {
    text-decoration: none;
    margin-left: 17px;
    font-weight: bold;
    color: gray;
}

.lateral {
    background-color: grey;
    width: 50%;
    display: inline-block;
    float: left;
}
.botao_lateral {
    background-color: rgb(179, 182, 179);
    padding: 15px;
    margin: 20px;
    border-radius: 10px;

}

.botao_lateral a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 16px;
}

.lateral img {
    width: 600px;
    min-height: 200px;
    background-color: #454545;
    display: inline-block;
    float: left;
}
    <body>
        <div class="menu">
            <a href="">Home</a>
            <a href="">Sobre</a>
            <a href="">Contato</a>
        </div>

        <div class="lateral">
            <div class="botao_lateral">
                <a href="">Inicio</a>
            </div>
            
            <div class="botao_lateral">
                <a href="">Comunidade</a>
            </div>

            <div class="botao_lateral">
                <a href="">Amigos</a>
            </div>

            <div class="botao_lateral">
                <a href="">Chat</a>
            </div>

        </div>

        <img src="https://i.pinimg.com/originals/2f/2f/f1/2f2ff11d07f2836dfc4e9fa363d601a3.jpg" width=180px" alt="imagem logo"/>   
 </body>

0

Use a div that involves the div you want to organize, apply the property in the css "display: flex", "flex-wrap: wrap" to break and in each div apply the "flex-Basis" according to the percentage you want each div to occupy. I put 50% for each.

* {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.menu {
  display: flex;
  width: 100%;
  padding: 22px;
  border-bottom: 2px solid gray;
}

.menu a {
  text-decoration: none;
  margin-left: 17px;
  font-weight: bold;
  color: gray;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.direita {
  flex-basis: 50%;
}

.lateral {
  background-color: grey;
  width: 100%;
  flex-basis: 50%;
}

.botao_lateral {
  background-color: rgb(179, 182, 179);
  padding: 15px; 
  margin: 20px;
  border-radius: 10px;
  text-align: center;
}

.botao_lateral a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-size: 16px;
}

.lateral img {
  width: 100%;
}
<body>
  <div class="menu">
    <a href="">Home</a>
    <a href="">Sobre</a>
    <a href="">Contato</a>
  </div>

  <div class="container">
    <div class="lateral">
      <div class="botao_lateral">
        <a href="">Inicio</a>
      </div>

      <div class="botao_lateral">
        <a href="">Comunidade</a>
      </div>

      <div class="botao_lateral">
        <a href="">Amigos</a>
      </div>

      <div class="botao_lateral">
        <a href="">Chat</a>
      </div>
    </div>
    <div class="direita">
      <img src="imagens/logo.jpeg" alt="imagem logo" />
    </div>
  </div>

0

Hello, you need to change your HTML in order to do this.

Here will put the side menu separate from the image:

    <body>
    <div class="menu">
        <a href="">Home</a>
        <a href="">Sobre</a>
        <a href="">Contato</a>
    </div>
    <div class="content>
        <div class="lateral">
            <div class="botao_lateral">
                <a href="">Inicio</a>
            </div>
        
            <div class="botao_lateral">
                <a href="">Comunidade</a>
            </div>

            <div class="botao_lateral">
                <a href="">Amigos</a>
            </div>

            <div class="botao_lateral">
                <a href="">Chat</a>
            </div>
        </div>
        <img src="imagens/logo.jpeg" alt="imagem logo"/>
    </div>

And In CSS add this:

.content{
display: flex;
flex-direction: row;}

Browser other questions tagged html css

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