까다로운 CSS 레이아웃

그래서 꽤 문제가되는 레이아웃으로 웹 사이트를 만들고 있습니다. 블랙 블록으로 표시된 4 개의 코너 이미지 TL, TR, BL 및 BR이있다. 진한 주황색 영역은 주 영역 (너비 960 픽셀까지)이며 외부 영역은 녹색 화살표로 표시됩니다. 도면 참조 :까다로운 CSS 레이아웃

Diagram http://dotcafedesigns.com/stackoverflow/problem.gif

상부 이미지가 좁은 수의 위치를 나타내는이 -가 이것보다 좁게 허용되어서는 안된다 (960)가 더 스크롤바가 없어야 정의 영역보다 크면 . 하단의 두 이미지는 브라우저의 너비가 다릅니다.

왼쪽 및 오른쪽 검은 색 블록 (이미지)은 너비가 960 픽셀까지 떨어지지 않는 한 항상 화면의 왼쪽 및 오른쪽 아래에 있어야합니다.이 경우 BL 및 BR 이미지는 주 영역을 뚫어야합니다 약간. 사이트 크기가 200 픽셀로 줄어들면 BR 이미지가 여전히 오른쪽 구석에서 파고 들지 않아야합니다.

이 시점에서 나는 IE6에서 정확하게 작동하는 것을 신경 쓰지 않지만 대략 자바 스크립트 나 극도로 실험적인 CSS를 사용하지 않고도 완벽하게 수행하는 방법을 알지 못합니다. 현재 나는 일종의 일종의 div를 사용하고 있지만 제대로 작동하지는 않습니다.

나는 다른 방법이 없다면 JS 약간을 기꺼이 받아 들일 것이지만 나는 그렇지 않을 것이라고 생각한다.

답변 감사합니다.

출처

2010-03-07 Meep3D

남자, 너는 어떤 미친 레이아웃이있어! : D –

나도 알아, 정말 이걸로 실패에 대한 자신을 설정합니다. : – Meep3D

참고 : 나는이 질문에 현상금을주고 응답하는 사람에게 줄 것이다. 당신은 현상금 unfortunatley를 발행하기 전에 24 시간 정도 기다려야 만한다. (또는 나는 지금 그것을 할 것이다.) 그러나 나는 그렇게 오래 기다릴 것이다. 감사합니다! – Meep3D

자바 스크립트가 필요하지 않습니다. 최소한 대부분의 최신 브라우저에서.

<head> 
    <style type="text/css" media="screen"> 
    body { 
     margin: 0; 
     padding: 0; 
     font-family: sans-serif; 
     background: orange; 
     text-align: center; 
     color: black; 
     overflow-x: hidden; 
    } 
    #content { 
     width: 960px; 
     margin: 0 auto; 
     padding: 20px 0; 
     min-height: 800px; 
     background: #cc6600; 
     z-index: 0; 
    } 
    .image { 
     background: black; 
     color: white; 
     height: 60px; 
     width: 100px; 
     padding: 20px 0; 
     z-index: 1; 
     opacity: .95; 
    } 
    #top { 
     width: 960px; 
     margin: 0 auto; 
     position: relative; 
     overflow: visible; 
    } 
    #top .image { 
     position: absolute; 
    } 
    #top .left { 
     left: -80px; 
    } 
    #top .right { 
     right: -80px; 
    } 
    #bottom { 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     height: 100px; 
    } 
    #bottom .image { 
     position: absolute; 
    } 
    #bottom .left { 
     left: 0; 
    } 
    #bottom .right { 
     right: 0; 
    } 

    @media all and (max-width:1120px) { 

     #container { 
     width: 960px; 
     margin: 0 auto; 
     position: relative; 
     overflow: visible; 
     } 
     #bottom .left { 
     left: -80px; 
     } 
     #bottom .right { 
     right: -80px; 
     }  

    } 
    </style> 
</head> 
<body> 
    <div id="top"> 
    <div class="left image">left image</div> 
    <div class="right image">right image</div>  
    </div> 
    <div id="content"> 
    content 
    </div> 
    <div id="bottom"> 
    <div id="container"> 
     <div class="left image">left image</div> 
     <div class="right image">right image</div> 
    </div> 
    </div> 
</body>

은 "매우 실험적인 CSS"당신의 설명에 해당 할 수 있습니다,하지만 난 당신이 그것을해야합니까 얼마나 많은 지원 놀랄 거라고 생각하고 : 간단한 위치와 하나의 @media 쿼리를 사용하여 나는 그것을 뽑아 JS를 만져서 부트 스트랩하는 것이 얼마나 쉬운가요? 너비가 1120px 아래로 떨어지면 브라우저의 너비를 다시 확인하고 여분의 CSS를 추가하기 만하면됩니다.

출처

2010-03-09 08:01:15

그래, 미디어 쿼리는 갈 길입니다. 지원은 IE를 제외한 모든 최신 브라우저이지만 언급 한 바와 같이 미디어 쿼리 지원을 확인한 다음 j를 추가하기 만하면됩니다. –

