0

私はここにかなり基本的なhtmlとcssを持っています、そしていくつかの理由のために私が背景画像が垂直に繰り返されていないので私のcssで設定した私の画像、またはそれがこの空白で覆われている場合、彼女の主な問題は画像が垂直方向に繰り返されなくなった時点から、純粋な空白があります。＃content2の背景色を設定してみましたが、その上でも空白を設定してみました。誰かが私が欠けているものを見ることができますか？HTML：

<!DOCTYPE html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
<title></title>
</head>

<body>
<div id="body">
<div id="wrap">

<!--header starts-->
<div id="header">
<div id="name">
<h1>Comp <span>any</span> Name</h1>
</div><!--end name-->   
<div id="nav"><br>
    <ol>
        <li><a href="programs.html">Our Programs</a></li>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="index.html">Home</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>"Lorem ipsum dolor sit amet, consectetur adipisicing 
    elit, sed do eiusmod tempor incididunt ut labore et 
    dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut 
    aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse 
    cillum dolore eu fugiat nulla pariatur. Excepteur sint 
    occaecat cupidatat non proident, sunt in culpa qui o
    fficia deserunt mollit anim id est laborum."</p>
<div id="button">
<h4>Request A Program</h4>
</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="16" height="14" 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="16" height="14" alt="arrow2"> 
  <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="16" height="14" alt="arrow3"> 
  <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-->
</body>
</html>

CSS：

@charset "utf-8";
/* CSS Document */

html, body{
margin:0;
padding:0;
}

#body{
background-image:url(images/background.jpg);
background-repeat:repeat;
margin-top:-25px;
padding:0;  
}
#wrap{
border-width:3px;
border-style:solid;
border-color:white;
width:1024px;
height:100%;
margin:0 auto;
padding-top:5px;
}

#header h1{
font-size:36px;
font-family: Terminal, Verdana, Geneva, sans-serif;
color: white;
}

span{
font-size:100px;
color:black;
font-family:brush script std, Verdana, Geneva, sans-serif;
}

#nav{
margin-top:-110px;
margin-bottom:75px;
margin-right:40px;
}

#nav ol {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#nav li {
display: block;
float: right;
}

#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;
}

#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;
}

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;
}

#one, #two, #three{width:341.3px;}

#one h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
}
#one p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}

#two h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;
}
#two p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}

#three h3{
font-family:trajan pro, Verdana, Geneva, sans-serif;
color:white;    
}

#three p{
font-family:vijaya, Verdana, Geneva, sans-serif;
color:white;
}

#one{
margin-top:50px;
}

#two{
margin-top:-104px;
margin-left:360px;
}

#three{
margin-top:-408px;
margin-left:720px;
}

#footer{

}
4

1 に答える 1

1

CSS全体の負のマージンがこの問題の原因です。

#two {
    margin-top: -104px;
    margin-left: 360px;
}

大きな負のマージンを使用して物を移動する代わりに、floatを使用します：http ：//www.w3schools.com/cssref/pr_class_float.asp 。

これがCSS-tricksのチュートリアルです：http：//css-tricks.com/all-about-floats/。

負のマージンを使用した場合は、フロートに置き換える必要があります。空白は予想どおりであり、設定している負のマージンは高さに寄与していません。

于 2012-12-29T18:17:27.830 に答える