Tricky CSS Layout

Так что я делаю сайт с довольно проблематичным макетом. Есть четыре изображения угла TL, TR, BL и BR, обозначенные черными блоками. Темно-оранжевая область является основным содержимым (шириной 960 пикселей), а внешняя область обозначается зеленой стрелкой в качестве окна браузера. Смотрите схему:Tricky CSS Layout

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

Верхнее изображение представляет собой сайт в самом узком возможно - оно не должно быть позволено быть более узким, чем это (960px), если она больше определенной области, не должно быть никаких полос прокрутки , Нижние два изображения представляют собой разную ширину браузера.

Нижние левые и правые черные блоки (изображения) должны быть слева и справа от экрана в любое время, если ширина не упадет до 960 пикселей, и в этом случае изображения BL и BR должны вытолкнуть в основную область немного. Если сайт сокращается до 200px, изображение BR не должно все еще вызывать в правом углу.

На данный момент мне все равно, что он работает именно в IE6 (я могу заставить его грубо работать), но я даже не могу понять, как сделать это полностью без Javascript или чрезвычайно экспериментального CSS. В настоящее время я использую абсолютно позиционированные div, которые работают, но не работают совершенно правильно.

Я думаю, что я был бы готов принять немного JS, если нет другого пути, но я бы предпочел.

Ответьте на очень высокую оценку!

источник

2010-03-07 Meep3D

Человек, у вас есть сумасшедшие макеты! : D –

Я знаю, действительно настроился на неудачу с этим. :( – Meep3D

ПРИМЕЧАНИЕ: Я буду набирать этот вопрос и дать его тому, кто отвечает. Вам нужно подождать 24 часа или около того, прежде чем выдавать щедрость неудачно (или я сделаю это сейчас), но я буду долго ждать, сделаю это, а затем отметьте вас как правильный ответ. Спасибо! – Meep3D

Нет необходимости в 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, когда ширина падает под 1120px.

источник

2010-03-09 08:01:15

Да, медиа-запросы - это путь. Поддержка - это все современные браузеры, кроме IE, но, как уже упоминалось, достаточно просто проверить поддержку медиа-запросов, а затем добавить js. –

Действительно классно, но как бы вы запустили его под IE? – van

Вот один из вариантов: http://www.protofunc.com/scripts/jquery/mediaqueries/. Еще один вариант - добавить JS в условный комментарий, который проверяет ширину окна браузера (например, что-то вроде: '$ (window) .resize (function() {if $ (window) .width()> 1120px {... do this ...};}); 'с jQuery) и при необходимости изменяет CSS (например,' $ ('# container ') .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, но вы должны будете использовать немного JavaScript, чтобы обнаружить ширину окна и слегка отрегулируйте left.

источник

2010-03-07 20:48:30 davethegr8

У меня что-то похожее - проблема в том, что положительный абсолютный позиционированный #header .right вызывает полосы прокрутки. Я мог бы даже жить с этим, но нижний колонтитул просто не играет в мяч. :( – Meep3D

@ meep3d - я не могу проверить это, но попытаюсь установить 'overflow-x: hidden;' на тег body. Он * может * избавиться от проблемы с полосой прокрутки, сокрыв элементы (или части элементов вне элемента body) .Это звучит контр-интуитивно, но это может сработать.Если нет, разместите код, чтобы мы могли взломать его. – davethegr8

Не будет скрывать все горизонтальные полосы прокрутки? – Meep3D

Что-то вроде этого? Вы можете заменить код 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>

источник

2010-03-07 21:41:51 poke

Поместите JavaScript в событие 'window.onload'. –

Ух ... это событие onload. – poke

Tricky CSS Layout

ответ

Смежные вопросы