Грин
Везде плохо работает... Вернее, min-width вообще не работает...
И вообще-то на сегодняшний день пока еще большинство пользователей сидит на разрешении 1024х768...
Вид для печати
Грин
Везде плохо работает... Вернее, min-width вообще не работает...
И вообще-то на сегодняшний день пока еще большинство пользователей сидит на разрешении 1024х768...
<div id="content">Цитата:
<!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 {width: 100%; margin-right: -200px; float: left;}
#outer2 {margin-right: 200px;}
#outer3 {width: 100%; margin-left: -150px; float: right;}
#main {margin-left: 150px;}
#news {width: 150px; float: left;}
#present {width: 200px; float: right;}
#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 id="outer1">
<div id="outer2">
* <div id="outer3">
*
* </div>
*
</div>
</div>
</div>
</body>
</html>[/quote]
При выделении Style - в CSS файл, слева пропадает бэк!
Уважаемый Aykroyd
вот такую таблицу
Пытался сделать на DIVах, после часу мучений плюнул на все и сделал таблицу..Цитата:
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="table1">
<tr>
* <td></td>
* <td rowspan="2"></td>
</tr>
<tr>
* <td></td>
</tr>
</table>
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 21:29
При выделении Style - в CSS файл, слева пропадает бэк!
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Пути к фоновым изображениям проверьте.
Если css-файл лежит в отдельной папке, потребуется url(../img/bgleft.gif)...
[/quote]Цитата:
Originally posted by barmalei@Oct 21 2007, 21:29
Уважаемый Aykroyd
вот такую таблицу
Пытался сделать на DIVах, после часу мучений плюнул на все и сделал таблицу..
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Делайте тогда уж всё на таблицах)
Тема понравилась
Сам недавно столкнулся с такой же проблемой.
Выход нашел, но только футер не смог прижать к нижней части экрана.
Aykroyd уточните как сделать, чтобы в IE работали min/max
Обычно использую:
width:100%;max-width:1024px;//width:expression(document.body.clientWidth<1024?"1 00%":"1024px")
но применительно к body не работает.
Ваш скрипт скачал, но тоже не работает. Или в скрипте нужно что-то прописать?
Если скачали скрипт, подключите его как положено, а в CSS задайте body {min-width: 1000px;}... IE будет понимать любые min/max-width/height... В скрипте менять ничего не надо...
Спасибо, все получилось.
2 Уважаемый Aykroyd - не появилось ли более современного способа дотягивания боковых элементов до футера? Т.к. немного не удобно задавать беки в других элементах HTMLaЦитата:
Воспользуйтесь техникой Faux Columns... Не задавайте фоновый цвет или изображения для самих колонок... Для левой колонки задайте фоновое изображение в элементе html, а для правой – в элементе body...
[/quote]Цитата:
Originally posted by barmalei@Dec 7 2007, 12:50
2 Уважаемый Aykroyd - не появилось ли более современного способа дотягивания боковых элементов до футера? Т.к. немного не удобно задавать беки в других элементах HTMLa
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Пока, к сожалению, нет. В текущей версии CSS не возможности сказать «высота вон как у того, другого элемента»...
[Only registered and activated users can see links. Click Here To Register...] почитал данные постики и вспомнил как в свое время также сидели и обдумывали код для трех колонок) ностальгия)
Как сделать тень с двух сторон у странички?
у меня следующая структура:
<div class="all">
<div class="content">
</div>
</div>
все дивы имеют фиксированную ширину.как сделать, чтобы тень() была такой же высоты как и все содержимое?
Dragonfly
Позвольте поинтересоваться, а что в Вашем понимании есть «div»?
див-это контейнер для элементов, он же не может быть высотой как у соседнего дива или может?
[/quote]Цитата:
Originally posted by Dragonfly@Apr 25 2008, 00:28
он же не может быть высотой как у соседнего дива или может?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Может, если только обоим дивам явно задана одинаковая высота.
[/quote]Цитата:
Originally posted by Dragonfly@Apr 25 2008, 00:28
див-это контейнер для элементов
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Отлично. Вы уж простите за назойливость, очень хотелось бы еще поинтересоваться, что в Вашем понимании есть «тень»?
[/quote]Цитата:
Originally posted by Aykroyd@Apr 24 2008, 22:49
Вы уж простите за назойливость, очень хотелось бы еще поинтересоваться, что в Вашем понимании есть «тень»?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
у меня дивы left_shadow, right_shadow имеют фоном картинку шириной 10рх, которая отображает тень, но длина этих дивов не равна длине дива со всем содержимым, когда использую table, то высота норм.
[/quote]Цитата:
Originally posted by Dragonfly@Apr 25 2008, 19:05
у меня дивы left_shadow, right_shadow имеют фоном картинку шириной 10рх, которая отображает тень, но длина этих дивов не равна длине дива со всем содержимым, когда использую table, то высота норм.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Да я прекрасно понимаю Вашу проблему. Более того, искренне хочу Вам помочь. Но вопрос-то был в другом. Что в Вашем понимании есть «тень»?
[/quote]Цитата:
Originally posted by Aykroyd@Apr 25 2008, 14:50
Что в Вашем понимании есть «тень»?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Я извиняюсь, но я не совсем понимаю вопрос.
у меня див all находится посредине, body имеет определенный фон. Нужно, чтобы этот див all, в котором содержание страницы, отбрасывал тень с двух сторон.
Пример тени есть на сайте www(dot)hostgator(dot)com
к сожалению пока не могу ссылки отправлять
[/quote]Цитата:
Originally posted by Dragonfly@Apr 25 2008, 20:21
Я извиняюсь, но я не совсем понимаю вопрос.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Ну что же тут непонятного. [Only registered and activated users can see links. Click Here To Register...]
Что такое «ТЕНЬ»?
А то, что див all у Вас находится посредине и body имеет определенный фон – я об этом уже давно догадался.
Тень такая же как на сайте hostgator.com у меня картинка 10х10 рх, делаю ее background-repeat:repeat-y, получается тень)
Мда.
Ну хорошо, что хоть так... Картинка, значит... Только давайте все-таки пойдем немного дальше и попытаемся понять, что это не просто картинка, а часть оформления веб-сайта.
Теперь о главном. Если Вы чуть раньше заявили, что див – это контейнер для элементов, почему же Вы тогда пытаетесь поместить в этот див не структурные элементы, а часть оформления (то бишь Вашу ненаглядную тень)? Некрасиво получается, понимаете? Нелогично.
А основная суть всей этой нашей полемики заключается в том, что, если изначально правильно подходить к структурной разметке, то и производных проблем («как сделать, чтобы тень была такой же высоты как и все содержимое») попросту не будет возникать.
Что Вам мешает не [Only registered and activated users can see links. Click Here To Register...], а объединить Вашу левую и правую тень в один графический файл и прилепить ее выровненным по центру бэкграундом к блоку content (или all)? Ведь все Ваши колонки (как Вы сами сказали) имеют фиксированную ширину. What's the problem? )
[/quote]Цитата:
Originally posted by Aykroyd@Apr 25 2008, 17:10
объединить Вашу левую и правую тень в один графический файл и прилепить ее выровненным по центру бэкграундом к блоку content (или all)? <div align='right'>[Only registered and activated users can see links. Click Here To Register...]
то есть сделать картинку(шириной как див all) прозрачную, а по краям элементы тени?
[/quote]Цитата:
Originally posted by Dragonfly@Apr 25 2008, 22:39
то есть сделать картинку(шириной как див all) прозрачную, а по краям элементы тени?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Именно.
я сначала так и сделала, но мне сказали, что картинка на всю ширину занимает больше места, чем две разные, вот и переделывала) Спасибо за помощь!
Не за что.
Это клиника. Без серьезной антитабличной терапии тут никак...Цитата:
мне сказали, что картинка на всю ширину занимает больше места, чем две разные
[Only registered and activated users can see links. Click Here To Register...]
привет,
так по-ламерски рада что нашла в инете живую тему насчет трехколонок, заверстала на пробу вариант Aykroyd, и javu подключила, но в ие 6 все по-прежнему ужасно ((
сайт у меня на джумле, а там часть, которую я не в состоянии поменять на таблицах, может по этому в ие все падает?
хелпмиплиз, а то я уже :suicide2: !
хттп/cartoonia.net/cartoonia/
MarieN
У Вас IE вгоняется в [Only registered and activated users can see links. Click Here To Register...] из-за инструкции <?xml version="1.0" encoding="windows-1251"?>. Уберите ее, скорее всего в этом причина.
[Only registered and activated users can see links. Click Here To Register...]. [Only registered and activated users can see links. Click Here To Register...].
[/quote]Цитата:
Originally posted by Aykroyd@Apr 30 2008, 12:59
MarieN
У Вас IE вгоняется в Qiurks Mode из-за инструкции <?xml version="1.0" encoding="windows-1251"?>. Уберите ее, скорее всего в этом причина.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
убрала эту строку, все отлично встало спасибо огромное! :biggrin2:
но при уменьшении ширины броузера ие падает меню.. буду думать(
[/quote]Цитата:
Originally posted by MarieN@Apr 30 2008, 16:16
но при уменьшении ширины броузера ие* падает меню.. буду думать(
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
А там думать нечего. Отрицательный margin (2-3 пиксела) надо добавить сбоку для одной из колонок. Иначе при ресайзе в IE действительно колонки иногда скачут...
я уж со всех сторон попробовала добавлять.. а оно все падает и падает(Цитата:
Originally posted by Aykroyd@Apr 30 2008, 14:08
[b]А там думать нечего. Отрицательный margin (2-3 пиксела) надо добавить сбоку для одной из колонок. Иначе при ресайзе в IE действительно колонки иногда скачут...
доктор, что со мной не так? :crazy:
Ссылку смотрел – огромный и жуткий горизонтальный скролл видел. Но чтобы что-то где-то падало – не нашел...
Подскажите, почему в ие 6.0 на сайте [Only registered and activated users can see links. Click Here To Register...] правый контейнер с баннером гугля уползает вниз и как это поправить? В ие 7.0 все нормально.
Использую у себя Ваш шаблон. Есть небольшие глюки в IE6, а именно: при изменение окна браузера иногда появляются скролы (вертикальный и горизонтальный). При обновлении страницы они не пропадают. Стоит чуть изменить размер окна (в большую или меньшую сторону) и они исчезают. Скрин прилагается. Буду благодарен за прояснение ситуации [Only registered and activated users can see links. Click Here To Register...]Цитата:
Во! Родил решение, при котором:
1. Контент располагается в самом верху.
2. Без проблем применяется max-width к блоку content.
3. Совершенно отсутствуют какие-либо глюки в IE6.
Цена за все это удовольствие – три дополнительных обрамляющих дива. Но это, право, смешная цена по сравнению с достигнутым результатом... )
[attachment=8095:1.gif]
В IE6 всегда есть глюки. В данном конкретном случае скорее всего это происходит из-за minmax.js (он иногда здорово притормаживает). Можно попробовать не подключать этот скрипт и прописать нужные экспрешшены вручную (непосредственно в CSS). Еще одна причина может заключаться в абсолютном позиционировании футера. На сегодняшний день рекомендую для футера другой метод размещения – отрицательный верхний margin.
И тем не менее, нельзя с этим не считаться.Цитата:
В IE6 всегда есть глюки.
Я не очень силен в верстке, больше по серверной части. Какие можете привести доводы за свой вариант шаблона? Чем он лучше, скажем, табличного (или смешанного)? У меня есть какое-то подсознательное чувство, что это очень круто, но стоит ли использовать этот подход я пока не решил. По поводу экспрешенов - только слышал о них [Only registered and activated users can see links. Click Here To Register...]
Еще раз спасибо!
К сожалению, никаких. И в первую очередь по той простой причине, что умным они не нужны, а дуракам – бесполезны. Данный топик был создан с целью продемонстрировать пример практической реализации поставленной задачи, а не для того, чтобы рассматривать теоретические аспекты навроде «что такое хорошо и что такое плохо».Цитата:
Какие можете привести доводы за свой вариант шаблона?
Вобщем-то вопрос заключался не в том, кому и как использовать шаблоны, а в неочевидности для меня верстки слоями.Цитата:
К сожалению, никаких. И в первую очередь по той простой причине, что умным они не нужны, а дуракам – бесполезны. Данный топик был создан с целью продемонстрировать пример практической реализации поставленной задачи, а не для того, чтобы рассматривать теоретические аспекты навроде «что такое хорошо и что такое плохо».
Это совсем неудивительно, поскольку «верстки слоями» в природе не существует.
Здравствуйте!
Пробывал применить ваш шаблон(немного его видоизменив):
Возникла следующая проблема с IE6 (в остальных браузерах проблемы не обнаружил): при уменьшении размера окна, левая колонка(div) опускается под main колонку (div). Как можно решить данную проблему?Код:<!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%;}
#content {width: 100%; margin: 0px auto; padding-bottom: 70px; overflow: hidden;}
#outer1 {width: 100%; margin-right: -200px; float: left;}
#outer2 {margin-right: 100px;}
#outer3 {width: 100%; margin-left: -200px; float: right;}
#main {margin-left: 200px; background: #FFCCFF;}
#left {width: 200px; float: left; background: #00CCFF;}
#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="content">
****<div id="outer1">
************<div id="outer3">
****************<div id="main">
****************Контент
****************<table border="1">
****************<tr><td>test1</td><td>test2</td><td>test3</td><td>test4</td><td>test5</td><td>test6</td><td>test7</td><td>test8</td><td>test9</td><td>test10</td><td>test11</td><td>test12</td><td>test13</td><td>test14</td><td>test15</td><td>test16</td><td>test17</td><td>test18</td><td>test19</td><td>test20</td><td>test21</td><td>test22</td><td>test23</td></tr>
****************</table>
****************</div>
**** ********</div>
**** ********<div id="left">Левая колонка</div>
****</div>
****
</div>
<div id="footer">Футер</div>
</body>
</html>
Спасибо.
Поэкспериментируйте с правыми отрицательными полями (margin-right: -3px;) для левой колонки или с левыми отрицательными полями (margin-left: -3px;) для правой колонки.Цитата:
Как можно решить данную проблему?