samedi 28 mai 2016

Let grow if grows

Because I didn't find a post with this topic I'm gonna create my own (first ;-) ) post. So, I've got a question. How can I move all the elements below a paragraph, that is contenteditable, when I type something. Here is my code:

                      body, html {
                                margin: 0;
                                padding: 0;
                                background-color: white; 
                        }       
                        
                        .input {
                                border: 1px dotted black;
                                width: 30%;
                                float: right;
                                left: 45%;
                                height: 40px;
                                position: absolute;
                                background-color: #8CE1FF;
                                color: #6E6E6E;
                                font-size: 16px;
                                font-family: 'Arimo';
                        }                       
                        
                        .input:hover {
                                border: 1px solid black;                        
                        }
                        
                        
                        #content {
                                border: 1px dotted black;
                                width: 50%;
                                float: right;
                                position: absolute;
                                background-color: #8CE1FF;
                                color: #6E6E6E;
                                font-size: 19px;
                                font-family: 'Arimo';
                                height: 40%;
                        }
                        
                        #content:hover {
                                border: 1px solid black;
                        }
                        
                        .details {
                                margin-bottom: 30px;
                                z-index: 900;
                                font-family: 'Arimo';
                                font-size: 17px;
                        }
                        
                        section {
                                background-color: #53CFFC;
                                margin: 20%;
                                z-index: 901;
                                border: 1px solid black;
                        }
                        
                        #button {
                                color: #C0C0C0;
                                margin-top: 5%;
                                background: #168CB7;
                                border: 1px solid #0C8FBF;
                                height: 40px;
                                width: 100%;
                                font-family: 'Arimo';
                                font-size: 20px;
                                position: relative;
                        }                       
                        
                        #title {
                                height: 40px;
                                text-align: center;
                                font-family: 'Arimo';
                                font-size: 20px;
                                background: #168CB7;
                                color: #C0C0C0;
                        }
                        
                        #form {
                                padding: 4%;
                        }
<!DOCTYPE html>
<html>
<head>

                <title> Test </title>
                <script src="http://ift.tt/1pD5F0p"></script>

                </head>
        
                        

                

        <body>

        <section>
                <div id="title"> title </div>
                
                <div id="form">
                
                <div class="details">     Name <strong>*</strong>:                                                                                                            <input type="text" class="input" id="name">       <br> </div>
                <div class="details">     Mail <strong>*</strong> : <input type="text" class="input" id="mail">                 <br> </div>
                <div class="details">     Website:                                                                                                                                                                                                <input type="text" class="input" id="name">       <br> </div>
        
                <br>
                <div class="details"> Text: 
                <p id="content" contenteditable="true"> Click to write your post. </p>
                        <br>              
                </div>
                
                </div>
                
                
                <button id="button" onclick="">Submit</button>
        </section>

        </body>
</html>

I hope you understand my problem and help me. :-) fiddle: http://ift.tt/1NUHvcy

LG adagi

// Sorry for my bad english, I'm from Switzerland and I'm learning english since 4 years only. :c Correct every mistake c:




Aucun commentaire:

Enregistrer un commentaire