2

私が取り組んでいるウェブサイトがあり、ここで見落としていることは明らかです。

私の主な問題と私がここにいる理由: 私のページは Chrome と Safari では見栄えがしますが、FF v.21 (Mac) は textcont レイヤーと linkcont レイヤーを受け取り、それらをコンテナーの外側に配置します。彼ら。それらが浮かんでいることは知っていますが、そこに正しく表示させることができないようです。

*編集: 6-18 @ 1p-- *他の問題は解決しましたが、Firefox はまだ 2 つの内部コンテナーをメイン コンテンツ コンテナーの外側に配置しています。

* EDIT: 6-20 @ 9:45a -- *「Position: absolute;」を追加すると、#contentbox では、すべてが Chrome、Safari、および Firefox で動作するように見えました (現在 IE ではテストできません)。上部の #contentbox。そのdivで絶対位置を使用しようとしましたが、表示しただけで相対位置を非表示にしましたが、本来あるべきではない場所の上にあります。何か案は？コンテンツで絶対配置を使用できる場合は、#copybox を #contentbox レイヤーの最後に配置するための修正が必要です。

Firefox のスクリーンショット: http://i41.tinypic.com/20t0xh0.png

Chrome/Safari (正解): http://i40.tinypic.com/a4y1ar.png

スタイルコード:

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

body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}

#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}

#headercont {
width: 900px;
margin: 0 auto;
}

#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}

#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}

#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}

#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}


#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}

#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}

#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}

/* --- HEADER TEXT --- */

h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}

h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
    text-transform: uppercase;
}

h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
    text-transform: uppercase;
}

/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}


/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}

#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}

#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}

#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}

#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Index.php コード:

<!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>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="headercont">
        <div id="header">
            <p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
            <map name="socialmedia" id="socialmedia">
                <area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
                <area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
            </map>
            </p>
        </div> <!--End of header-->
        <div id="picheader">
            <div id="menu">
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Mission</a></li>
                   <li><a href="#">Services</a></li>
                   <li><a href="#">Admission</a></li>
                   <li><a href="#">Employment</a></li>
                   <li><a href="#">Contact</a></li>
                </ul>
            </div> 
            <!--End of navigation-->
        </div> <!--End of picheader-->
     </div> <!--End of headercont-->
     <div id="contentbox">
        <div id="contentcont">
            <div id="textcont">
                <?php
                    if (!isset($_REQUEST['topic']))
                       include("aboutus.php");
                    else
                    {
                       $topic = $_REQUEST['topic'];
                       $nextpage = $topic . ".php";
                       include($nextpage);
                    } ?>
          </div><!--End of textcont-->
             <div id="linkcont">
                <h3>Resources</h3>
                <ul class="links">
                <li>Link #1</li>
                <li>Link #2</li>
                <li>Link #3</li>                    
                <li>Link #4</li>
                </ul>
             </div> <!--End of linkcont-->
         </div>
     </div> <!--End of contentbox-->
</div> <!--End of container-->
    <div id="copybox">
        2013 &copy; NHYC
     </div> <!--End of copybox -->
</body>
</html>
4

1 に答える 1

2 
#contentbox {
    overflow: hidden;
}

...問題を修正します。

そこにはクリアされていないフロートがあり、overflow: hidden はそれをクリアします。ブロック フォーマット コンテキスト (overflow: hidden が適用される奇妙な隠し CSS のニュアンス) の詳細については、こちらを参照してください。

于 2013-06-20T16:42:37.203 に答える