http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1223575204.html <p>В комментариях к статье <a href="http://trifler.ru/blog/comment_1223201793.html ">"Одинаковая высота колонок – border"</a> был поднят вопрос об индивидуальном цвете колонок отведенных под навигацию. Вернее, если я правильно понял данное замечание, это касалось только двух макетов, а именно, колонки навигации находятся рядом друг с другом и расположены слева или справа от области контента. Там же приводился <a href="http://dimox.name/3-column-css-layout-right-sidebars/">линк</a>, где нечто подобное было сделано.</p> <p>Не в даваясь в подробный анализ, замечу, что реализация разноцветных колонок выполнена довольно не уклюже. Задача решалась в лоб и нет изящности присущей грамотному использованию "Каскадных таблиц стилей". Масса дополнительных контейнеров, трудности создания макетов с иным расположением колонок навигации. Судя по всему, разметка затачивалась под конкретный проект и цели достичь некой универсальности, не ставилась.</p> <p>Но не будем слишком строги :)</p> <p>По ссылке приведенной в начале поста, мной было представлено, как и каким образом можно решить проблему различного расположения колонок навигации относительно области контента при использовании данной техники, и приведенные примеры убедительно говорят сами за себя.</p> <p>Теперь же поговорим о возможности раскрасить макет, как распущенный <i>павлиний</i> хвост :), хотя, цветовая гамма выбранная вами, для разнообразия, явно не помешает. Тем более что для подобных фокусов нет необходимости привлекать дополнительную разметку в виде N-го количества абсолютно не нужных блоков.</p> <p><span>html</span>-код из указанной статьи без всяких изменений, хотя разговор пойдет только о двух макетах, но по традиции в заключение статьи вы сможете посмотреть все пять примеров, дополненных, так нужной кому-то эмуляцией <span>nim/max-width</span> для IE6 :)</p> <p>Необходимые манипуляции для получения нужного результата.</p> <p>Стили до :</p> <pre class="pre"> #middle { margin:3px auto; min-width:910px; max-width:960px; } *html #middle {width:960px;} .wrap { background-color:#fff; border-left:#eee 400px solid; height:100%; } .wrap:after {content:'';clear:both;display:block;} .content, .left, .right {float:left;overflow:hidden;position:relative;} .content {margin-right:-100%;width:100%;} .left {margin-right:-100%;width:200px;left:-400px;} .right {margin-right:-200px;left:-200px;width:200px;}</pre> <p>Стили после :</p> <pre class="pre"> #middle { <span>background-color:#ddd;</span> margin:3px auto; min-width:910px; max-width:960px; } *html #middle {width:expression( (document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 910 ? "910px": (document.documentElement.clientWidth > 960 ?"960px" :"auto")) : (document.body.clientWidth < 910 ? "910px" : (document.body.clientWidth > 960 ? "960px" :"auto"))); } .wrap { background-color:#fff; <span>border-left:#eee 200px solid; margin-left:200px;</span> height:100%; } .wrap:after {content:'';clear:both;display:block;} .content, .left, .right {float:left;overflow:hidden;position:relative;} .content,.left {margin-right:-100%;} .content {width:100%;} .left {left:-400px;width:200px;} .right {left:-200px;width:200px;}</pre> <p>Нововведения выделены цветом.</p> <p>Появилось всего несколько новых стилевых правил, но этого оказалось вполне достаточно.</p> <p>Для <span>#middle</span> указан <span>background-color:#ddd;</span> это и будет цвет одной из колонок.</p> <p>Для .wrap вместо прежней ширины <span>border</span>-а в 400px, произошла разбивка на две равные части этого значения: <span>border-left:#eee 200px solid;</span> и <span>margin-left:200px;</span> и теперь другая колонка будет цветом <span>#eee</span>.</p> <p>Вот так все достаточно легко и просто и самое главное это никоим образом не затрагивает <span>html</span>-код страницы, что само по себе уже приятно.</p> <p>Продолжая импровизировать, получаем возможность задать одной из колонок навигации фоновую графику размножающуюся по вертикали.</p> <p>Как это сделать читаем предыдущий пост: <a href="http://trifler.ru/blog/post_1223387326.html">"Super Holy Grail Gordi"</a>.</p> <p>Вот только вертикальный <span>border</span> отделяющий область контента от колонок навигации нарисовать не судьба. Минус особенностей разметки :)</p> <p>Переходим к <a href="impro.html">примерам</a>.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1223575204.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1223575204.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1223575204.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1223575204.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 10 Oct 2008 01:00:04 GMT