<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ксдыщь! &#187; запрет обтекания</title>
	<atom:link href="http://flack.ru/tag/%d0%b7%d0%b0%d0%bf%d1%80%d0%b5%d1%82-%d0%be%d0%b1%d1%82%d0%b5%d0%ba%d0%b0%d0%bd%d0%b8%d1%8f/feed/" rel="self" type="application/rss+xml" />
	<link>http://flack.ru</link>
	<description>Вебдев и всякая фигня</description>
	<lastBuildDate>Mon, 06 Apr 2009 16:47:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Семантическая верстка — советы и решения. Часть VI. Запрет на обтекание float’ов</title>
		<link>http://flack.ru/2008/08/26/semantic-coding-howto-6/</link>
		<comments>http://flack.ru/2008/08/26/semantic-coding-howto-6/#comments</comments>
		<pubDate>Tue, 26 Aug 2008 11:15:53 +0000</pubDate>
		<dc:creator>Flack</dc:creator>
				<category><![CDATA[Веб-разработка]]></category>
		<category><![CDATA[Рецептарий]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[float]]></category>
		<category><![CDATA[веб-стандарты]]></category>
		<category><![CDATA[запрет обтекания]]></category>

		<guid isPermaLink="false">http://flack.ru/2008/08/26/semantic-coding-howto-6/</guid>
		<description><![CDATA[На данном примере мы рассмотрим, как реализовать запрет на обтекание определенного элемента, к которому применено правило float. Нашей задачей является создание анонса новости. Макет выглядит следующим образом: Поскольку мы уже сошлись на отказе от таблиц в пользу семантики, нам потребуется минимум html-кода: &#60;div class="announce"&#62; &#60;img src="pic.gif" alt="" /&#62; &#60;h2&#62;&#60;a href="#"&#62;Россияне помогли&#60;/a&#62;&#60;/h2&#62; &#60;p&#62;Полиция турецкого города Измир [...]]]></description>
			<content:encoded><![CDATA[<p>На данном примере мы рассмотрим, как реализовать запрет на обтекание определенного элемента, к которому применено правило float. Нашей задачей является создание анонса новости. <span id="more-124"></span>Макет выглядит следующим образом:</p>
<p><img src="/wp-content/uploads/2008/08/image010.gif" alt="image010.gif" /></p>
<p>Поскольку мы уже сошлись на отказе от таблиц в пользу семантики, нам потребуется минимум html-кода:</p>
<pre><code>&lt;div class="announce"&gt;
    &lt;img src="pic.gif" alt="" /&gt;
    &lt;h2&gt;&lt;a href="#"&gt;Россияне помогли&lt;/a&gt;&lt;/h2&gt;
    &lt;p&gt;Полиция турецкого города Измир сообщила об аресте 17 участников группировки, занимавшейся мошенничеством и рассылкой вирусов в Сети.
     Арест произошел после того, как местные полицейские выяснили, что трое русских хакеров отправили в общей сложности миллион писем с
     вирусами и получили доступ к банковским счетам многих жителей Турции.&lt;/p&gt;
&lt;/div&gt;</code></pre>
<p>Зададим картинке float, чтобы прижать ее налево и соответствующие макету поля:</p>
<pre><code>.announce img {
    float:left;
    margin:0 10px 10px 0;
    }</code></pre>
<p>К сожалению, текст обтекает картинку, а это совсем не то, что нам требуется по условию задачи. Чтобы запретить обтекание применим дополнительные стили к тексту:<br />
<strong>style.css:</strong></p>
<pre><code>.announce p {
    overflow:hidden;
    }</code></pre>
<p><strong>ie.css:</strong></p>
<pre><code>.announce p {
    zoom:1; /* Для IE 7 */
   }
   * HTML .announce p {
        height:1%; /* Для IE 5,6 */
        }</code></pre>
<p>Voila!</p>
<p class="note">Внимательный читатель безусловно заметит, что для реализации задачи мы воспользовались правилами, указывающими Explorer’у на hasLayout. Таким образов еще раз показав их полезность.</p>
<p><strong>Материалы для изучения:</strong></p>
<ul>
<li><a href="http://cssing.org.ua/2005/07/03/display-table/">display:table</a></li>
<li><a href="http://www.pupinc.com/files/test/float.html">Pup&#8217;s Box Flow Hack</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://flack.ru/2008/08/26/semantic-coding-howto-6/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>
