Bố cục CSS Tricky

Vì vậy, tôi đang tạo một trang web có bố cục khá khó khăn. Có bốn hình ảnh góc TL, TR, BL và BR được chỉ định bởi các khối màu đen. Vùng màu cam đậm là nội dung chính (với chiều rộng 960px), với khu vực bên ngoài được biểu thị bằng mũi tên màu xanh lục làm cửa sổ trình duyệt. Xem sơ đồ:Bố cục CSS Tricky

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

Những hình ảnh đầu đại diện cho trang web tại hẹp nhất có thể của nó - nó không nên được phép có hẹp hơn này (960px) nếu nó lớn hơn diện tích được xác định không nên có thanh cuộn . Hai hình ảnh dưới cùng thể hiện các chiều rộng khác nhau của trình duyệt.

Các khối màu đen bên trái và bên phải (hình ảnh) phải ở dưới cùng bên trái và bên phải của màn hình mọi lúc, trừ khi chiều rộng giảm xuống 960px, trong trường hợp này, hình ảnh BL và BR sẽ được chuyển vào khu vực chính khinh bỉ. Nếu trang web bị thu hẹp, giả sử 200px, hình ảnh BR sẽ không được đặt ở góc bên phải. Tại thời điểm này, tôi không thực sự quan tâm đến nó hoạt động chính xác trong IE6 (tôi có thể làm việc đó một cách chính xác) nhưng tôi thậm chí không thể tìm ra cách làm nó hoàn toàn không có Javascript hoặc CSS thử nghiệm cực kỳ. Hiện tại tôi đang sử dụng div tuyệt đối định vị mà loại công việc, nhưng không làm việc khá đúng.

Tôi nghĩ rằng tôi sẵn sàng chấp nhận một chút JS nếu không có cách nào khác nhưng tôi không muốn.

Trả lời rất được đánh giá cao!

Nguồn

2010-03-07 Meep3D

Người đàn ông, bạn đã có một số bố cục điên rồ đang diễn ra! : D –

Tôi biết, thực sự đặt mình lên cho một thất bại với điều này. : ( – Meep3D

GHI CHÚ: Tôi sẽ trả thưởng cho câu hỏi này và trả lời câu trả lời cho ai) Bạn phải đợi 24 giờ hoặc lâu hơn trước khi phát hành tiền thưởng (hoặc tôi sẽ làm ngay) nhưng tôi sẽ đợi lâu, hãy đánh dấu – Meep3D

Không cần Javascript. Ít nhất là trong hầu hết các trình duyệt hiện đại. Sử dụng tính năng định vị đơn giản và một truy vấn @media tôi đã xóa nó:

<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>

Điều đó có thể nằm trong mô tả của bạn về "CSS cực kỳ thử nghiệm", nhưng tôi nghĩ bạn sẽ ngạc nhiên bởi nó hỗ trợ bao nhiêu và sẽ dễ dàng như thế nào để bootstrap với một liên lạc của JS - chỉ cần kiểm tra chiều rộng của trình duyệt trên kích thước lại và thêm CSS bổ sung khi chiều rộng giảm dưới 1120px.

Nguồn

2010-03-09 08:01:15

Đúng, truy vấn phương tiện là cách để đi. Hỗ trợ là tất cả các trình duyệt hiện đại ngoài IE, nhưng như đã đề cập, thật dễ dàng để kiểm tra hỗ trợ truy vấn phương tiện, và sau đó thêm js. –

Thực sự thú vị, nhưng làm thế nào bạn sẽ làm cho nó hoạt động theo IE? – van

Dưới đây là một tùy chọn: http://www.protofunc.com/scripts/jquery/mediaqueries/ - Một tùy chọn khác là thêm một số JS vào một chú thích có điều kiện để kiểm tra chiều rộng cửa sổ trình duyệt (ví dụ: '$ (cửa sổ) .resize (function() {if $ (window) .width()> 1120px {... do this ...};}); 'with jQuery) và thay đổi CSS khi cần thiết (ví dụ' $ ('# container ') .css (' width ':' 960px ',' margin ':' 0 auto '); 'lại với jQuery). http://api.jquery.com/css/ –

Phần thực sự khó khăn nhất là phần dưới cùng. phần còn lại Th của nó khá đơn giản:

<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; 
}

Và một số công cụ tương tự cho #footer, nhưng bạn sẽ cần phải sử dụng một chút javascript để phát hiện chiều rộng cửa sổ và điều chỉnh nhẹ left s.

Nguồn

2010-03-07 20:48:30 davethegr8

Tôi có một cái gì đó tương tự như vậy - vấn đề là vị trí tuyệt đối định vị #header .right nguyên nhân thanh cuộn. Tôi thậm chí có thể sống với điều đó, nhưng chân không chỉ chơi bóng. :( – Meep3D

@ meep3d - Tôi không thể kiểm tra điều này, nhưng hãy thử và đặt 'overflow-x: hidden;' trên thẻ body. Nó * có thể * loại bỏ vấn đề thanh cuộn, bằng cách ẩn các phần tử (hoặc các phần tử bên ngoài phần tử cơ thể) Nghe có vẻ phản trực giác, nhưng nó có thể hoạt động.Nếu không, hãy đăng một số mã để chúng tôi có thể giải quyết vấn đề này – davethegr8

Sẽ không che giấu tất cả thanh cuộn ngang? – Meep3D

Một cái gì đó như thế này? Bạn có thể thay thế mã JavaScript bằng mã JQuery tương tự nếu bạn muốn, chỉ muốn đưa ra ý tưởng về cách thức hoạt động của mã này.

<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>

Nguồn

2010-03-07 21:41:51 poke

Đặt JavaScript trong một sự kiện 'window.onload'. –

Uhm ... nó đang ở trong một sự kiện onload .. – poke

Bố cục CSS Tricky

Trả lời

Các vấn đề liên quan