Изменение маржи сверху влияет на другие места

Я надеюсь, что кто-то может мне помочь, я знаю, что здесь много кода, но сам не могу понять это, вопрос в том, когда я увеличиваю margin-top #col1 p{например, с 50 до 80 или что-то еще, затем неожиданно правую часть страницы также выясняется (#col2), как это остановить и где проблема, и почему это влияет только на правую, а не на левую сторону, я просто улучшаю свои навыки на CSS

<!DOCTYPE html>
<html>
<head>
 <title>Sivu</title>
 <meta charset="utf-8"/>
 <style> 
body{
 width:960px;
 margin:auto;
 border: 1px solid #878787;
}
/*Poistetaan html-elementtien oletusmarginaalit. Yleensä sotkee asettelun.*/
h1, h2, p{
 margin:0;
 
}


#header{
 width:100%;
 height:200px;
 /*Kaksi kuvaa päällekkäin*/
 background-image:url(logo.png),url(kuva1.jpg);
 background-repeat:no-repeat;
}
#universitaslorem{
 width:100%;
 height:70px;
  background-color:#80ced6;
  position:relative;
  color:white

}
h1 span{
    font-size: 60px;

}
#header-content{
  position: absolute;
  bottom: 0;
  left: 0;
   


}
#header-content h1{
   font-family: Broadway, Castellar, fantasy;
    font-size: 35px;
}
#navigation ul{
 list-style-type:none;
 margin:0;
 padding:0;

}

#navigation li{
 display:inline;
 float:left;
}

#navigation a:link,a:visited{
 display:block;
 font-weight:bold;
 color:#fff;
 background-color:#80ced6;
 padding:4px;
  padding-left:9px;
 text-decoration:none;
}

#navigation a:hover{
 background-color:#5f0082;
}
.jatkoanavigaatiolle{
 background-color:#80ced6;
 color:#fff;

 padding:4px;

}
#content{
 width:460px;
   margin-left: 170px;  
   overflow: hidden;
   padding:10px;

}
#content img{
    margin-top: 70px;
float:right;
}
#col1 p{
 width:460px;
  font-family:"Times New Roman", Times, serif; 
    font-size: 16px;
 margin-top:50px;

}



#col2{
 width:210px;
 margin: 20px 15px;
    padding: 15px;
  float: right;
     margin-top: -373px;

}
.resources h3{
 background-color:#80ced6;
color:white;
}
.resoucesborder{
    border-bottom: 2px solid #878787;
    line-height: 29px;}

#col2 fieldset{
 border:solid 2px black;

}
#col4{
 float:left;
 width:210px;

}
#col4 img{
float:right;
}

#nappi{
 /*Kuva buttoniin*/
 background-image:url("button.png");
 width:185px;
 height:55px;
 margin:15px 0px;
}
#footer{
 clear:both;
 width:958px;
 background-color:#80ced6;
 text-align:center;
 padding:5px 0px;
}

 
 </style>
</head>

<body>
<div id="universitaslorem">
  <div id="header-content"><h1><span>U</span>jyjtgjyty</h1></div>

 </div>
 <div id="header">
 </div>

 <div id="navigation">
  <ul>
   <li><a href="#">ffffs</a></li>
   <li><a href="#">uuuu</a></li>
   <li><a href="#">cccc</a></li>
   <li><a href="#">gggg</a></li>
  </ul>
 </div><div class="jatkoanavigaatiolle">  .</div>
 <div id="col4">
 
   <h3>nnnn</h3>
 <h3>Ddddd</h3> <img src="kuva4.jpg" alt="Statue"></img>

<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum dolor 
</p>

 <h3>aiii</h3>
 <img src="kuva3.jpg" alt="Statue"></img>

 </div>
 <div id="content">
 <img src="kuva2.jpg" alt="Statue"></img>

  <div id="col1">
  
  
  <h1>ooooooo</h1>
  
<p>
LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem ipsum dolor sit amet. consecteturadipiscin elit. VAenean dui libero, accumsan non elementum id. ullamcorper sit amet sem.Lorem ipsum dolor sit amet. consectetur adipiscin elit. 
</p><p>
Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>
<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>   
  </div>
    </div>
  <div id="col2">
  <div class="resources"> <h3>Resources for</h3></div>
  
<div class="resoucesborder">eee</div>
<div class="resoucesborder">sss</div>
<div class="resoucesborder">fff</div>
<div class="resoucesborder">gggg</div>
<div >eee</div>
  <div class="resources"> <h3>hhh</h3>
  <p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p> 
  </div>

  
  
  
  </div>
   

 

 
 <div id="footer">
  <p>fffffff </p>

 <p>Copyright &copy; hhh</p>
 </div>




</body>
</html>

Источник

2 ответа

Это происходит потому, что

You haven't set float в #content

  • Удалить margin-left от #content
  • Remove negative margin from #col2

body{
 width:960px;
 margin:auto;
 border: 1px solid #878787;
}
/*Poistetaan html-elementtien oletusmarginaalit. Yleensä sotkee asettelun.*/
h1, h2, p{
 margin:0;
 
}


