How can I adjust my chat done in html and css?

Question

How can I adjust my chat done in html and css?

Asked 5 years ago

Viewed 358 times

-3

My voicemail as seen on the first print, it’s up at the top, I want to leave it down there where it usually is, but I don’t know how. I appreciate any help I can get!

<html>
<head>
  <meta charset="UTF-8" />
  <title> </title>
  <link href="bia.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.11.1.min.js" > </script>
</head>

  <body>
    <div id="site" >

      <div id="topo">
        <h1>Corpo</h1>
      </div>
      <div id="conteudo">
        <h1>Conteudo</h1>

      </div>
      <div id="chat">
        <form method="post">
          <input type="text" name="mensagem" id="mensagem" placeholder="Digite sua mensagem..." maxlength="100" autocomplete="off" />
        </form>
       </div>
      <div id="perfis">
        <h1>Perfis</h1>
      </div>
      <div id="jogos">
        <h1>Jogos</h1>
      </div>

    </div>


  </body>

</html>

CSS

* { margic:0; padding:0; border:0}

body{background: #000000}
div#site{ background: #999999; width: 990px; height: 1200px; margin: auto; padding: 5px;}
div#topo{ background: #333333; height: 120px;}
div#conteudo{ background: #333333; height: 500px; width: 730px; margin-top: 5px; margin-bottom: 5px; float:left; border: 1px solid #ddd; border-radius: 15px;}
div#chat { background: #333; height: 500px; margin-top: 5px; width: 235px; float:right; overflow: auto; overflow-x: hidden; border-radius: 15px; border: 1px solid #ddd;}
input[type='text']{display: block; width: 233px; font-size: 14px; padding:5px;margin:1px; border-color: #ffffff; border-radius: 15px;}
div#perfis{ background: #333333; height: 80px; width: 990px; clear: both;}
div#jogos { background: #333333; height: 450px; width: 990px;}

1

Dude, put the text code in the question, and not as an image, because you can’t copy it.

– Sam

2019/11/26 at 15:25
Sorry, I just finished editing with the code.

– Mikael

2019/11/26 at 16:02

2 answers

1

Use flexbox on div#chat with column orientation and use margin-top: auto in the form that he will be at the bottom of the div.

Add properties to div#chat:

display: flex; flex-direction: column;

And create a style for the form:

#chat form{
   margin-top: auto;
}

Behold:

* { margin: 0; padding:0; border:0}

body{background: #000000}
div#site{ background: #999999; width: 990px; height: 1200px; margin: auto; padding: 5px;}
div#topo{ background: #333333; height: 120px;}
div#conteudo{ background: #333333; height: 500px; width: 730px; margin-top: 5px; margin-bottom: 5px; float:left; border: 1px solid #ddd; border-radius: 15px;}
div#chat { display: flex; flex-direction: column; background: #333; height: 500px; margin-top: 5px; width: 235px; float:right; overflow: auto; overflow-x: hidden; border-radius: 15px; border: 1px solid #ddd;}
input[type='text']{display: block; width: 233px; font-size: 14px; padding:5px;margin:1px; border-color: #ffffff; border-radius: 15px;}
div#perfis{ background: #333333; height: 80px; width: 990px; clear: both;}
div#jogos { background: #333333; height: 450px; width: 990px;}

#chat form{
   margin-top: auto;
}

<div id="site" >

   <div id="topo">
     <h1>Corpo</h1>
   </div>
   <div id="conteudo">
     <h1>Conteudo</h1>

   </div>
   <div id="chat">
     <form method="post">
       <input type="text" name="mensagem" id="mensagem" placeholder="Digite sua mensagem..." maxlength="100" autocomplete="off" />
     </form>
    </div>
   <div id="perfis">
     <h1>Perfis</h1>
   </div>
   <div id="jogos">
     <h1>Jogos</h1>
   </div>

 </div>

Thank you very much!!!

– Mikael

2019/11/26 at 16:35

Browser other questions tagged php html jquery css

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

by Luan Sabino • **117** points · Answer 1 · 2019-11-26T16:15:24+00:00

What you can do is add the form to a div

<div id="chat">
            <div id="mensagem">
                <form method="post">
                    <input type="text" name="mensagem" placeholder="Digite sua mensagem..." maxlength="100"
                        autocomplete="off" />
                </form>
            </div>
        </div>

assign to it the message id that you had previously assigned to the input, and after that you define that div as

        div#mensagem {
            position: absolute;
            bottom: 0px;
        }

not forgetting to make div#chat position:relative;

        div#chat {
            background: #333;
            height: 500px;
            margin-top: 5px;
            width: 235px;
            float: right;
            overflow: auto;
            overflow-x: hidden;
            border-radius: 15px;
            border: 1px solid #ddd;
            position: relative;
        }

so you make the element "message" absolute in its positioning, however it will be somehow linked to div chat.

    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0
        }

        body {
            background: #000000
        }

        div#site {
            background: #999999;
            width: 990px;
            height: 1200px;
            margin: auto;
            padding: 5px;
        }

        div#topo {
            background: #333333;
            height: 120px;
        }

        div#conteudo {
            background: #333333;
            height: 500px;
            width: 730px;
            margin-top: 5px;
            margin-bottom: 5px;
            float: left;
            border: 1px solid #ddd;
            border-radius: 15px;
        }

        div#chat {
            background: #333;
            height: 500px;
            margin-top: 5px;
            width: 235px;
            float: right;
            overflow: auto;
            overflow-x: hidden;
            border-radius: 15px;
            border: 1px solid #ddd;
            position: relative;
        }

        input[type='text'] {
            display: block;
            width: 233px;
            font-size: 14px;
            padding: 5px;
            margin: 1px;
            border-color: #ffffff;
            border-radius: 15px;
        }

        div#perfis {
            background: #333333;
            height: 80px;
            width: 990px;
            clear: both;
        }

        div#jogos {
            background: #333333;
            height: 450px;
            width: 990px;
        }


        div#mensagem {
            position: absolute;
            bottom: 0px;
        }
    </style>

<html>

<head>
    <meta charset="UTF-8" />
    <title> </title>
    <link href="bia.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.11.1.min.js"> </script>
</head>

<body>
    <div id="site">

        <div id="topo">
            <h1>Corpo</h1>
        </div>
        <div id="conteudo">
            <h1>Conteudo</h1>

        </div>
        <div id="chat">
            <div id="mensagem">
                <form method="post">
                    <input type="text" name="mensagem" placeholder="Digite sua mensagem..." maxlength="100"
                        autocomplete="off" />
                </form>
            </div>
        </div>
        <div id="perfis">
            <h1>Perfis</h1>
        </div>
        <div id="jogos">
            <h1>Jogos</h1>
        </div>

    </div>


</body>