Мой контент не выходит за рамки одной страницы, когда я добавляю больше материала, он смешивается - PullRequest
Новая
       19

Мой контент не выходит за рамки одной страницы, когда я добавляю больше материала, он смешивается

0 голосов
/ 11 июня 2019

Я новичок в программировании и пытаюсь создать веб-сайт управления временем для школы.Я копировал этот код несколько раз, однако теперь он, кажется, не переходит вниз по странице, и я не знаю почему.

<html>
<style>
     
.title {
    text-align: center;
    font-size: 45px;
    color: #b72121;
}
     
    </style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
    <font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
    <div> 
        <h2> Today <span class= "june13">June 13</span></h2> 
        <div class="line1">
            <div> 
			    <br />
                <div id= "bonus" />
                <input id= "first" type="text" name="firstname" value="Enter Task Here">
                <br />  
                <div>
                    <button class="button" onclick ="addtask()"> Add Task </button>
                    <div id="div">
                        <div> 
                            <h2 class= "tom"> Tomorrow <span class= "june14">June 14</span></h2> 
                            <div class="line2"> 
                                <div>
               
                                    <div>
                                        <br /> 
                                        <div id= "bonus1" />
                                        <input id= "first1" type="text" name="firstname" value="Enter Task Here">
                                    </div>
                                    <button class="button1" onclick ="addtask1()"> Add Task </button>
                                </div>
                                <div> 
                                    <h2> Satuday <span class= "june14">June 15</span></h2> 
                                    <div class="line3"> 
                                        <div>
                                            <div>
                                                <br /> 
                                                <div id= "bonus2" />
                                                <input id= "first2" type="text" name="firstname" value="Enter Task Here">
                                            </div>
                                            <button class="button2" onclick ="addtask2()"> Add Task </button>
                                            <div>
                                            <div> 
                                                <h2> Sunday <span class= "june16">June 16</span></h2> 
                                                <div class="line4"> 
                                                    <div>
                                                        <div>
                                                            <br /> 
                                                            <div id= "bonus3" />
                                                            <input id= "first3" type="text" name="firstname" value="Enter Task Here">
                                                        </div>
                                                        <button class="button3" onclick ="addtask3()"> Add Task </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <div> 
                                                    <h2> Sunday <span class= "june16">June 16</span></h2> 
                                                        <div class="line4"> 
                                                            <div>
                                                                <div>
                                                                    <br /> 
                                                                    <div id= "bonus3" />
                                                                    <input id= "first3" type="text" name="firstname" value="Enter Task Here">
                                                                </div>
                                                                <button class="button3" onclick ="addtask3()"> Add Task </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div/>
                </div> 
            </div>
        </div>
    </div>
<style>        
    .title {
        text-align: center;
        font-size: 45px;
        color: #b72121;
    }
             
    .june13 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line1 {
        width: 30%;
        height: 2px;
        background-color: #666;
        margin-bottom: 10px;
    }   
    
    .button {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    }

    .button:hover {
        background-color: #3e8e41
    }

    .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    input {     
        margin-bottom: 10px;
    }
             
    .june14 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line2 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
			 
    .button1 {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    }

    .button1:hover {
        background-color: #3e8e41
    }

    .button1:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    .june15 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line3 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
			 
    .button2 {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    
    }

    .button2:hover {
        background-color: #3e8e41
    }

    .button2:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }
             
    .june16 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line4 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
		
    .button3 {
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;
    
    }

    .button3:hover {
        background-color: #3e8e41
    }

    .button3:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }

    june17 {
        font-family: "Times New Roman", Times, serif;
        font-size: 14px;
        color: #989da5;   
        margin: 0px;
        padding: 0px;
    } 
             
    .line5 {
        width: 100%;
        height: 2px;
        background-color: #666;
        opacity: 10.300;
        margin-bottom: 10px;
    }   
             
    .tom {
        color: #111111;
    }
			 
    .button4 {
  
        font-size: 10px;
        cursor: pointer;
        outline: none; 
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
        height: 25px;
        width: 70px;  
    }

    .button4:hover {
        background-color: #3e8e41
    }

    .button4:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
}
    
</style>
</div> 
    <script>
        function addtask() {
            var first = document.getElementById("first").value;
            document.getElementById("bonus").innerHTML += "<p>"+first+"</p>";
        }
        
        function addtask1() {
            var first = document.getElementById("first1").value;
            document.getElementById("bonus1").innerHTML += "<p>"+first+"</p>";
        }
		 
        function addtask2() {
            var first = document.getElementById("first2").value;
            document.getElementById("bonus2").innerHTML += "<p>"+first+"</p>";
        }
		
        function addtask3() {
            var first = document.getElementById("first3").value;
            document.getElementById("bonus3").innerHTML += "<p>"+first+"</p>";   
        }
    </script>
