2009-07-06 9 views
0

바닥 글을 절대 배치 할 수없는이 문제가 있습니다.위치 지정 문제

<p>In posuere dapibus mauris, et elementum magna rhoncus quis. Morbi ultricies malesuada magna, vel porta risus rhoncus a. Morbi aliquam facilisis dolor, scelerisque porttitor dui auctor id.</p> 
      </div><!-- /info --> 
      </div><!-- /info-design --> 
     </div><!-- /content --> 
     <div id="info-footer"></div><!-- /info-footer --> 
     <div id="footer"> 

     </div><!-- /footer --> 
    </div><!-- /wrapper --> 

그리고 : 나는 그것을 배치하고 그것은 파이어 폭스에서 IE에서 같은 5px 이익률 마진을 많이 나타나고 이런 이유를 완벽하게 크롬에서 ... 난 정말 모르겠어요 ... 여기에 HTML의 CSS :

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;} 

#content{margin:0 auto;width:1000px;} 

#info-design{ 
    -moz-border-radius: 0 0 5px 5px; 
    -webkit-border-radius: 0 0 5px 5px; 
    -opera-border-radius: 0 0 5px 5px; 
    -khtml-border-radius: 0 0 5px 5px; 
    filter:alpha(opacity=80); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    opacity: .8; 
    -moz-opacity: .8; 
    -khtml-opacity: .8; 
    background:#FFF; 
    border:1px double #000; 
    margin:0 0 10px 0; 
    position:absolute; 
    padding:10px 3px 3px 10px; 
    width:985px; 
    z-index:100; 
} 

#info{z-index:101;} 

#info-footer{background:url(../img/BaseSite.gif) no-repeat center bottom;height:158px;position:absolute;bottom:0px;z-index:99;} 

#footer{ 
    background:url('../img/cesped.jpg') repeat-x center bottom; 
    height:176px; 
    position:absolute; 
    width:100%; 
    z-index:98; 
    bottom:0px; 
} 

난 그냥 바닥에 표시 할 이미지 "cesped.jpg"를 원하는 : 0 픽셀; 그러나 그것은 단지 거기에 머 무르지 않을 것입니다 =/나는 무언가를 놓치거나 갖지 말아야 할 것을 추가 했습니까?


편집

나는 기본적으로 바닥 글은 "내용"의 맨 아래에 DIV 수 있도록 싶지만는 고정 폭 때문에이 그 사업부 내에 배치 할 수 없으며 내가이 원하는 이미지를 repeat-x 전체 브라우저로 이동합니다 (따라서 내용 뒤에 및 너비 = "100 %"있는 래퍼 전에 배치 된; 래퍼 위치 절대 및 상대 만들기 시도했으나 여전히 매우 하단에 배치되지 않습니다. ... 그리고 나는 그것을 "자연스럽게"내려 놓으려고했지만 단지 그렇지 않을 것입니다 ...

다음은 어떻게 작동합니까? ,

alt text alt text


편집 2

내가 문제를 발견 alt text

을하고 여기에 IE와 파이어 폭스의 : 같은 hould 모양 (그리고 크롬의 모양) 어떤 이유로 # 래퍼가 브라우저의 전체 높이를 커버하지 않고 그 일부만을 커버 할 수 있습니다. 없습니까? 나는 다음과 같이 덧붙였다 :

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;min-height:100%;} 

#content{margin:0 auto;width:1000px;} 

답변

2

풋터와 관련하여 ... 뭘두고 싶니? 나는 "<div id="wrapper">의 절대 바닥에서"같아요? 그런 다음 랩퍼를 position: relative; 또는 position: absolute;으로 만들어야합니다. 절대적으로 배치 된 요소 orient themselves on the closest parent에는 relative, fixed 또는 absolute 위치가 있습니다. 귀하의 CSS는 <html> 또는 <body> 이외의 것으로 보입니다.

또한 info-footerfooter 요소는 맨 아래에 서로 겹쳐서 배치됩니다. 그것이 원하는 효과입니까?

어쩌면 당신이 원하는 모습의 모형을 게시 할 수 있으며, 이제 어떻게 생겼을까요?

"자연스럽게"내용을 푸터로 푸는 대신에 실제로 이렇게해야합니까?

편집 : 내가 제대로 이해하지만 단순히 repeating<body>의 하단의 배경 이미지에 대해 확실하지?응답에서

body { background: url(image.jpg) repeat-x center bottom; } 
0

2 편집하기 : position:absolute 따라서 자신의 높이가 부모에 적용되지 않습니다, 문서 흐름에서 요소 소요 (또는, 부모는 그들을 수용 할 수 있도록 성장하지 않습니다). 그래서 높이를 추가하면 효과가 있습니다. 하지만, 절대적으로 배치 된 요소가 설정 한 높이보다 높으면 동일한 일이 발생합니다.

div#info-design은 (내가 말할 수있는 것에서) 절대적으로 배치 될 필요는없는 것처럼 보입니다. 해당 선언을 제거하고 div#footer 높이와 동일한 margin-bottom을주고 임의의 높이를 div#wrapper에 설정하지 않고 동일한 효과를 얻을 수 있습니다.

0

# 래퍼 작동에 여백 추가 : 50px가 있습니까?