html - Styling <form> tag -

-

i familiar html/css not advanced means.

i having difficulty styling form element. enter image description here

i want add padding around form whenever pads top , left

enter image description here

the other issue when re-size window small form tag seems protrude out of

enter image description here

i know proper way is.

also, if on simple code , let me know if there better/more standard way trying here.

* {    box-sizing: border-box;    font-size: 15px;    margin: 0;  }  body {    padding: 5%;  }  section {    height: 100%;    float: left;    position: relative;  }  div {} .left-section {    width: 25%;  }  .right-section {    width: 75%;  }  .body-left {    background-color: #000000;    height: 93%;  }  .body-right {    background-color: #dcdcdc;    height: 86%;  }  .header {    background-color: #808080;    height: 7%;  }  .footer {    background-color: #808080;    height: 7%;    width: 100%;    position: absolute;    padding: 5px;  }  form {    position: absolute;    height: 100%;    width: 100%;    display: block;  }  input {    background-color: #808080;    border-style: solid;    border-width: small;    border-color: #555555;    border-radius: 5px;    position: absolute;    padding: 10px;    left: 0;    height: 80%;    width: 90%;    top: 50%;    transform: translatey(-50%);  }  button {    background-color: #808080;    border-style: solid;    border-width: small;    border-color: #555555;    border-radius: 5px;    height: 80%;    width: 10%;    position: absolute;    color: #555555;    top: 50%;    right: 0;    transform: translatey(-50%);  }
<html>    <head>    <title>whisper</title>      <link rel="stylesheet" type="text/css" href="style.css">    </head>    <body>    <section id="left" class="left-section">      <div id="header_left" class="header">      </div>        <div id="body_left" class="body-left">        <ol id="users"></ol>      </div>    </section>      <section id="right" class="right-section">      <div id="header_right" class="header">      </div>        <div id="body_right" class="body-right">        <ol id="messages"></ol>      </div>        <div id="footer" class="footer">        <form id="form_id" action="#">          <input id="user_input" />          <button id="btn_id">send</button>        </form>      </div>      </section>    </body>    </html>

p.s. have checkout page couldn't find sufficient answer.

i not know if helps switched padding of 5 pixels footer class form styling.

.footer {   background-color: #808080;   height: 7%;   width: 100%;   position: absolute; } form {   position: absolute;   height: 100%;   width: 100%;   display: block;   padding: 5px; }

Comments

Post a Comment

Popular posts from this blog

Capture and play voice with Asterisk ARI -

-
there channel ari demo in wich can control channel state: ring, answer, play silence, play tone or audio-file ( https://github.com/asterisk/ari-examples/tree/master/channel-state , https://wiki.asterisk.org/wiki/display/ast/ari+and+channels%3a+manipulating+channel+state ) possible receive chunks (parts, buffers, etc.) of call voice (which created remote subscriber) or write chunks of voice, example array of bytes (not file) in audio format (alaw, ulow etc). you can use asterisk eagi interface voice data. other option use record or mixmonitor app record channel(channel have put stasis allow dialplan control ari) "write chunks of voice" can done application playback also can create own application using c/c++, compile asterisk , result want. no, can't redirect voice directly using ari.
Read more

c - Unrecognised emulation mode: elf_i386 on MinGW32 -

-
i'm trying make kernel, , cannot link c output assembly. ld . i'm getting error: unrecognized emulation mode: elf_i386 i'm using windows 10 professional mingw32 , msys. code using: link.ld /* * link.ld */ output_format(elf32-i386) entry(start) sections { . = 0x100000; .text : { *(.text) } .data : { *(.data) } .bss : { *(.bss) } } kernel.c /* * kernel.c */ void kmain(void) { const char *str = "my first kernel"; char *vidptr = (char*)0xb8000; //video mem begins here. unsigned int = 0; unsigned int j = 0; /* loops clears screen * there 25 lines each of 80 columns; each element takes 2 bytes */ while(j < 80 * 25 * 2) { /* blank character */ vidptr[j] = ' '; /* attribute-byte - light grey on black screen */ vidptr[j+1] = 0x07; j = j + 2; } j = 0; /* loop writes string video memory */ while(str[j] != '\0') { /...
Read more

css - HTML5 alternative for ::-moz-list-number -

-
this question exact duplicate of: custom numbering reversed ordered list 3 answers how define style list numbering in html5, compatible <ol reversed> ? i found ::-moz-list-number works in firefox. know better alternative same? i totally missed obvious reverse part. looks might need <li><span>item</span></li> , unstyle in <span> styled <li> . old answer (might useful some). you can style ::before , add content: counter(somecounter) . ol { list-style: none; counter-reset: item; } ol li::before { counter-increment: item; content: counter(item) ". "; color: red; font-weight: bold; } here's quick demo: https://jsfiddle.net/crswll/toggchgd/1/
Read more