0

最近、個人の Web サイトで作業をしていて、この問題に遭遇しました。問題は、サイトをプレビューするたびにフッターが消えることです。

960.gs を使用してすべてをきれいに整頓し、幅 100% のラッパーを使用して、必要に応じて 960 グリッドから拡張できるようにしました (フルサイズのバーなど)。

メイン コンテンツは、上部のナビゲーション バーを除いて、container_16 グリッドのこのラッパー内にあります。

HTML ジョーダン・モス - ポートフォリオ --> 

</head>
<body>
<div class="wrapper">
<div class="topbar">
<div id="navmenu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Skills</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>
</div>

<div id="content" class="container_16">

<div id="header" class="grid_6 suffix_10">
<h4>Welcome to the Portfolio and Blog Of</h4>
</div>
<div class="clear"></div>
<div id="logo" class="grid_6 suffix_10">
<a href="#">
<img width="340" height="55" alt="Jordan Moss" src="img/logo.png"></a>
</div>
<div class="clear"></div>
<div id="picture" class="grid_4">
<a href="img/large/image-1.jpg" rel="lightbox" title="EyeSee2D">
<img width="220" height="220" alt="pic1" src="img/thumbs/art1.jpg"></a>
</div>

<div id="picture" class="grid_4">
<a href="img/large/image-2.png" rel="lightbox" title="Evil Within">
<img width="220" height="220" alt="pic2" src="img/thumbs/art2.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-3.jpg" rel="lightbox" title="Colourful geometry">
<img width="220" height="220" alt="pic3" src="img/thumbs/art3.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-4.jpg" rel="lightbox" title="Unique">
<img width="220" height="220" alt="pic4" src="img/thumbs/art4.jpg"></a>
</div>
<div class="clear"></div>

<div id="picture" class="grid_4">
<a href="img/large/image-5.jpg" rel="lightbox" title="M1911 Gun Slide">
<img width="220" height="220" alt="pic5" src="img/thumbs/art5.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-6.png" rel="lightbox" title="Vormator Eye of Raa">
<img width="220" height="220" alt="pic6" src="img/thumbs/art6.jpg"></a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-7.png" rel="lightbox" title="Earths Last Gasp">
<img width="220" height="220" alt="pic7" src="img/thumbs/art7.jpg"> </a>
</div>


<div id="picture" class="grid_4">
<a href="img/large/image-8.jpg" rel="lightbox" title="Fleeter 3D concept">
<img width="220" height="220" alt="pic8" src="img/thumbs/art8.jpg"></a>
</div>
<div class="clear"></div>

</div>

<div id="footer_area" class="container_16">

<div id="contact" class="grid_4">
<a href="#" class="contact_button"> Contact </a>
    <p class="subfooter_text">Have a query?<br>Don't be scared to contact me!</p>
</div>
<div id="divider" class="grid_2">
</div>

<div id="social" class="grid_4">
    <a href="#"><img src="img/social/linkedin.png"></a>
    <a href="#"><img src="img/social/vimeo.png"></a>
    <a href="#"><img src="img/social/twitter.png"></a>
    <a href="#"><img src="img/social/deviantart.png"></a>
    <a href="#"><img src="img/social/wordpress.png"></a>
        <p class="subfooter_text"> Find me on other sites </p>
</div>
<div id="divider" class="grid_2">
</div>
<div class="grid_4"> </div>
</div>
</div>
</body>
</html>

CSS

    #picture {
padding: 5px;
border: solid 1px #EFEFEF;
margin-left:4px; /* border + margin = 10px */
margin-right:4px; /* border + margin = 10px */
margin-bottom:50px;
}
#picture:hover {
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
        }

#logo {
margin-bottom:50px;
}



body {
background-color:#cccccc
}

#header {
padding-top: 20px;
padding-bottom: -20px;
}

#navmenu {
    float: right;
    position: relative;
    left: -24%;
    padding-top: 10px;
}

#navmenu ul {margin: 0; padding: 0; 
    list-style-type: none; list-style-image: none; }

#navmenu li {display: inline; }

#navmenu ul li a {text-decoration:none;  margin: 0px;
    padding: 5px 10px 5px 10px; color: white;
    border-radius: 6px;
;}

#navmenu ul li a:hover {color: black;
    background: white; }

.topbar {
height:40px;
color:white;
min-width: 960px;
width: 100%;
background: #111111; /* Old browsers */
background: -moz-linear-gradient(top, #111111 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111111), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #111111 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #111111 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #111111 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #111111 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}


.contact_button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-style:normal;
    font-size:14px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}

.contact_button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}

.contact_button:active {
    position:relative;
    top:1px;
}

.subfooter_text {
padding-top: 10px;
color: #777777;
font-family:verdana;
}


#contact {
font-style:italic;
padding-top:70px;
text-align:center;
  }

#social {
font-style:italic;
padding-top:70px;
text-align:center;
  }

#divider {
margin-top:70px;
border-left:1px solid #000000; 
border-right:1px solid #404040; 
height:80px;
width: 1px;
position:relative;}


.wrapper {
margin-right:auto;
margin-left:auto;
position:static;
width:100%;
min-width:960px;
max-width:2560px; 
}


#content { 
margin-right:auto;
margin-left:auto;
position:static;
width:960px;
}


}
#footer_area {
    width: 100%;
    background-image: url(../img/footer_tile.png);
    background-repeat: repeat-x;
}

背景はプレビューでは問題ないように見えますが、ブラウザーを開いてどのように見えるかを確認すると、これが起こります。 http://gyazo.com/ab7c9762330c9d4a1c8ec3345aa8493d

フッターの背景が消えます。

私が抱えているもう 1 つの問題は、フッター領域の 2 つのアイテムが中央に配置されないという事実です。

すべてがどのように見えるべきかを理解するのを助ける目的で、ここにモックアップがあります.

http://gyazo.com/928b4af4618df4d2c97fa38d3dcf9381

あなたが助けてくれたら、私は非常に感謝します.私はこの問題を解決しようと一晩中起きていました.

-ヨルダン

4

1 に答える 1

0

わかった！

css/style.css を見てください ( css ファイルのエラー)

最後の行:

#content { 
    margin-right:auto;
    margin-left:auto;
    position:static;
    width:960px;
}

}   /* <-- w.t.h. ??  */

    #footer_area {
        width: 100%;
        background-image: url(../img/footer_tile.png);
        background-repeat: repeat-x;
}

.css ファイルのエラーにより、最後の宣言が無効になります (#footer_area)

続ける

于 2013-02-20T20:07:34.810 に答える