redmellow

SOLVED IT! with :pseudo elements! Thanks you guys!!!

This is my attempt... And I wish even the 'wrapper_2' and 'wrapper_3' become longer as the first wrap, but I don't know where to put them in the html file...

#wrap {

    position: absolute;
    margin: 18px 0 0 16px;
    width: 350px;


    background-color: rgba(0, 90, 150, 0.9);
    margin: 20px solid white;

}


li.DDList{

    display: block;
    list-style-type: none;

    margin-left: -40px;

}



.wrapper_2 {

    position: absolute;
    z-index: -2;
    margin-top: 88px;
    margin-left: 90px;
    width: 380px;
  height: 530px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
    background-color: white;
    border: black;

}

.wrapper_3 {

    position: absolute;
    z-index: -4;
    margin-top: 94px;
    margin-left: 95px;
    width: 380px;
  height: 530px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.49);
    background-color: white;
    border: black;

}

      <li class="DDList">
                                  <div>
                                      <input class="incarico" name="incarico" placeholder="New Daily Task">

                                 </div>
                            </li>

                                        <li class="DDList">


                                                  <div>
                                                       <input class="incarico" name="incarico" placeholder="New Daily Task">
                                                  </div>

                                        </li>

                                        <li class="DDList">
                                                <div>
                                                    <input class="incarico" name="incarico" placeholder="New Daily Task">

                                               </div>
                                          </li>

                </ul>
/*END WRAP 1*/
</div>
          <div class="wrapper_2"></div>
          <div class="wrapper_3"> </div>
        <script src="jquery-3.3.1.min.js"></script>
        <script src="js/onclickEvent.js"></script>


    </body>

Wow... never mind, it was so simple!! Thanks Funce!! 😋

#wrap {

    position: absolute;
    margin: 100px 100px 100px 100px;
    width: 350px;
    height: 500px;

    background-color: rgba(0, 90, 150, 0.9);
    margin: 20px solid white;

}


li.DDList{

    display: block;
    list-style-type: none;

    margin-left: -40px;

}

That's what I wrote in .css...

Hi to all!!

It's a newbie here!

I'm trying to create a list that any time I add (copying and pasting) a line like this: <li><input></li>, the <div class="wrap"> should become automatically longer (or higher as css element height:) for any line I add... Is this possible to do this in Html? Thanks!!

<div class="wrap">
  
  <ul>
    
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    <li><input type="text" class="text"> </li>
    
  </ul>
  
</div>

SOLVED

I'm sorry for this very prosaic topic:

What does exactly mean: 'scalable vector graphics'?

1 - It means that when you reduce browser's window into a smaller size, the graphic (a circle for example) reduces itself keeping its shape, avoid the overlapping of the browser's window?

2 - Or it means that the created shape on screen is gonna have a different size, relatively to the window's size?

3 - Or it's relative to the computation's value of the script that will make the shape?

Sorry again (...blushing), thanks to anyone who'll reply to this unbelievable topic...

I found it in this right moment, while reading the lesson! I just had to wait few more pages..

Thank you dsonesuk!!

Cheers!!!

Yes I'm a newbie in AJAX '&&' JavaScript.

As I'm a pupil here, I find hurdle almost in any code...

There is an AJAX code with some number value in it, like 4 - 200, but I can't understand the nature of this digits or what they are indicating...

function loadDoc() {  var xhttp;  if (window.XMLHttpRequest) {    // code for modern browsers    xhttp = new XMLHttpRequest();    } else {    // code for IE6, IE5    xhttp = new ActiveXObject("Microsoft.XMLHTTP");  }  xhttp.onreadystatechange = function() {    if (xhttp.readyState == 4 && xhttp.status == 200) {      document.getElementById("demo").innerHTML = xhttp.responseText;    }

You see: "== 4 && xhttp.status == 200)" ... what for?

Thanks to anyone who'll reply to this 'double-dumb' question!!