-2

Sou iniciante na área e preciso da ajuda de voces. Eu estou tentando colocar essa imagem ao lado dos botões mas não estou conseguindo. Já tentei usar background-image mas não funcionou.

Deixei meu código para ver se alguem me da um norte. Desde já, agradeço.

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>

3 Respostas 3

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 uma div que envolva as div que você queira organizar, aplique a propriedade no css "display: flex", "flex-wrap: wrap" para quebrar e em cada div aplique o "flex-basis" de acordo com a porcentagem que você deseje que cada div ocupe. Eu coloquei 50% para cada.

* {
  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

Olá, você precisar alterar o seu HTML para poder fazer isso.

Aqui vai colocar o menu lateral separado da imagem:

    <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>

E No CSS adiciona isto:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .