Liquid - Fixed - Liquid Layout - PullRequest
Новая
       15

Liquid - Fixed - Liquid Layout

2 голосов
/ 21 января 2011

Я работаю над этим веб-сайтом: http://www.justaddsolutions.com/SampleSite/

Основная область должна иметь ширину 1024 пикселя и всегда по центру, что достигается.Однако мой клиент хотел бы, чтобы желтая и красная полоски продолжались до соответствующих краев (желтый слева и красный справа) окна браузера, когда окно браузера шире, чем 1024 пикселя.

Я решил решить эту проблемус помощью жидкокристаллического макета на основе CSS - фиксированная - жидкостная компоновка, где центральная часть центрирована, а боковые части имеют одинаковую ширину жидкости.Но я не могу понять это самостоятельно и нигде не смог найти, как это сделать.

Я нашел компоновку Liquid-Fixed-Liquid Layout на веб-сайте mathewjamestaylor Liquid Layouts, но она перестала работать в IE8, когда размер окна браузера сократился до небольшого размера.таблица из 3 столбцов в моем заголовке и стиль моих элементов td с использованием background-image и repeat-x, но это не очень хорошо работает в Chrome и Safari.

Любая помощь в этом вопросе будет высоко оценена.

Ответы [ 3 ]

1 голос
/ 21 января 2011

только что проверил это,

http://www.antiyes.com/test/4753259/

посмотрите на html, сейчас это выглядит довольно дерьмово из-за цветовых профилей и материала с изображениями, они должны бытьрезать лучше, но это показывает основы того, что делать. 

<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{ 
 width:100%;
 height: 145px;
 position:relative;
 overflow:hidden;
 text-align:center;
}

#logo
{
 margin:auto;
 position:relative;
 z-index:5;
 width:1024px;
 height:99px;
 background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}

#red_stripe,#yellow_stripe
{ 
 position:absolute;
    left:0px;
 right:0px;
 z-index:4;
}

#red_stripe
{
 left:50%;
 height:31px;
 top:6px;
 background:transparent url(red_strip.png) repeat-x top left;
 width:50%;
}

#yellow_stripe
{
 height:32px;
 top:60px;
 width:50%;
 background:transparent url(yellow_strip.png) repeat-x top left;
}

</style>
</head>
<body>
 <div id="header">
 <div id="red_stripe"></div>
 <div id="yellow_stripe"></div>
 <div id="logo"></div>
 </div>
</body>
</html>
1 голос
/ 21 января 2011

Я полагаю, вы слишком обдумываете это. Поскольку вы используете абсолютное позиционирование для элементов заголовка, я бы просто использовал фоновое изображение для элемента body (без повторов). По сути, это будет изображение, похожее на ваш текущий логотип, но с цветом, выходящим с каждой стороны.

Так как это просто сплошные цвета, вы бы сделали его произвольно большой ширины (скажем, 9000 пикселей), чтобы он подходил практически к любому размеру браузера, а изображение все равно было бы относительно небольшим.

0 голосов
/ 21 января 2011

Предлагаемое мною решение будет работать для разрешений шириной до 3072 пикселей, которых должно быть достаточно.

Вам потребуется создать фоновое изображение для #body_background шириной 3072 пикселей и высотой около 140 пикселей.Основной цвет фона для этого, очевидно, будет белым.Затем вы создадите желтую полосу в левой части шириной 1024 пикселя, которая начинается на 86 пикселей сверху вниз, чтобы выровняться с желтой полосой в основной части.Затем, в горизонтальной точке, где желтая полоса заканчивается на 1024 пикселя, вы создадите красную полосу размером 2048 пикселей, которая идет к правому краю на 32 пикселя вниз, чтобы выровнять ее с красной полосой в основной части ... так что в основном у вас будетизображение, которое выглядит следующим образом: 

[ - - - - -1024px- - - - - - ]___________________________________________________
______________________________[- - - - - - - - - - -2048px- - - - - - - - - - - ]

Затем добавьте его как фоновое изображение к #body_background со следующим CSS: 

#body_background { 
    background:url('../path/to/image/bg_strips.gif') left top no-repeat #fff; 
}

И это должно быть сделано!Дайте мне знать, если это работает!

...