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_1250171170.html <pre class="postzit"> Рунет умрет от плагиата, От доморощенных "Гуру"… И хочется ругаться матом, Не с перепоя по утру… Но сколько в грудь себя не бей, В комментах не точи елей, Куда ни кинь, везде одно - Сплошное жуткое Г… <p>Gordi</p> </pre> <br class="clear"> <p>Печально все.</p> <p>Что только народ не делает, наизнанку готов вывернуться, лишь бы заявить о себе, "темку" застолбить.</p> <p>А вот серьезных действительно стоящих публикаций, раз-два и обчелся.</p> <p>Мельчает народ, все больше на запад посматривает, как оно там, переводит хрень всякую, а своего, как не было, так и нет.</p> <p>Даже хотя бы ревизию грамотную сделать того, о чем же там пишут не в состоянии, примеры заточить, да до ума довести, нет такого, что как не крути, прискорбно…</p> <p>Причем очень часто выдают не которые вещи, что опубликованы давно, за свои, не больше не меньше.</p> <p>Графоманы и плагиаторы погубят Рунет.</p> <p>Но не даром говорят: "Не бери в голову, бери в грудь, шире будет..."</p> <p>Вернемся к теме затронутой в предыдущем посте <a href="http://trifler.ru/blog/comment_1249981035.html">"Бомба…"</a> и на основе классического трех колоночного макета рассмотрим не которые нюансы.</p> <pre class="pre"> &lt;div class="middle"&gt; &lt;div id="left"&gt; &lt;div id="content"&gt; &lt;div id="right"&gt; &lt;div class="content"&gt;Content&lt;/div&gt; &lt;div class="left"&gt;Left&lt;/div&gt; &lt;div class="right"&gt;Right&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre> <p>Все красоты - одинаковая высота колонок, индивидуальная фоновая заливка (графика с размножением по вертикали), тот же border, каждой колонке своего цвета, достигаются вложением необходимых контейнеров друг в друга с соответствующими стилями, позволяющими область контента и колонки навигации в дальнейшем располагать как нашей душе угодно.</p> <p>html-код при переходе от одного макета к другом практически не меняется.</p> <pre class="pre"> * {margin:0;padding:0;} .middle { border:#000 1px solid;margin:5px auto; padding:3px 5px;width:960px; } #left { background:#f7f8f9;border:#a00 1px solid;margin-left:-2px; } #content,#right {margin:-1px 0;position:relative;} #content {background:#fff;border:#00a 1px solid;left:205px;} #right {background:#eee;border:#080 1px solid;left:555px;} #left,#right,.left,.right {width:200px;} #content,.content {width:550px;} .content,.left,.right {float:left;overflow-x:hidden;} .content {margin-left:-555px;} .left {margin-left:-761px;} .right {margin-right:-200px;} /* Start hack Section */ /* hack for OPERA, FF, Coogle Chrome, IE8 */ #right:after {content:'';clear:both;display:block;} /* hack for IE6 */ *html #left {overflow-x:hidden;} *html .content,*html .left,*html .right {position:relative;} /* End hack Section */</pre> <p>Как видим, таблица стилей хорошо структурирована, минимум разночтений для зверинца браузеров, они выделены в отдельную секцию.</p> <p>Ее размер можно и подсократить, если вам не требуется причиндалы типа - разноцветных border’ов, к примеру, будут все они одного цвета, тоже можно сказать и background-color.</p> <p>К сожалению, подобного рода, изыски имеют и обратную сторону медали - все колонки фиксированной ширины.</p> <p>Возможно, в будущем и это препятствие можно будет обойти, но разметка такого класса, как раз и предполагает по пиксельную точность, проценты, а без них построить резиновую страницу затруднительно, разночтения их пересчета браузерами, переход с одного разрешения на другое, могу привести к искажению нашей разметки.</p> <p>Но при известном желании и если вы не побоитесь использовать стилевые хаки, то карты вам в руки.</p> <p>Контейнер с классом middle центрирует макет относительно вертикальных границ окна браузера, также этому способствует и наличие левого отрицательного отступа для #left. Это позволяет достаточно просто выставить страницу точно по центру, в дальнейшем border можно исключить.</p> <p>В блок middle, чтобы не плодить лишние стили, можно вложить header и footer.</p> <p>Сто процентная высота страницы с включением header и footer, по понятным причинам не возможна.</p> <p>Других особенностей стили не имеют.</p> <p>Примеры трех колоночные: <a href="http://trifler.ru/blog/i/layouts/boom/boom_lcr.htm">left-content-right</a>, <a href="http://trifler.ru/blog/i/layouts/boom/boom_clr.htm">content-left-right</a>, <a href="http://trifler.ru/blog/i/layouts/boom/boom_lrc.htm">left-right-content</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_1250171170.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1250171170.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_1250171170.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1250171170.html">All Comments</a></div> <!-- RSS_link_to_post end --> Thu, 13 Aug 2009 20:46:10 GMT