2016-04-12 7 views
0

Ich habe versucht zu suchen, was die Kosten für dieses Problem ist. mein div wenn du könntest ist der rote hintergrund. es überschneidet sich mit der Spitze des Nav und anderen div. Ich dachte, das Problem ist meine div oder Gruppierung meiner div, ich dachte, ich könnte vergessen, eine der div zu schließen. Ich überprüfe jeden div, aber leider habe ich keinen Fehler geahndet. Ich weiß, dass es einen Fehler gibt, weil es sich überschneidet, aber ich kann es nicht gut machen.over lapping 1 div aber ist nicht die Website verzerren oder dis arrangieren die Website

wenn hoffe jemand meinen Punkt und mein Problem zu bekommen. es ist jetzt mehr als einen Monat her. Ich meine ein Anfänger in HTML und CSS

vielen Dank

.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>

Antwort