2016-04-12 77 views
0

我一直在努力尋找這個問題的成本。我的分區 如果你可以是紅色的背景。它與nav和其他div的頂部重疊。 我以爲問題是我的div或div的分組,我想我可能忘了關閉其中一個div。我仔細檢查每個div,但可悲的是我沒有罰款任何錯誤。我知道有錯誤,因爲它重疊,但我不能罰款。重疊1格但不是扭曲網站或不安排網站

如果希望任何人得到我的觀點和我的問題。它已經超過一個月了。我在我的HTML和CSS初學者

太感謝你了

.content{ 
 
\t width:1024px; 
 
\t margin:auto; 
 
\t height: 2000px; 
 
\t color: ffffff; 
 
\t background-color: #17120f; 
 
} 
 

 

 
.bigimage{ 
 
\t heigth: 100px; \t 
 
\t background-color: red; 
 
} 
 
\t 
 
.signage{ 
 
\t margin-bottom: 10px; 
 
} 
 

 
.navicon{ 
 
\t float:left; 
 
\t width: 100%; 
 
\t margin-left: 940px; 
 
} 
 

 

 
.signage{ 
 
\t float: left; 
 
\t width: 65%; 
 
\t 
 

 
} 
 
.nav{ 
 
\t float: left; 
 
\t width: 35%; \t 
 
\t margin-bottom: 10px; 
 

 
} 
 

 
.nav li{ 
 
\t display: inline; 
 

 
} 
 

 
.nav ul li a{ 
 
\t text-decoration: none; 
 
\t color: ffffff; 
 
} 
 

 
.bigimage{ 
 
\t 
 
\t margin-left: 5px; 
 

 
} 
 

 
.treeparagh{ 
 
\t margin-top: 20px; 
 

 
} 
 

 

 
.firstparag{ 
 
\t float: left; 
 
\t width: 30%; 
 
\t padding-left: 10px; 
 
\t padding-right: 9px; 
 
\t margin-right: 10px; 
 
\t background-color: #17120f; 
 
} 
 

 

 

 

 

 
.firstimage{ 
 
\t float: left; 
 
\t margin-top: 10px; 
 
\t margin-right:10px; 
 

 
} 
 

 

 

 
.secondparag{ 
 
\t float: left; 
 
\t width: 30%; \t 
 
\t padding-left: 10px; 
 
\t padding-right: 9px; 
 
\t margin-right: 10px; 
 
\t background-color: #17120f; 
 
} 
 

 

 

 
.secondimage{ 
 
\t float: left; 
 
\t margin-top: 20px; 
 
\t margin-right: 10px; 
 
} 
 

 

 
.thirdparag{ 
 
\t float: left; 
 
\t width: 30%; \t \t 
 
\t padding-left: 20px; 
 
\t padding-right: 10px; 
 
\t background-color: #17120f; 
 
\t 
 
} 
 

 

 
.thirdimage{ 
 
\t float: left; 
 
\t margin-top: 20px; 
 
\t margin-right: 10px; 
 
} 
 

 

 
.firsttwoparagh{ 
 
\t width: 60%; 
 
\t float: left; 
 

 
} 
 

 
.treeparagh{ 
 
\t background-color:red; 
 

 
}
<body> 
 

 
\t <div class = "content"> 
 
\t \t 
 
     <div class = "navicon"> 
 

 
\t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/house icon.png"/></a> 
 
\t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/mail icon.png"/></a> 
 
\t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/stracture icon.png"/></a> 
 
\t \t 
 
\t \t </div> \t \t \t 
 

 
\t \t <div class ="secondpart"> 
 

 
\t \t \t 
 
\t \t \t <div class = "signage"> 
 

 
\t \t \t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/topimages.png"/></a> 
 

 
\t \t \t </div> 
 

 
\t \t \t <div class = "nav"> 
 

 
\t \t \t \t <ul> 
 
\t     
 
\t      <li><a href="#"> Home </a></li> 
 
\t      <li><a href="#"> Service</a> </li> 
 
\t      <li><a href="#"> Porfolio</a> </li> 
 
\t     <li><a href="#"> About</a> </li> 
 
\t     <li><a href="#"> Contact Us</a> </li> 
 
\t        
 
\t    
 
\t    </ul> 
 

 
\t \t \t </div> \t \t \t \t \t \t 
 

 
\t \t \t 
 

 
\t \t </div> \t \t \t \t \t 
 

 
\t \t 
 
\t <div class = "bigimage"> 
 

 
\t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/center image.png"/></a> 
 

 
\t </div> \t \t 
 

 
\t \t 
 
\t <div class = "treeparagh"> 
 

 
\t \t \t <div class = "firstparag"> 
 

 

 
\t \t \t \t <div class = "firstimage"> 
 
\t \t \t \t 
 
\t \t \t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/firstparagh.png"/></a> 
 

 
\t \t \t \t </div> 
 

 

 
\t \t \t \t <div class = "firsttitle"> 
 

 
\t \t \t \t \t <h1>FIRST PARAGPAH </h1> 
 

 
\t \t \t \t </div> \t 
 

 
\t \t \t \t <div class ="firstbody"> 
 

 
\t \t \t \t \t <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy \t \t \t \t       text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has      survived not only five centuries, but also the leap into electronic typesetting,It was popularised in the 1960s with the      release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus      PageMaker including versions of Lorem Ipsum.</p> 
 
\t     <a href="#"> Read More </a> 
 

 
\t \t \t \t </div> 
 

 
\t \t \t </div> \t \t 
 

 

 
\t \t \t <div class = "secondparag"> 
 

 
\t \t \t \t 
 
\t \t \t \t <div class = "secondimage"> 
 

 
\t \t \t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/secondparagh.png"/></a> 
 

 
\t \t \t \t </div> 
 

 

 
\t \t \t \t <div class = "secondtitle"> 
 

 
\t \t \t \t \t <h1>SECOND PARAGHAP</h1> 
 

 
\t \t \t \t </div> 
 

 

 
\t \t \t \t <div class = "secondbody"> 
 

 
\t \t \t \t \t <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy      text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has      survived not only five centuries, but also the leap into electronic typesetting,It was popularised in the 1960s with the      release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus      PageMaker including versions of Lorem Ipsum.</p> 
 
\t     <a href="#"> Read More </a> 
 

 
\t \t \t \t </div> 
 

 
\t \t \t </div> \t \t \t \t \t 
 

 
\t \t \t <div class = "thirdparag"> 
 
\t \t \t 
 
\t \t \t 
 

 
\t \t \t \t <div class = "thirdimage"> 
 

 
\t \t \t \t \t <a href="#"><img src ="D:\1 DREAM\PROJECT 2\IMGS/thirdparagh.png"/></a> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 

 

 
\t \t \t \t <div class = "thirdtitle"> 
 

 
\t \t \t \t \t <h1> THIS IS IT </h1> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class = "thirdbody"> 
 

 
\t \t \t \t \t <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy      text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has      survived not only five centuries, but also the leap into electronic typesetting,It was popularised in the 1960s with the      release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus      PageMaker including versions of Lorem Ipsum.</p> 
 
\t     <a href="#"> Read More </a> 
 
\t 
 
\t \t \t \t </div> 
 

 

 
\t \t \t </div> \t \t \t \t \t \t \t \t 
 
\t \t \t 
 
\t \t 
 
     </div> 
 

 

 

 
\t </div> \t 
 
\t 
 
     \t \t \t 
 
\t   
 
      
 
      
 

 
</div> 
 
\t 
 

 

 
</body> 
 
</html>

回答