<?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>Astuces &#8211; Les intégristes</title>
	<atom:link href="/tag/astuces/feed/" rel="self" type="application/rss+xml" />
	<link>/</link>
	<description></description>
	<lastBuildDate>Thu, 31 Mar 2016 16:46:32 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.0</generator>
	<item>
		<title>Utiliser la propriété display: inline-block</title>
		<link>/2008/06/18/utiliser-la-propriete-displayinline-block/</link>
					<comments>/2008/06/18/utiliser-la-propriete-displayinline-block/#comments</comments>
		
		<dc:creator><![CDATA[Eric Le Bihan]]></dc:creator>
		<pubDate>Wed, 18 Jun 2008 21:55:56 +0000</pubDate>
				<category><![CDATA[Front-end]]></category>
		<category><![CDATA[Astuces]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<guid isPermaLink="false">/?p=65</guid>

					<description><![CDATA[Cette propriété qui est très peu utilisée pour des raisons de compatibilité navigateur est néanmoins intéressante. Elle permet en effet d&#8217;appliquer des styles de type « block » à un élément ayant un comportement de type « inline », comme par exemple, une largeur, une hauteur, des marges, etc. Ce qui veut dire que dans certains cas, il est possible de structurer des parties de pages sans avoir recours à la propriété float (left, right) ou position (relative, absolute).
Bien qu&#8217;incomplètement  prise en compte par les différents navigateur, il est possible de l&#8217;utiliser avec quelques connaissances supplémentaires, démonstration :
Prenons&#160;[&#8230;]]]></description>
										<content:encoded><![CDATA[<p>Cette propriété qui est très peu utilisée pour des raisons de compatibilité navigateur est néanmoins intéressante. Elle permet en effet d&rsquo;appliquer des styles de type « block » à un élément ayant un comportement de type « inline », comme par exemple, une largeur, une hauteur, des marges, etc. Ce qui veut dire que dans certains cas, il est possible de structurer des parties de pages sans avoir recours à la propriété <em>float</em> (left, right) ou <em>position</em> (relative, absolute).</p>
<p>Bien qu&rsquo;incomplètement  prise en compte par les différents navigateur, il est possible de l&rsquo;utiliser avec quelques connaissances supplémentaires, démonstration :</p>
<p>Prenons l&rsquo;exemple simple d&rsquo;un formulaire d&rsquo;inscription, où il faut aligner des label à 150px du bord d&rsquo;<em>input</em> de type texte :</p>
<p>Pour le code html suivant :</p>
<pre><code class="prettyprint">
&lt;form action="http://www.example.net/" method="post" id="inscription"&gt;
  &lt;fieldset&gt;
    &lt;label for="prenom"&gt;Prénom &lt;em&gt;*&lt;/em&gt;&lt;/label&gt;
    &lt;input type="text" id="prenom" /&gt;&lt;br /&gt;
    &lt;label for="nom"&gt;Nom &lt;em&gt;*&lt;/em&gt;&lt;/label&gt;
    &lt;input type="text" id="nom" /&gt;&lt;br /&gt;
    &lt;label for="email"&gt;Email &lt;em&gt;*&lt;/em&gt;&lt;/label&gt;
    &lt;input type="text" id="email" /&gt;&lt;br /&gt;
    &lt;label for="password"&gt;Mot de passe &lt;em&gt;*&lt;/em&gt;&lt;/label&gt;
    &lt;input type="password" id="password" /&gt;&lt;br /&gt;
    &lt;label for="confirm-password"&gt;Mot de passe &lt;em&gt;*&lt;/em&gt;&lt;/label&gt;
    &lt;input type="password" id="password" /&gt;&lt;br /&gt;
    &lt;input type="submit" value="valider" class="input-submit" /&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>
<p>Je définis le styles des base, auxquels je vais ajouter (en gras) la propriété <em>inline-block </em>et les styles qui vont avec  :</p>
<pre><code class="prettyprint">
#inscription fieldset{border:none;}
#inscription label{<strong>display:inline-block;padding:5px 0 0;width:150px;</strong>font-weight:bold;}
#inscription input{border:1px solid #666;}
</code></pre>
<p>Première constatation : ça fonctionne sur la plupart des navigateurs (IE6, IE7, Opera, Safari) mais pas sur les versions de Firefox antérieures à Firefox 3&#8230;</p>
<p>On ajoute alors la propriété <em>display:-moz-inline-box;</em> pour Firefox 2 et les versions antérieures, mais attention, il faut la placer avant <em>display:inline-block</em>, sinon ça ne fonctionne plus pour Internet Explorer et Firefox prend en compte <em>display:-moz-inline-box;</em> au lieu de prendre en compte <em>display:inline-block</em>.</p>
<pre><code class="prettyprint">
#inscription fieldset{border:none;}
#inscription label{<strong>display:-moz-inline-box;</strong>display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}</code></pre>
<p>Dans certains cas j&rsquo;ai constaté des problème de layout avec Internet Explorer, dans ce cas ajouter la propriété <em>display:inline</em> dans une déclaration séparée :</p>
<pre><code class="prettyprint">
#inscription fieldset{border:none;}
#inscription label{display:-moz-inline-box;display:inline-block;padding:5px 0 0;width:150px;font-weight:bold;}
#inscription input{border:1px solid #666;}
<strong>#IE #inscription label,
#IE #inscription .input-submit{display:inline;}</strong></code></pre>
<p>On obtient le résultat suivant, un formulaire structuré sans tableau, sans éléments flottant ou positionnés en dehors du flux html :<br />
<a href="/demos/css/inline_block.html"><img loading="lazy" class="align left size-full wp-image-66" title="form-inline-block" src="/wp-content/uploads/2008/06/form-inline-block.png" alt="Formulaire en inline-block" width="343" height="181" srcset="/wp-content/uploads/2008/06/form-inline-block.png 343w, /wp-content/uploads/2008/06/form-inline-block-300x158.png 300w" sizes="(max-width: 343px) 100vw, 343px" /></a></p>
<p>Seule limitation constatée, les éléments mis en <em>inline-block</em> dans Firefox se comporte comme ayant une propriété <em>white-space:nowrap</em> appliquée, il n&rsquo;est pas possible d&rsquo;avoir des textes sur plusieurs lignes&#8230;</p>
]]></content:encoded>
					
					<wfw:commentRss>/2008/06/18/utiliser-la-propriete-displayinline-block/feed/</wfw:commentRss>
			<slash:comments>11</slash:comments>
		
		
			</item>
	</channel>
</rss>
