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_1270742712.html <p>Собственно и секрета никакого нет. Все премудрости и тайны html и css, очень часто не стоят подробных описаний и примечаний чуть ли не каждой строчке кода.</p> <p>Важна первоначальная идея и ее голое воплощение в примере.</p> <p>Обладающим определенным опытом все будет понятно буквально с листа, не посвященным чуть труднее, но внимательный разбор тестовой страницы даст свои плоды и еще один пробел в знаниях легко устраняется и в будущем подобного рода приемы и методы помогут в решении более сложных проблем.</p> <p>Многие задают вопрос, каким образом устранить не совсем адекватное поведение OPERA из одной предыдущей <a href="http://trifler.ru/blog/post_1266351793.html">публикации</a>.</p> <p>Речь шла о размещении дополнительных блоков в колонках центральной части шаблона, которые всегда находятся внизу данных колонок.</p> <p>Проблемный html-код:</p> <pre class="pre"> &lt;body&gt; &lt;div id="middle"&gt; &lt;div class="content"&gt; <span style="color:blue;">&lt;div class="bottom_content"&gt;</span>Content<span style="color:blue;">&lt;/div&gt;</span> &lt;/div&gt; &lt;div class="right"&gt; <span style="color:blue;">&lt;div class="bottom_right"&gt;</span>Right<span style="color:blue;">&lt;/div&gt;</span> &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; Footer <span>&lt;div class="border_content"&gt;&lt;/div&gt; &lt;div class="border_right"&gt;&lt;/div&gt;</span> <span style="color:green;">&lt;div class="footer_content"&gt;</span>Блок content bottom<span style="color:green;">&lt;/div&gt;</span> <span style="color:green;">&lt;div class="footer_right"&gt;</span>Блок right bottom<span style="color:green;">&lt;/div&gt;</span> &lt;/div&gt; &lt;div id="header"&gt;Header&lt;/div&gt; &lt;div id="menus&gt;Горизонтальное меню&lt;/div&gt; &lt;/body&gt;</pre> <p>Минимальные изменения:</p> <pre class="pre"> &lt;body&gt; &lt;div id="middle"&gt; &lt;div class="content"&gt; <span style="color:blue;">&lt;div class="bottom_content"&gt;</span>Content<span style="color:blue;">&lt;/div&gt;</span> &lt;/div&gt; &lt;div class="right"&gt; <span style="color:blue;">&lt;div class="bottom_right"&gt;</span>Right<span style="color:blue;">&lt;/div&gt;</span> &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; Footer <span>&lt;div class="border_content"&gt; <span style="color:green;">&lt;div class="footer_content"&gt;</span>Блок content bottom<span style="color:green;">&lt;/div&gt;</span> &lt;/div&gt; &lt;div class="border_right"&gt; <span style="color:green;">&lt;div class="footer_right"&gt;</span>Блок right bottom<span style="color:green;">&lt;/div&gt;</span> &lt;/div&gt;</span> &lt;/div&gt; &lt;div id="header"&gt;Header&lt;/div&gt; &lt;div id="menus&gt;Горизонтальное меню&lt;/div&gt; &lt;/body&gt;</pre> <p>Естественно, это влечет за собой правку стилей:</p> <pre class="pre"> .footer_content,.footer_right {<span>bottom:40px;</span>} .footer_content {<span>left:3px;</span>} .footer_right {<span>right:2px;</span>}</pre> <p>Вот так простенько лечим OPERA :)</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1270742712.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1270742712.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_1270742712.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1270742712.html">All Comments</a></div> <!-- RSS_link_to_post end --> Thu, 08 Apr 2010 23:05:12 GMT