3

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

問題の画像 マージンの移動

問題の画像 jsfiddle、私は思う

4

1 に答える 1

1

  1. CSSをクリーンアップする必要があります。それは混乱していて、ナビゲートするのが難しく、冗長な定義が含まれています。

  2. ほとんどのCSSは、幅、位置、マージンなどに明示的な値を使用します。すべてに絶対値を設定せずに、スタイルを機能させるようにしてください。相対値を使用してみてください。これにより、デザインの管理が容易になり、奇妙なレンダリングの不具合が発生しにくくなります。

  3. 最後に、あなたの質問は理解するのがやや難しいです。はい、コードと画像は役に立ちますが、実用的な例を提供する方がはるかに優れています。これにより、SOコミュニティのトラブルシューティングがはるかに簡単になります。

とにかく、これが役立つかどうかを確認してください。の現在のCSS定義を必ずクリアしてください#one, #two, #three。主に作業例に小さな変更を加えて、ページを正しくレンダリングできるようにしました。

実例：http： //jsbin.com/olaxaj/1/

関連するCSS

#one, #two, #three {
  display:inline-block;
  padding:.5em;
}
于 2013-01-01T21:19:04.857 に答える