</body>
</html>

Я считаю, что это более проблемная часть кода.

<div>
    <div> 
        <h2>Sunday <span class= "june16">June 16</span></h2> 
        <div class="line4"> 
            <div>
                <div>
                    <br/> 
                    <div id= "bonus3" />
                    <input id= "first3" type="text" name="firstname" value="Enter Task Here">
                </div>
                <button class="button3" onclick ="addtask3()">Add Task</button>
            </div>
        </div>
    </div>                      
</div>

Буду очень признателен за помощь, и все будет хорошо.Я просто пытаюсь сделать так, чтобы вы могли добавлять задачи, которые вы хотите выполнить в этот день, а затем размещать их над входом.Я очень новичок в коде.Я также пытаюсь установить приоритетные уровни, используя цвет, однако я не знаю, как это сделать.Цени это:)

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Ух ты, эти вложенные divs напоминают мне старый код Dreamweaver!Вот один из способов очистить и удалить многие из них divs.Я сохранил первую обертку div и дал ей id «контейнера», просто чтобы добавить к ней некоторые отступы.Затем теги h2 оформляются с полями, чтобы они не слипались.

     
     function addtask() {
        
       var first = document.getElementById("first").value;
       document.getElementById("bonus").innerHTML += "<p>"+first+"</p>";
         
      
         }
        
         function addtask1() {
        
       var first = document.getElementById("first1").value;
       document.getElementById("bonus1").innerHTML += "<p>"+first+"</p>";
         
      
         }
                 function addtask2() {
        
       var first = document.getElementById("first2").value;
       document.getElementById("bonus2").innerHTML += "<p>"+first+"</p>";
         
      
         }
        function addtask3() {
        
       var first = document.getElementById("first3").value;
       document.getElementById("bonus3").innerHTML += "<p>"+first+"</p>";
         
      
         }
        
       
.title {
    
    text-align: center;
    font-size: 45px;
    color: #b72121;
    
}
             
 .june13 {
     
     
     font-family: "Times New Roman", Times, serif;
     font-size: 14px;
     color: #989da5;   
     margin: 0px;
     padding: 0px;
 } 
             
.line1 {
    
    width: 30%;
    height: 2px;
    background-color: #666;
    margin-bottom: 10px;
    
             }   
    
.button {
  
  font-size: 10px;
  cursor: pointer;
  outline: none; 
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  height: 25px;
    width: 70px;
}
.button:hover {
    background-color: #3e8e41
    }

    .button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

             input {
              
                 margin-bottom: 10px;
                 
             }
             
.june14 {
     
     
     font-family: "Times New Roman", Times, serif;
     font-size: 14px;
     color: #989da5;   
     margin: 0px;
     padding: 0px;
 } 
             
.line2 {
    
    width: 30%;
    height: 2px;
    background-color: #666;
    opacity: 10.300;
    margin-bottom: 10px;
    
             }   
             
         .tom {
             
             color: #111111;
             
             }
.button1 {
  
  font-size: 10px;
  cursor: pointer;
  outline: none; 
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  height: 25px;
    width: 70px;
    
}
.button1:hover {
    background-color: #3e8e41
    }

    .button1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

         
             .june15 {
     
     
     font-family: "Times New Roman", Times, serif;
     font-size: 14px;
     color: #989da5;   
     margin: 0px;
     padding: 0px;
 } 
             
.line3 {
    
    width: 30%;
    height: 2px;
    background-color: #666;
    opacity: 10.300;
    margin-bottom: 10px;
    
             }   
             
         .tom {
             
             color: #111111;
             
             }
.button2 {
  
  font-size: 10px;
  cursor: pointer;
  outline: none; 
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  height: 25px;
    width: 70px;
    
}
.button2:hover {
    background-color: #3e8e41
    }

    .button2:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
             
   .june16 {
     
     
     font-family: "Times New Roman", Times, serif;
     font-size: 14px;
     color: #989da5;   
     margin: 0px;
     padding: 0px;
 } 
             
.line4 {
    
    width: 30%;
    height: 2px;
    background-color: #666;
    opacity: 10.300;
    margin-bottom: 10px;
    
             }   
             
         .tom {
             
             color: #111111;
             
             }
.button3 {

  font-size: 10px;
  cursor: pointer;
  outline: none; 
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  height: 25px;
   width: 70px;
    
}
.button3:hover {
    background-color: #3e8e41
    }

  .button3:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
             
         
             
  .june17 {
     
     font-family: "Times New Roman", Times, serif;
     font-size: 14px;
     color: #989da5;   
     margin: 0px;
     padding: 0px;
 } 
             
