Liquid - Fixed - Liquid Layout

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

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

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

Я нашел Liquid-Fixed-Liquid Layout на веб-сайте mathewjamestaylor liquid layouts, но он ломается в IE8, когда окно браузера уменьшилось до небольшого размера.

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

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

источник

2011-01-20 hanazair

просто проверял это,

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>

источник

2011-01-20 22:41:37

Ничего себе ... это здорово! И сделано таким простым способом. Большое спасибо. – hanazair

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

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

источник

2011-01-20 22:22:29 ghoppe

Раньше я использовал эту же технику, хотя я не имел ширины 9000 пикселей. Но да, несколько тысяч. :) –

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

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

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

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

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

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

источник

2011-01-20 22:38:56 mVChr

Большое спасибо за вашу идею, mVChr. Я уже пробовал решение, опубликованное ранее Джоном Бокером, и, похоже, он отлично работает, поэтому я поеду с этим пока. Еще раз спасибо. – hanazair

Liquid - Fixed - Liquid Layout

ответ

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