-2

レイアウトはChromeでのみ正常に機能します。IEとFirefoxでは正しく機能せず、すべてが左揃えになっているようで、アウターラッパーは表示されていません。

要求に応じてHTMLコードを追加しました

/* CSS Document */

/* Reset */

body  {background-color:#6CF; }

/* Headings */

h1, h2, h3, h4, h5, h6 (font-weigth: bold;}

h1  { font-size: 35px; color:blue }
h2  { font-size: 25px; color:blue }
h3  { font-size: 15px;  color: red;}


/* Text Elements */

a               {   }
a.link          {   }
a.visited       {   }
a.active        {   }
a.focus         {   }
a.visited       {   }
a.visited       {   }


/* container */

#outerwrapper  { width: 960px; margin:0px auto; background-color:white;   }

#wrapper       { width: 900px; margin:0px auto; background-color:white;   }

#logo       {  margin: auto; text-align: center;  }

#navigation  {   text-align: center;  }
#navigation ul li { display:inline;  }
#navigation ul{ border-top: 1px #000 solid; border-bottom: 1px #000 solid; margin-bottom:20px; }
#navigation ul a{padding: 25px;}

#navigation a               { color: #33F;  }
#navigation a.link          { color: #33F;  }
#navigation a.visited       { color: #33F;  }
#navigation a.active        { color: #33F;  }
#navigation a.focus         { color: #33F;  }
#navigation a.visited       { color: #33F;  }
#navigation a.visited       { color: #33F;  }


#banner     {margin-bottom: 30px;    }

.content   { width: 900px; margin:auto; width: 900px; float:top; text-align:center }
.content-main { width: 500px; margin:auto; font-weight:bold; font-size:20px; text-align:left}  

#news  {width: 200px; float:right; padding:0px;}  


.date {font-weight: bold;}

.footer { clear:both; padding-top: 5px; padding-bottom: 5px;}
.footer-text {text-align:center}

#mainimages {margin-top: 20px; width: 700px; float: left;}


aboutimages {margin-top: 20px; width: 700px; float: left;}

.servicesimage {width: 200px; float:left; margin-top: 40px;  margin-left:20px;}

.servicelistleft {width: 300px; float:right; margin-top: 40px; }

.servicelistright {width: 300px; float:right; margin-top: 40px; margin-left:20px; }

.centertable { width: 500px; margin:auto;
    margin-top: 30px;}

HTML

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>

<div id ="outerwrapper">
   <div id="wrapper">
            <div id="logo">
                <h1><img src="images/logo.jpg" width="248" height="153" alt="Conti Computer Shop" /></h1>
            </div>

            <div id="navigation">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="services.html">SERVICES</a></li>
                <li><a href="contact.html">CONTACT</a></li>
        </ul>
            </div>
             <div id ="banner">
                <p><img src="images/test.jpg" width="900" height="202"/></p>
            </div>
            <div class ="content">
            <h1>Your One Stop Shop for all Computer Needs !</h1>

            <p class = "content-main">Welcome to our new website where you can find more about us, what Services we offer and contact us for more information. Rest Assured that our priority will always be to provide an excellent service at a good price. Thank You.            </p>
            </div>
            <div id = "news">
              <h2>Latest News</h2>
                <p class="date">April 20, 2012</p>
                <h3>Acer Laptops now available</h3>
                <p class="date">April 12, 2012</p>
                <h3>New Gadgets Just Arrived</h3>
                <p class="date">April 05, 2012</p>
                <h3>New HP Computers in stock</h3>
                <p class="date">April 02, 2012</p>
                <h3>Students discounts Launched</p>
            </div>
            <div id="mainimages">
                    <p>
                    <img src="images/sales.jpg" width="340" height="276" />
                    <img src="images/service.jpg" width="340" height="276" />
                    </p>

            </div>
     <div class ="footer">
            <p class="footer-text"> 2012 - Conti Design</p>
            </div>
  </div>
</div>
</body>
</html>
4

2 に答える 2

1

問題の根本原因は、CSS と HTML の両方が無効であることです。次の場所にあるそれぞれの W3C バリデーターを介してそれらを実行します。

http://validator.w3.org

http://jigsaw.w3.org/css-validator

エラーが発生します。

CSS の場合:

11   h1, h2, h3, h4, h5  Parse Error [ (font-weigth: bold;} h1]
51   .content    Value Error : float top is not a float value : top

最初の列は行番号です。HTML については、ほとんどの苦情は次のようなものに起因しているようです。

 Line 44, Column 51: end tag for element "p" which is not open
                <h3>Students discounts Launched</p>

HTML と CSS を修正し、再検証して、それらのブラウザーで再試行してください。

于 2012-04-20T19:37:05.487 に答える
0

ズーム設定がクロムで正しいことを確認する必要があります。IE と Firefox ではレイアウトが問題ないのに、Chrome ではズーム設定が 90% に設定されていることを確認するまで、Chrome では問題がなかった理由を知りたいと思いました。

于 2012-07-19T11:28:42.017 に答える