Шаблон резиновый и нормально работает в 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 в этом случае не будет...
привет,
так по-ламерски рада что нашла в инете живую тему насчет трехколонок, заверстала на пробу вариант Aykroyd, и javu подключила, но в ие 6 все по-прежнему ужасно ((
сайт у меня на джумле, а там часть, которую я не в состоянии поменять на таблицах, может по этому в ие все падает?
хелпмиплиз, а то я уже!
хттп/cartoonia.net/cartoonia/
Да вглянуть-то можно. ) Только я сейчас как раз пытаюсь адаптировать его под 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>
Использую у себя Ваш шаблон. Есть небольшие глюки в IE6, а именно: при изменение окна браузера иногда появляются скролы (вертикальный и горизонтальный). При обновлении страницы они не пропадают. Стоит чуть изменить размер окна (в большую или меньшую сторону) и они исчезают. Скрин прилагается. Буду благодарен за прояснение ситуацииВо! Родил решение, при котором:
1. Контент располагается в самом верху.
2. Без проблем применяется max-width к блоку content.
3. Совершенно отсутствуют какие-либо глюки в IE6.
Цена за все это удовольствие – три дополнительных обрамляющих дива. Но это, право, смешная цена по сравнению с достигнутым результатом... )
[attachment=8095:1.gif]
Во! Родил решение, при котором:
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]
Заблуждаетесь...
Ваши права
