我一生都找不到为什么我的信息content2
div
不断放大,我想这是由于使用了负边距。有没有办法解决?任何想法或修复?
HTML
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
<title>Programs R Us</title>
</head>
<body>
<div id="body">
<div id="wrap">
<!--header starts-->
<div id="header">
<div id="name">
<h1>Programs <span>R</span> Us</h1>
</div><!--end name-->
<div id="nav"><br>
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="programs.html">Our Programs</a></li>
</ol>
</div><!--end nav-->
</div><!--end header-->
<!--header ends-->
<!--content1 starts-->
<div id="content1">
<img src="images/placeholder.png" width="400" height="323" alt="logo">
<div id="imgright">
<h2>What We Do</h2>
<p>paragraph</p>
<div id="button"><a href=#>
<h4>Request A Program</h4></a>
</div><!--end button-->
</div><!--end imgright-->
</div><!--end content1-->
<!--content1 ends-->
<!--content2 starts-->
<div id="content2">
<div id="one">
<img src="images/arrow.png" width="70px" height="50px;" alt="arrow1">
<h3>Contact Us</h3>
<p>"Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam"</p>
</div><!--end one-->
<div id="two">
<img src="images/arrow.png" width="70px" height="50px;" alt="arrow1">
<h3>About Us</h3>
<p>"Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam"</p>
</div><!--end two-->
<div id="three">
<img src="images/arrow.png" width="70px" height="50px;" alt="arrow1">
<h3>View Our Programs</h3>
<p>"Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
minim veniam"</p>
</div><!--end three-->
</div><!--end content2-->
<!--content2 ends-->
<!--footer starts-->
<div id="footer">
<h5>Insert some footer information, copyright information also</h5>
</div><!--end footer-->
<!--footer ends-->
</div><!--end wrap-->
</div><!--end body-->
<div id="blue">
</div><!--end blue-->
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html, body{
margin:0;
padding:0;
}
body{
background-image:url(images/background.jpg);
overflow: auto;
}
#body{
margin-top:-25px;
margin-bottom:25px;
padding:0;
}
#wrap{
width:1124px;
height:100%;
margin:0 auto;
padding-top:5px;
}
#header h1{
font-size:36px;
font-family: Terminal, Verdana, Geneva, sans-serif;
color: white;
}
#header span{
font-size:100px;
color:black;
font-family:"brush script std", Verdana, Geneva, sans-serif;
}
#nav{
margin-top:-90px;
margin-bottom:75px;
margin-right:40px;
background-color:#2e3192;
float:right;
margin-left:-300px;
border-radius:10px;
-moz-border-radius:10px;
}
#nav ol {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
background-color:#2e3192;
margin-top:-10px;
}
#nav li {
display: inline;
}
#nav a {
display: block;
float: left;
margin-right: 3px;
padding: 10px 20px;
text-decoration: none;
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: white;
padding-top:0px;
padding-bottom:10px;
}
#nav a:hover {
text-decoration: none;
color: black;
}
#content1 img{
margin-left:25px;
}
#imgright{
margin-left:445px;
margin-top:-389px;
}
#button h4{
font-family:"Times New Roman", Times, serif;
font-size:24px;
color:white;
padding-left:10px;
}
#button{
margin-left:-400px;
margin-top:-50px;
margin-bottom:110px;
border-radius:10px;
-moz-border-radius:10px;
background-color:#ff0000;
width:220px;
}
#button a{
text-decoration:none;
}
#button a:hover{
text-decoration:underline;
color:white;
}
h2{
font-family:"Times New Roman", Times, serif;
font-size:48px;
}
#imgright p{
color: white;
font-size:24px;
font-family: "Times New Roman", Times, serif;
margin-top:-30px;
margin-left:20px;
}
#content2{
background-color:#2e3192;
overflow-x:visible;
width:100%;
height:100%;
}
#one, #two, #three{width:341.3px;}
#one img, #two img, #three img{padding-right:10px;}
#one h3, #two h3, #three h3{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:white;
padding-bottom:2px;
border-left-width:3px;
border-left-style:solid;
border-left-color:white;
padding-left:6px;
padding-top:4px;
}
#one h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
margin-left:80px;
margin-top:-40px;
}
#one p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}
#two h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
margin-left:80px;
margin-top:-46px;
}
#two p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}
#three h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
margin-left:80px;
margin-top:-46px;
}
#three p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}
#one{
margin-top:50px;
}
#two{
margin-top:-270px;
margin-left:360px;
}
#three{
margin-top:-140px;
margin-left:720px;
margin-bottom:0px;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: 10px;
}
#footer h5{
margin-left:300px;
}
#blue{
position:absolute;
top:619px;
z-index:-1;
background-color:#2e3192;
height:100%;
width:100%;
}
问题的图像
问题的图像