950px 와이드 div-CSS 문제로 1250px 와이드 이미지 센터링

내 웹 페이지의 너비가 1250 픽셀입니다. 예 : http://img694.imageshack.us/img694/6171/unledvla.jpg 950px 와이드 div-CSS 문제로 1250px 와이드 이미지 센터링

이 이미지 아래에는 950 픽셀 너비의 div가 있습니다.

950 픽셀 너비로 이미지를 "중앙에 배치"하고 (1250 픽셀 이미지의 왼쪽 및 오른쪽에있는) 150 픽셀 녹색 영역이 보이지 않도록 창 크기를 줄이려고합니다.

이게 가능합니까? 이 어떤 포인터에 대한

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS Layout</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html,body{margin:0;padding:0} div#container{background:green;width:950px;margin:0 auto} </style> </head> <body> <div style="width:1250px;background:url('image-1250px.jpg') 0 0 no-repeat;height:360px;margin:0 auto"> </div> <div id="container"> <div id="header"><h1>Header</h1></div> <div id="wrapper"> <div id="content"> <p><strong>1) Content here.</strong> column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p> <p>very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p> <p>fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p> <p>column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p> </div> </div> </div> </body> </html>

많은 감사 :

여기에 내 현재 코드입니다.

출처

2011-11-08 michaelmcgurk

이 모든 것을 매우 비슷하게 보입니다. http://stackoverflow.com/questions/7822167/how-to-position-a-div-to-be-visible-but-not-count-towards-document-width/7916229 # 7916229 –

@alexey 그건 훨씬 복잡한 질문입니다. –

(1) "0 0 노 반복"을 "no-반복 상단 중앙"에서 배경 이미지의 위치 스타일을 변경합니다. (2) "width : 1250px;"를 제거하십시오. 이렇게하면 창 크기가 축소되었을 때 가로 스크롤이 발생합니다.

내가 묘사 한 바를 실현하려면 배경 이미지 자체가 1250 픽셀 너비가되어야합니다.

출처

2011-11-08 17:15:02 paislee

넘버 2에 대한 훌륭한 제안. 문제가 해결되었습니다. D – michaelmcgurk

@mcgarriers cool. 그것이 대답을 받아 들일 수 있다면? – paislee

div에 있어야합니까? 그것은 당신의 신체 태그에 갈 수 있습니까?

body { background: url('http://img694.imageshack.us/img694/6171/unledvla.jpg') repeat-y center top; }

출처

2011-11-08 17:09:41 Chris

답장을 보내 주셔서 감사합니다. 불행히도 예. div에 있어야합니다. – michaelmcgurk

여기서 생각한 것은 배경 이미지를 가운데에 배치하고 흰색 중앙 영역에 #container가 표시되는 것입니다. #container 다루는

body { 
    background-image: url('image-1250px.jpg'); 
    background-position: center; 
    background-repeat: repeat-y; 
    background-color: green; 
}

시간 :

당신은 수직 브라우저 영역을 채우기 위해 수직으로 반복 이미지에 대한 신체의 배경을 설정해야하고 그 다음, 수평 중심에 있고,이 작업을 수행합니다. 이 값을 950 픽셀로 설정하고 자동으로 여백을 설정하여 요소를 가운데에 맞 춥니 다.

#container { 
    width: 950px; 
    margin-left: auto; 
    margin-right: auto; 
}

인라인 CSS 스타일을 피해야합니다.

출처

2011-11-08 17:19:07

950px 와이드 div-CSS 문제로 1250px 와이드 이미지 센터링

답변

관련 문제