Хитрый CSS расположение
Таким образом, я делаю веб-сайт с вполне проблематичным расположением. Существует четыре угловых изображения TL, TR, BL и BR, обозначенный черными блоками. Темно-оранжевой областью является основное содержание (к ширине 960 пкс) с внешней областью, обозначенной зеленой стрелкой как окно браузера. См. схему:
Схема http://dotcafedesigns.com/stackoverflow/problem.gif
Главное изображение представляет сайт в своем самом узком - нельзя позволить быть более узким, чем это (960 пкс), если это больше, чем определенная область не должно быть никаких полос прокрутки. Нижняя часть два изображения представляет различные ширины браузера.
Нижние левые и правильные черные блоки (изображения) должны быть внизу левыми и правыми из экрана в любом случае, если ширина не падает до 960 пкс, в этом случае BL и изображения BR должны ввести по абсолютному адресу в основную область немного. Если сайт уменьшается к скажем 200 пкс, изображение BR не должно все еще вводить по абсолютному адресу в правом углу.
В этой точке я действительно не забочусь об этом работающий точно в IE6 (я могу получить его примерно работающий), но я не могу даже выяснить, как сделать это полностью без JavaScript или чрезвычайно экспериментального CSS. В настоящее время я использую, абсолютно расположил отделение, какой вид работы, но не работают совершенно верно.
Я думаю, что был бы готов принять немного JS, если нет никакого другого пути, но я быть бы нет.
Ответ, очень ценивший!
3 ответа
Нет необходимости в Javascript. По крайней мере, в большинстве современных браузеров. Используя простое позиционирование и один запрос @media, я справился с этим:
<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», но я думаю, вы будете удивлены, насколько сильно он поддерживается и насколько легко это было бы быть для начальной загрузки с помощью JS - просто проверьте ширину браузера при изменении размера и добавьте дополнительный CSS, когда ширина упадет ниже 1120 пикселей.
Единственная действительно сложная часть - это низ. Остальное довольно просто:
<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 , но вам понадобится немного JavaScript, чтобы определить ширину окна и настроить немного оставил с.
Что-то вроде этого? Вы можете заменить код JavaScript аналогичным кодом 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>