.line5 {
    
    width: 30%;
    height: 2px;
    background-color: #666;
    opacity: 10.300;
    margin-bottom: 10px;
    
             }   
             
         .tom {
             
             color: #111111;
             
             }


h2 {
 margin-top: 4em;
 }
 
h2#subtitle {
margin: 0 0 -2em 0;
font-family: "Times New Roman";
font-size: 3rem;
}

#container {
padding: 4em 2em;
}
<html>
<style>
.title {
text-align: center;
font-size: 45px;
color: #b72121;   
}
</style>
<header>
<title>ManageMe</title>
</header>
<body>
<div id = "container">
<h1 class= "title"> ManageMe </h1>
<h2 id = "subtitle">Next 7 Day Outlook</h2><br />
<h2> Today <span class= "june13">June 13</span></h2> 
<div class="line1">
<br>
<div id= "bonus"></div>
<input id= "first" type="text" name="firstname" value="Enter Task Here">
<br>                 
<button class="button" onclick ="addtask()"> Add Task </button>            
</div>               


<h2 class= "tom"> Tomorrow <span class= "june14">June 14</span></h2> 
<div class="line2"> 
<br> 
<div id= "bonus1"></div>
<input id= "first1" type="text" name="firstname" value="Enter Task Here">
<br>
<button class="button1" onclick ="addtask1()"> Add Task </button>                       
</div>
        
    
<h2 class= "tom">Saturday<span class= "june15">June 15</span></h2> 
<div class="line3"> 
<br> 
<div id= "bonus2"></div>
<input id= "first2" type="text" name="firstname" value="Enter Task Here">
<br>
<button class="button2" onclick ="addtask2()"> Add Task </button>                       
</div>


<h2 class= "tom">Sunday<span class= "june16">June 16</span></h2> 
<div class="line4"> 
<br> 
<div id= "bonus3"></div>
<input id= "first3" type="text" name="firstname" value="Enter Task Here">
<br>
<button class="button3" onclick ="addtask3()"> Add Task </button>                       
</div>
      
</div>
    

</body>
</html>
0 голосов
/ 11 июня 2019

Прежде всего, очистите ваш код, имена классов должны использоваться для группировки элементов, которые выглядят одинаково (например, в вашем случае line1, line2 и т. Д. Должны иметь имена line). Если вам нужно получить доступ к элементу отдельно, используйте идентификатор (например, кнопки).

Проблема с внешним видом для вас заключается в том, что высота класса line равна 2px, и, поскольку он является оберткой для всего раздела, высота всего раздела составляет 2px. Я очистил ваш код, и вот пример того, как он может выглядеть (обратите внимание, что имя класса june13 также должно быть переименовано в date или что-то подобное). Чтобы добавить больше дат, просто скопируйте раздел и измените значения для input id и button function. 

function addtask() {
    var first = document.getElementById("first").value;
    document.getElementById("bonus").innerHTML += "<p>" + first + "</p>";
}

function addtask1() {
    var first = document.getElementById("first1").value;
    document.getElementById("bonus1").innerHTML += "<p>" + first + "</p>";
}

function addtask2() {
    var first = document.getElementById("first2").value;
    document.getElementById("bonus2").innerHTML += "<p>" + first + "</p>";
}

function addtask3() {
    var first = document.getElementById("first3").value;
    document.getElementById("bonus3").innerHTML += "<p>" + first + "</p>";
}
.title {
	text-align: center;
	font-size: 45px;
	color: #b72121;
}

.june13 {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #989da5;
	margin: 0px;
	padding: 0px;
}

.line1 {
	width: 30%;
	height: 2px;
	background-color: #666;
	margin-bottom: 10px;
}

.button {
	font-size: 10px;
	cursor: pointer;
	outline: none;
	color: #fff;
	background-color: #4CAF50;
	border: none;
	border-radius: 15px;
	box-shadow: 0 9px #999;
	height: 25px;
	width: 70px;
}

.button:hover {
	background-color: #3e8e41
}

.button:active {
	background-color: #3e8e41;
	box-shadow: 0 5px #666;
	transform: translateY(4px);
}

input {
	margin-bottom: 10px;
}
<html>
  <header>
    <title>ManageMe</title>
  </header>
  <body>
    <h1 class= "title"> ManageMe </h1>
    <font face = "Times New Roman" size = "7">Next 7 Day Outlook</font>
    <br />
    <!--DAY SECTION START-->
    <h2> Today 
      <span class= "june13">June 13</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus"></div>
      <br>
      <input id= "first" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
    <!--DAY SECTION START-->
    <h2> Tomorrow 
      <span class= "june13">June 14</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus1"></div>
      <br>
      <input id= "first1" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask1()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
  </body>
</html>
...