28234 sujets

CSS et mise en forme, CSS3

Contexte de formatage block

J'ai une page -http://www.xcelcam.com/FR/accessoires/support-fixation.html
dans les bloc 3 et 4 on voit le texte passer sous l'image. On me demande de faire en sorte que tout le texte soit aligné. J'ai lu l'article de Raphael sur le contexte de formatage, il ma été bien utile sur mon autre site, mais cette pas j'ignore pourquoi je n'arrive pas à reproduire cette effet...

Quelqu'un peu m'aider?
Arf! J'ai eu une distraction en même temps que j'écrivais mon message!

Voilà:
code html racourci
<section class="select">
	<article class="popup" id="XHD-CAM3">
		<h1><img width="100" alt="" src="/images/products/installation/XHD-CAM3.png">
            	Fixation adhésive incurvée</h1>
		<p>Fixations adhésive incurvée pour le support amovible</p>
		<p>Inclus 3 fixations adhésives incurvées</p>
		<div class="descr">
            		<a aria-hidden="true" title="fermer" class="right close ico_close"><span class="visuallyhidden">fermer</span></a>
			<h2>Fixation adhésive incurvée</h2>
                	<div>
				<img alt="" src="/images/products/installation/XHD-CAM3_inst.png">
                 	</div>
                	<div class="texte">
                		<p>Fixations adhésive incurvée pour le support amovible</p><p>Inclus 3 fixations adhésives incurvées</p>
				<h3>Installation:</h3>
				<ol>
					<li>Retirer la pellicule et coller la fixation sur une surface incurvée (casque)</li>
					<li>Glisser le support amovible sur la fixation adhésive incurvée</li>
				</ol>
				<p class="clear">* Compatible avec le support amovible <span class="mc">XCEL</span></p>
                		<p>(#XHD-CAM3)</p>
			</div>
		</div>
	</article>
	<article class="popup" id="XHD-FAM3">
		<h1><img width="100" alt="" src="/images/products/installation/XHD-FAM3.png">
            	Fixation adhésive plate</h1>
		<p>Fixations adhésive incurvée pour le support amovible </p>
		<p>Inclus 3 fixations adhésives plates</p>
		<div class="descr">
            		<a aria-hidden="true" title="fermer" class="right close ico_close"><span class="visuallyhidden">fermer</span></a>
			<h2>Fixation adhésive plate</h2>
                	<div>
				<img alt="" src="/images/products/installation/XHD-FAM3_inst.png">
                    	</div>
                	<div class="texte">
                		<p>Fixations adhésive incurvée pour le support amovible </p><p>Inclus 3 fixations adhésives plates</p>
				<h3>Installation:</h3>
				<ol>
					<li>Retirer la pellicule et coller la fixation sur une surface plane</li>
					<li>Glisser le support amovible sur la fixation adhésive plate</li>
				</ol>
				<p class="clear">* Compatible avec le support amovible <span class="mc">XCEL</span></p>
				<p>(#XHD-FAM3)</p>
			</div>
		</div>
	</article>
</section>

css, raccourci aussi:

.select{position: relative;}
.popup .descr{
    background-color: #F4F4F4;
    border: 1px solid #F78E1E;
	cursor: pointer;
    margin: 0;
    overflow: auto;
    padding: 20px;
    position: fixed;
    top: 50%;
	left: 50%;
    z-index: 900;
	max-height: 75%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 60%;
}
	#IE8 .popup .descr{
		margin-left: -25%;
  		margin-top: -25%;
	}
.popup .descr div{
	display: inline-block;
	vertical-align: top;
}
a.close{
	cursor: pointer;
    margin: -15px -15px 0 0;
}
.popup .descr img {
	max-height: 280px;
	max-width: 100%;
}
.popup a.lien {width: auto;}
#accessoires section{
	background-color: rgba(244,244,244,0.7);
	margin-bottom: 20px;
	padding: 20px 20px 0;
}
#accessoires article{
	display: inline-block;
	padding: 0;
	vertical-align: top;
	cursor: pointer;
}
#accessoires article h1, #accessoires section.autres h1{
	text-align: left;
	font-size: 1em;
	padding: 0;
}
#accessoires article h1{margin-top: 0;}
#accessoires article h1, #accessoires article h2{ color:#F78E1E;}
#accessoires article:hover h1{ color: #F78E1E;}
#accessoires article h2, #accessoires article h3{font-weight: bold;}
#accessoires article h2{
	font-size: 1em;
	margin-top: 0;
}
#accessoires article h3{
	font-size: 0.8em;
	text-align: left;
}
#accessoires article img{
	display: block;
	float: left;
	margin: 0 3% 3% 0;
	vertical-align: top;
}
#accessoires article{
	padding: 0 15px 20px 0;
	width: 49%;
}
#accessoires article:nth-child(2n+2){
	padding-right: 0;
	padding-left: 15px;
}
#accessoires article .descr img.exception{width: 45%;}
#accessoires article .descr img{
	margin: 0 3% 3% 0;
	max-height: 280px;
	max-width: 100%;
}
#accessoires article ol{
	margin: 0 0 8px 0;
	padding-left: 20px;
}
#accessoires article p{
	margin: 0 0 5px;
}
Sujet clos
Aller à