HTML 960gs - Footer Disapearing - 우수한 라이브러리

저는 최근에 내 개인 웹 사이트에서 작업 중이며 사이트를 미리 볼 때마다 내 바닥 글이 사라지는 것이 문제입니다.HTML 960gs - Footer Disapearing

960gs를 사용하여 모든 것을 멋지게 유지하고 너비가 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

바닥 글 배경이 사라집니다.

내가 겪어 본 또 다른 문제점은 바닥 글 영역의 두 항목이 중앙에 정렬되지 않는다는 것입니다.

여기에 보이는 모든 내용을 이해하도록 돕기위한 목적으로 만 모형이 있습니다. 당신은 내가 매우 감사 할 것입니다 도움이 될 수 있다면

http://gyazo.com/928b4af4618df4d2c97fa38d3dcf9381

, 나는이 문제를 해결하기 위해 노력 밤새 일까지있었습니다.

- 요르단

출처

2013-02-20 Mossbros

안녕하세요, 요르단, 안녕하세요, StackOverflow에 오신 것을 환영합니다. 부분이 누락되었습니다. 페이지를 볼 수 있도록 URL을 제공 할 수 있습니까? –

늦게 답변을 드려 죄송합니다. 하위 도메인을 만들고 파일을 업로드해야했습니다. 여기에 페이지가 있습니다. mockup.jordanmoss.co.uk – Mossbros

좋습니다. 먼저 코드의 유효성을 검사하십시오. http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmockup.jordanmoss.co.uk%2F % 23 || 21 오류, 9 경고 (들) || 도움이 될거야. 마지막 요점 : 아무 것도 # footer_area의 꼬리말을 지정하는 것이 아닙니다. –

알았어!

당신의 CSS /있는 style.css에서 봐 (errors in the css file)

마지막 라인 :

#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-20 20:07:34

HTML 960gs - Footer Disapearing

답변

관련 문제