Шаблон резиновый и нормально работает в FF, Opera но IE смещает блоки в итоге один блок наезжает на другой и перекрывает содержание + появляется отступ между блоком "Menu Left" и "Content", на разрешение больше чем 1024*768 блок "Menu Left" просто исчезает. Как с IE решить эти проблемы ?
Переверстать все заново по-уму... На крайний случай – в сети есть множество готовых трехколоночных шаблонов, которые ведут себя адекватно во всех браузерах... Файл не смотрел...
Мне проще самому накидать, нежели чем искать... Напишите последовательность блоков в коде и как они должны расположиться на странице...
"Container" - min-width: 800px; max-width: 1000px расположен по центру.Код:<div id="container"> * <div id="center"></div> * <div id="left"></div> * <div id="right"></div> </div>
"Center" - расположен между блоками Left и Right, резиновый (на всю ширину между блоками)
"Right" - фиксированная ширина 200px расположен справа
"Left" - фиксированная ширина 200px расположен слева :]
Выносить в коде контент выше левой колонки не рекомендую. Способ сделать это, честно говоря, есть. Но при реализации данного способа в совокупности с наличием max-width, в IE6 будут глюки... Так что либо контент в самом верху, но без max-width, либо контент после левой колонки, но с max-width...Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>***</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} html {background: #CCFFFF; height: 100%;} body {min-width: 800px; min-height: 100%; position: relative;} * html body {height: 100%;} #content {width: 100%; max-width: 1000px; margin: 0px auto; overflow: hidden;} #outer {width: 100%; margin-right: -200px; float: left;} #left {width: 200px; float: left;} * html #left {margin-right: -3px;} #main {margin: 0px 200px;} * html #main {height: 1%; margin-left: 197px;} #right {width: 200px; float: right;} </style> <script src="js/minmax.js" type="text/JavaScript"></script> </head> <body> <div id="content"> <div id="outer"> *<div id="left">Левая колонка</div> *<div id="main">Контент</div> </div> <div id="right">Правая колонка</div> </div> </body> </html>
Есть, правда, и еще один вариант. Если макет позволяет назначить max-width не блоку content, а блоку body (т.е. body {width 100%;} не подразумевается и не требуется), вполне можно воспользоваться способом, позволяющим вынести контент в коде наверх... Глюков IE6 в этом случае не будет...
Спасибо, Aykroyd
Можно на код взглянуть ?Originally posted by Aykroyd+Jun 16 2007, 21:02-->Понятно, придется использовать фиксированную ширину в шаблоне, потому что main требуется выносить выше левой колонки :[Выносить в коде контент выше левой колонки не рекомендую. Способ сделать это, честно говоря, есть. Но при реализации данного способа в совокупности с наличием max-width, в IE6 будут глюки... Так что либо контент в самом верху, но без max-width, либо контент после левой колонки, но с max-width...
<!--QuoteBegin-Aykroyd@Jun 16 2007, 21:02
[b]Есть, правда, и еще один вариант. Если макет позволяет назначить max-width не блоку content, а блоку body (т.е. body {width 100%;} не подразумевается и не требуется), вполне можно воспользоваться способом, позволяющим вынести контент в коде наверх... Глюков IE6 в этом случае не будет...
Да вглянуть-то можно. ) Только я сейчас как раз пытаюсь адаптировать его под max-width (ну, чтобы контент вверху + max-width + чтобы в IE6 глюков не было). Честно говоря, у этого способа и без max-width небольшой глюк в IE6 есть. Проявляется он при использовании min-width (а уж без этого свойства в наше время просто никак) – если включается скрипт на min-width (горизонтальный скролл), то при обновлении окна браузера правая колонка попросту пропадает...
Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Центр - Левая - Правая</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} html {background: url(img/bgleft.gif) #CCFFFF repeat-y; height: 100%;} body {background: url(img/bgright.gif) repeat-y right top; min-width: 776px; min-height: 100%; position: relative;} * html body {height: 100%;} #header {background: #FFFF99; height: 100px;} #content {width: 100%; padding-bottom: 70px; overflow: hidden;} #outer1 {margin: 0px 200px 0px 150px;} #outer2 {width: 100%; float: left;} #main {width: 100%; float: right;} #news {width: 150px; margin-left: -150px; float: left; position: relative;} #present {width: 200px; margin-left: -200px; float: right; position: relative; right: -200px;} #footer {background: #66FFCC; width: 100%; height: 70px; position: absolute; bottom: 0px;} * html #footer {bottom: -1px;} </style> <script src="js/minmax.js" type="text/JavaScript"></script> </head> <body> <div id="header">Заголовок</div> <div id="content"> ****<div id="outer1"> *<div id="outer2"> *****<div id="main">Контент</div> *****<div id="news">Новости</div> *</div> *<div id="present">Презентация</div> ****</div> </div> <div id="footer">Футер</div> </body> </html>
Во! Родил решение, при котором:
1. Контент располагается в самом верху.
2. Без проблем применяется max-width к блоку content.
3. Совершенно отсутствуют какие-либо глюки в IE6.
Цена за все это удовольствие – три дополнительных обрамляющих дива. Но это, право, смешная цена по сравнению с достигнутым результатом... )
Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Центр-Левая-Правая + max-width</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> * {margin: 0px; padding: 0px;} html {background: #CCFFFF; height: 100%;} body {min-width: 800px; min-height: 100%; position: relative;} * html body {height: 100%;} #header {background: #FFFF99; height: 100px;} #content {width: 100%; max-width: 1000px; margin: 0px auto; padding-bottom: 70px; overflow: hidden;} #outer1 {width: 100%; margin-right: -200px; float: left;} #outer2 {margin-right: 200px;} #outer3 {width: 100%; margin-left: -200px; float: right;} #main {margin-left: 200px; background: #FFCCFF;} #left {width: 200px; float: left; background: #00CCFF;} #right {width: 200px; float: right; background: #FFCC66;} #footer {background: #66FFCC; width: 100%; height: 70px; position: absolute; bottom: 0px;} * html #footer {bottom: -1px;} </style> <script src="js/minmax.js" type="text/JavaScript"></script> </head> <body> <div id="header">Заголовок</div> <div id="content"> ****<div id="outer1"> *<div id="outer2"> *****<div id="outer3"> * *<div id="main">Контент</div> *****</div> *****<div id="left">Левая колонка</div> *</div> ****</div> ****<div id="right">Правая колонка</div> </div> <div id="footer">Футер</div> </body> </html>
Действительно родил :] Теперь юные верстальщики стыбрят его и будут продавать за реальные :]Originally posted by Aykroyd@Jun 17 2007, 18:53
[b]Во! Родил
[/quote]
кстати, когда ж ты его уже доделаешь и мы поменяемся сцЫлками?
возник вопрос .а почему маскимальная ширина только для одного блока задана? при большом экране не будет косяка?
[/quote]
Потому что этот "один" блок содержит в себе все остальные. Для хедера и футера по первоначальной задумке ограничение максимальной ширины не предполагалось...
я хедер и футер и имела в виду. т е они будут растягиваться по размеру экрана , а тот самый "один" блок ограничится 1000 пикс.?
[/quote]
Совершенно верно. Не всегда, но в большинстве случаев (имхо) хедер и футер действительно растягивается на всю ширину экрана, а вот именно контент есть смысл ограничить по ширине, так как при слишком больших разрешениях растянутый во всю ширину текст может стать трудночитаемым...
Если же необходимо ограничить по ширине все блоки (включая хедер и футер), следует задать свойство max-width для элемента body.
Гм... скопировал я последний предлагаемый кусок кода... в IE6 при запуске страницы наблюдается несколько иной результат, нежели в Opera... Хотя бы потому, что в IE6 не работают min-* и max-*. Соответственно, о кроссбраузерности говорить нельзя. Посему считаю, что решение с layoutgala (blog.html.it/layoutgala/LayoutGala13.html) гораздо более удобное - оно и кроссбраузерное, и не требует столько кода.
PS: Aykroyd, у меня IE6 при загрузке вашей страницы в кодировке utf-8 очень страшно сглючил... Пришлось менять кодировку на win1251. А все от того, что IE6 не терпит кириллицу при этой кодировке.
В этом случае сайт выровняется по левой границе страницы... Это не совсем красиво не так ли? К тому же это решение не будет работать в IE6.Если же необходимо ограничить по ширине все блоки (включая хедер и футер), следует задать свойство max-width для элемента body.
[/quote]
Наблюдается совершенно идентичный результат.
[/quote]
Предполагается, что читающие данную тему знают, как научить IE6 понимать свойства min/max-width/height.
[/quote]
Не делайте поспешных выводов.
[/quote]
Кодировка Unicode (особым форматом которой является UTF-8) объявлена стандартной кодировкой документа в HTML, начиная с версии 4.
[/quote]
Ваше право строить любые гипотезы. Даже такие нелепые, как эта...
[/quote]
Выровняется по центру, как и в других браузерах.
[/quote]
Заблуждаетесь...
Вы еще скажите, что вы лучше меня видите, что у меня на мониторе изображено...Ваше право строить любые гипотезы. Даже такие нелепые, как эта...
Вот кусок кода:Выровняется по центру, как и в других браузерах.- в Opera и Mozilla получается черная полоска, выровненная по левому краю.Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "..."> <html> <head> ****<title>Title</title> ****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> ****<style type="text/css"> *body {max-width: 800px;} *div {background-color: #000; width:100%;} ****</style> </head> <body> **** </body> </html>
Предполагается, что знающие, "как научить IE6 понимать свойства min/max-width/height", не станут задавать вопросов о том, как сделать трехколоночный шаблон.Предполагается, что читающие данную тему знают, как научить IE6 понимать свойства min/max-width/height.
PS: Гм... Товарищ Aykroyd, видимо, вы не очень умеете воспринимать критику в свой адрес...
[/quote]
Нет, этого я говорить не буду. Но мне вполне достаточно того, что я знаю, КАК это изображается на мониторе у меня, а также у всех остальных моих коллег и пользователей данного ресурса. У IE6 нет никаких проблем с восприятием кодировки UTF-8, и это общеизвестно. Более того, говорить о "кириллице" или "не кириллице" в контексте данной кодировки по меньшей мере просто абсурдно...
Совершенно верно. Она и будет получаться по левому краю, так как это – ожидаемое поведение. Во-первых, Вы совершенно ничего не предприняли, для того чтобы выровнять блок body по центру, а во-вторых, не совсем понятно какое отношение имеет представленный Вами пример к опубликованному мной ранее решению.Originally posted by aats@Aug 1 2007, 10:40
Вот кусок кода:- в Opera и Mozilla получается черная полоска, выровненная по левому краю.Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "..."> <html> <head> ****<title>Title</title> ****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> ****<style type="text/css"> *body {max-width: 800px;} *div {background-color: #000; width:100%;} ****</style> </head> <body> ****<div>1</div> </body> </html>
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>
[/quote]
Очередная "гипотеза". Либо учите матчасть сами, либо формулируйте вопросы более корректно – создавайте темы, спрашивайте, интересуйтесь, но не делайте поспешных выводов. И тогда Вам здесь обязательно помогут решить любую проблему. Еще могу посоветовать пользоваться поиском по форуму.
[/quote]
Товарищ aats, я с удовольствием воспринимаю в свой адрес только объективную и конструктивную критику. Так уж повелось... Поспешные выводы и высказывания, базирующиеся на банальной нехватке знаний – это, простите, не есть критика...
Ваши права