#header{
 width:100%;
 height:200px;
 /*Kaksi kuvaa päällekkäin*/
 background-image:url(logo.png),url(kuva1.jpg);
 background-repeat:no-repeat;
}
#universitaslorem{
 width:100%;
 height:70px;
  background-color:#80ced6;
  position:relative;
  color:white

}
h1 span{
    font-size: 60px;

}
#header-content{
  position: absolute;
  bottom: 0;
  left: 0;
   


}
#header-content h1{
   font-family: Broadway, Castellar, fantasy;
    font-size: 35px;
}
#navigation ul{
 list-style-type:none;
 margin:0;
 padding:0;

}

#navigation li{
 display:inline;
 float:left;
}

#navigation a:link,a:visited{
 display:block;
 font-weight:bold;
 color:#fff;
 background-color:#80ced6;
 padding:4px;
  padding-left:9px;
 text-decoration:none;
}

#navigation a:hover{
 background-color:#5f0082;
}
.jatkoanavigaatiolle{
 background-color:#80ced6;
 color:#fff;

 padding:4px;

}
#content{
 width:460px;
   /* margin-left: 170px; */  
   overflow: hidden;
   padding:10px;
  float: left;
}
#content img{
    margin-top: 70px;
float:right;
}
#col1 p{
 width:460px;
  font-family:"Times New Roman", Times, serif; 
    font-size: 16px;
 margin-top:50px;

}



#col2{
 width:210px;
 margin: 20px 15px;
    padding: 15px;
  float: right;
     /* margin-top: -373px; */

}
.resources h3{
 background-color:#80ced6;
color:white;
}
.resoucesborder{
    border-bottom: 2px solid #878787;
    line-height: 29px;}

#col2 fieldset{
 border:solid 2px black;

}
#col4{
 float:left;
 width:210px;

}
#col4 img{
float:right;
}

#nappi{
 /*Kuva buttoniin*/
 background-image:url("button.png");
 width:185px;
 height:55px;
 margin:15px 0px;
}
#footer{
 clear:both;
 width:958px;
 background-color:#80ced6;
 text-align:center;
 padding:5px 0px;
}
<div id="universitaslorem">
  <div id="header-content"><h1><span>U</span>jyjtgjyty</h1></div>

 </div>
 <div id="header">
 </div>

 <div id="navigation">
  <ul>
   <li><a href="#">ffffs</a></li>
   <li><a href="#">uuuu</a></li>
   <li><a href="#">cccc</a></li>
   <li><a href="#">gggg</a></li>
  </ul>
 </div><div class="jatkoanavigaatiolle">  .</div>
 <div id="col4">
 
   <h3>nnnn</h3>
 <h3>Ddddd</h3> <img src="kuva4.jpg" alt="Statue"></img>

<p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum dolor 
</p>

 <h3>aiii</h3>
 <img src="kuva3.jpg" alt="Statue"></img>

 </div>
 <div id="content">
 <img src="kuva2.jpg" alt="Statue"></img>

  <div id="col1">
  
  
  <h1>ooooooo</h1>
  
<p>
LoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLoremLorem ipsum dolor sit amet. consecteturadipiscin elit. VAenean dui libero, accumsan non elementum id. ullamcorper sit amet sem.Lorem ipsum dolor sit amet. consectetur adipiscin elit. 
</p><p>
Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>
<p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p>   
  </div>
    </div>
  <div id="col2">
  <div class="resources"> <h3>Resources for</h3></div>
  
<div class="resoucesborder">eee</div>
<div class="resoucesborder">sss</div>
<div class="resoucesborder">fff</div>
<div class="resoucesborder">gggg</div>
<div >eee</div>
  <div class="resources"> <h3>hhh</h3>
  <p>Lorem ipsum dolor sit amet. consectetur adipiscin elit. Vivamusaccumsan lacinia ante. at placerat nisl commodo nec. Aenean dui libero. accumsan non elementum id. ullamcorper sit amet sem.
</p> 
  </div>

  
  
  
  </div>
   

 

 
 <div id="footer">
  <p>fffffff </p>

 <p>Copyright &copy; hhh</p>
 </div>

Источник 
    #col1 p {
        width: 460px;
        font-family: "Times New Roman", Times, serif;
        font-size: 16px;
        margin-top: 80px;

    }



    #col2 {
        width: 210px;
        margin: 20px 15px;
        padding: 15px;
        float: right;
        margin-top: -453px;

    }

так что после просмотра вашего кода кажется, что вы жестко программируете все в своем CSS. Хотя это работает по большей части, есть гораздо более простые способы сделать это. Возможно, вы захотите взглянуть на Bootstrap, это отличный инструмент для веб-дизайна переднего плана. (посмотрите на систему BootStrap Grid System, в частности, но если вам интересно, у нее есть множество других инструментов, которые значительно упрощают проектирование)

Что касается проблемы с полем top, для того, чтобы изменить поле margin для #col1, вам также нужно изменить поле margin для col2. В вашем примере вы упомянули изменение #col1 margin-top с 50px до 80px в качестве примера. Я пошел вперед и манипулировал пикселями, чтобы уменьшить col1 и сохранить col2 вверх. Это вопрос игры с числами. Надеюсь, это помогло!

Источник
Другие вопросы по тегам