28234 sujets

CSS et mise en forme, CSS3

Alignement photo sur texte

Bonjour,

Je souhaiterais reproduire sur mon site, cette présentation upload/57648-modeleimag.jpg

Voici le code que j'ai utilitsé :

<div class="colm" style="width:30%;">
          <div class="frm-row spacer-t30">
              <div class="colm colm1 spacer-t5"><img src="/images/ifleche.png"></div>
              <div class="colm colm11">
		         <div class="ititre">100% RAPIDE</div>
		         <div class="isstitre">Email et visioconférence</div>
              </div>
          </div>

          <div class="frm-row spacer-t20">
              <div class="colm colm1 spacer-t5"><img src="/images/ifleche.png"></div>
              <div class="colm colm11">
		         <div class="ititre">100% SIMPLE</div>
		         <div class="isstitre">Aucune installation</div>
              </div>
          </div>

          <div class="frm-row spacer-t20">
              <div class="colm colm1 spacer-t5"><img src="/images/ifleche.png"></div>
              <div class="colm colm11">
		         <div class="ititre">100% GRATUIT</div>
		         <div class="isstitre">Pour les consommateurs</div>
              </div>
          </div>

     </div>



.smart-forms .frm-row {
	margin: 0;
}

.ititre {
	font-size: 25px;
	color: #2682c7;
}

.isstitre {
	font-size: 20px;
	color: #F39200;
}

.smart-forms .frm-row .colm1 {
	width: 8.33%;
}

.smart-forms .frm-row .colm11 {
	width: 91.66%;
}

.smart-forms .frm-row .colm {
	min-height: 1px;
	padding-left: 10px;
	padding-right: 10px;
	position: relative;
	float: left;
}

.smart-forms .spacer-t30 {
	margin-top: 20px;
}

.smart-forms .spacer-t20 {
	margin-top: 20px;
}

.smart-forms .spacer-t5 {
	margin-top: 5px;
}

smart-forms {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	line-height: 1.231;
	font-weight: 400;
	font-size: 14px;
	color: #34495E;
}


mais les pictos ne s'affichent pas sur la même ligne que le texte.
voici ce que cela fait : http://www.zoomjuridique.fr/

Merci de votre aide Smiley decu
Modérateur
Bonjour,

les dimensions de tes boites sont trop importante pour tenir cote à cote.

padding et width s'ajoutent, tu peut revoir les largeurs, enlever les padding , te servir de calc() ou très facilement modifier le modele de boite avec box-sizing si tu tiens au padding et a ne pas utilisé calc().




https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing
Modifié par gcyrillus (30 May 2016 - 16:36)
Merci pour l'aide. J'ai essayé dans mon code CSS à faire les modifications. Je n'y suis pas arrivé car je suis pas un pro de la programmation en CSS Smiley decu
Modérateur
voici un example avec inline-block au lieu de float pour un alignement vertical en réduisant quelque peu les largeurs* et :

* {
  box-sizing: border-box;
}

http://codepen.io/anon/pen/wWvNEJ

(*) reduction de largeur approximative, tu peut voir ceci : http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html pour ce qui concerne les element en inline-block.

Avec display tu as aussi 2 autres possibilité a partir du parent: table ou flex.
Sujet clos
Aller à