정말 멋지지만 IE에서는 어떻게 작동합니까? – van

하나의 옵션이 있습니다 : http://www.protofunc.com/scripts/jquery/mediaqueries/ - 또 다른 옵션은 브라우저 창 너비를 검사하는 조건부 주석에 JS를 추가하는 것입니다 (예 :'$ (window) jQuery와 함께 .resize (function() {1120px {... do this ...}}};') 그리고 필요에 따라 CSS를 변경한다. ') .css ('width ':'960px ','margin ':'0 auto ');'다시 jQuery를 사용합니다. http://api.jquery.com/css/ –

정말 까다로운 부분은 맨 아래 부분입니다. 그것의 목 나머지는 매우 간단합니다 :

<body> 
    <div id="container"> 
     <div id="header"> 
      <div class="right"></div> 
      <div class="left"></div> 
     </div> 

     <div id="footer"> 
      <div class="right"></div> 
      <div class="left"></div> 
     </div> 
    </div> 
</body>

CSS :

#container { 
    margin: 0 auto; 
    width: 960px; 
} 

#header { 
    position: relative; 
} 

#header .right, #header .left { 
    position: absolute; 
    width: 100px; 
} 

#header .right { 
    left: 940px; /* leaves 20px inside the #header */ 
    background: url(images/header_right.gif) no-repeat; 
} 

#header .left { 
    left: -80px; /* leaves 20px inside the #header */ 
    background: url(images/header_left.gif) no-repeat; 
}

그리고 #footer에 대한 몇 가지 유사한 물건,하지만 당신은 윈도우 폭을 감지하는 자바 스크립트의 약간을 사용해야합니다 및 left을 약간 조정하십시오.

출처

2010-03-07 20:48:30 davethegr8

나는 비슷한 것을 가지고있다 - 문제는 포지티브 절대 위치 #header .right가 스크롤바를 일으킨다는 것이다. 아마도 그걸로도 살 수 있지만, 바닥 글은 공을 연주하지 않습니다. : – Meep3D

@ meep3d - 이걸 테스트 할 수는 없지만 body 태그에'overflow-x : hidden;'을 설정하려고하면 요소 (또는 요소의 일부를 숨김으로써 스크롤바 문제를 제거 할 수도 있습니다. 본문 요소 바깥 쪽). 반 직관적 인 것처럼 들리지만 작동하지 않을 수 있습니다. 코드를 게시하여 균열을 제거 할 수 있도록하십시오. – davethegr8

모든 가로 스크롤 막대를 숨기지는 않습니까? – Meep3D

이와 비슷한? 원한다면 자바 스크립트 코드를 비슷한 JQuery 코드로 대체 할 수 있습니다. 어떻게 작동하는지 생각해보고 싶었을뿐입니다.

<html> 
<head> 
    <title>....</title> 

    <style type="text/css"> 
    html 
    { height: 100%; margin: 0; background: white; } 
    body 
    { height: 100%; width: 960px; margin: 0 auto; background: gray; overflow: hidden; } 
    #main 
    { margin: 0px; padding: 5px 20px; position: relative; } 

    #headLeft 
    { position: absolute; top: 0px; left: -80px; 
    width: 100px; height: 35px; background: green; } 
    #headRight 
    { position: absolute; top: 0px; right: -80px; 
    width: 100px; height: 35px; background: green; } 
    #footLeft 
    { position: absolute; bottom: 0px; left: 0px; 
    width: 100px; height: 35px; background: green; } 
    #footRight 
    { position: absolute; bottom: 0px; right: 0px; 
    width: 100px; height: 35px; background: green; } 
    </style> 

    <script type="text/javascript"> 
    function checkSize (event) 
    { 
    var contentWidth = 960; 
    var minOuterBoxSize = 60; // maximum 100-60=40 px will be displayed inside the main area 

    if (window.innerWidth - contentWidth < minOuterBoxSize * 2) 
    { 
     var pos = ((minOuterBoxSize * 2) - window.innerWidth + contentWidth)/2; 
     document.getElementById('footLeft').style.left = '-' + pos; 
     document.getElementById('footRight').style.right = '-' + pos; 
    } 
    else 
    { 
     document.getElementById('footLeft').style.left = '0px'; 
     document.getElementById('footRight').style.right = '0px'; 
    } 
    } 
    </script> 
</head> 

<body onload="checkSize(event);" onresize="checkSize(event);"> 
<div id="main"> 
    <div id="headLeft">TL</div> 
    <div id="headRight">TR</div> 

    <p>Normal content</p> 
</div> 

<div id="footLeft">BL</div> 
<div id="footRight">BR</div> 
</body> 
</html>

출처

2010-03-07 21:41:51 poke

JavaScript를'window.onload' 이벤트에 넣으십시오. –

Uhm ... onload 이벤트입니다. – poke

까다로운 CSS 레이아웃

답변

관련 문제