28172 sujets

CSS et mise en forme, CSS3

Span tout, mais faut écouter

Salut,

j'ai un léger soucis avec l'alignement d'un texte à l'intérieur d'une table. Il semblerait que les <span> ne veuillent pas m'écouter (les méchants) ! C'est en bas de page, le bloc pour rassurer ses clients.

site: http://www.sante-globale.fr/boutique/

Affichage désiré : http://pix.toile-libre.org/upload/original/1370606305.png

Voici le css :

#border_block {
    border-bottom: 1px solid #ECECEA;
    border-top: 1px solid #ECECEA;
    margin: 10px 0;
}
#reinsurance_block {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 4px solid #FFFFFF;
    border-top: 4px solid #FFFFFF;
    padding-top: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#reinsurance_block ul {
    list-style-type: none;
    width: 1100px;
}
#reinsurance_block li {
    color: #666666;
    float: left;
    font-size: 12px;
    text-shadow: 0 1px 0 white;
    text-transform: uppercase;
}

#reinsurance_block li span {
    float: left;
    padding: 0 20px 12px 5px;
}

#reinsurance_block .width1 li {
    width: 960px;
}
#reinsurance_block .width2 li {
    width: 470px;
}
#reinsurance_block .width3 li {
    width: 305px;
}
#reinsurance_block .width4 li {
    width: 224px;
}
#reinsurance_block .width5 li {
    width: 204px;
}
#reinsurance_block li img {
    height: 60px;
    width: 60px;
}


reinsurance_block li span hérite évidemment des propriétés de reinsurance_block li ... je vous fais pas un dessin.

Et le code ad-hoc :

!-- MODULE Block reinsurance -->
<div id="border_block">
<div id="reinsurance_block" class="clearfix">
	<ul class="width{$nbblocks}">	
		{foreach from=$infos item=info}
			<li><img src="{$module_dir}img/{$info.file_name}" alt="{$info.text|escape:html:'UTF-8'}" /> <span>{$info.text|escape:html:'UTF-8'}</span></li>
		{/foreach}
	</ul>
</div>
</div>
<!-- /MODULE Block reinsurance -->


Mais manifestement les span, qui contiennent du texte, n'écoutent pas mon float:left (par contre, ils écoutent tout le reste...). Je sèche ? :x
Modifié par cosimo (07 Jun 2013 - 14:01)
salut,

fieldset, img {vertical-align:middle}
#reinsurance_block li span {display:inline-block; width:80px}

par exemple
Zelalsan a écrit :
salut,

fieldset, img {vertical-align:middle}
#reinsurance_block li span {display:inline-block; width:80px}

par exemple


Effectivement c'est mieux ! Je n'avais pas pensé à inline-block. Par contre l'alignement vertical du texte ne semble pas fonctionner... ?
Modifié par cosimo (07 Jun 2013 - 15:14)
a écrit :
Par contre l'alignement vertical du texte ne semble pas fonctionner... ? 


fieldset, img {vertical-align:middle}

comme dit plus haut
@Manhattan

Pourquoi tu as supprimé ton message ? J'étais en train d'étudier ta solution T_T !

@Zelalsan

Le img {vertical-align: middle} est déjà dans mon css, mais il ne semble pas avoir l'effet escompté ?
Parce que je n'avais fait que détailler la réponse de Zelalsan et comme je n'aime pas m'immiscer...

Smiley smile

Mais comme j'écris toujours mes messages sur un blocnote avt de les publier, un tit copier coller et hop :


longueur max à la liste :

ul est un bloc, il prend la taille maxi par défaut. Donc pas de width pour lui.


5 éléments donc 20% chacun :

#reinsurance_block li{width:20%; display:inline-block;}
et plus de float left.


en ciblant les vieils ie avec une classe conditionnelle :
.ie67 #reinsurance_block li{zoom:1; display:inline;}


http://www.alsacreations.com/astuce/lire/988-classe-conditionnelle-ie.html

alignement vertical :
#reinsurance_block li img{vertical-align:middle;}

C'est l'image qui prend le vertical align.

#reinsurance_block li span : plus rien sauf pour gérer les espacements que tu souhaites.

Et pour supprimer le white space naturel ds le cas d'inline-block, des commentaires html entre chaque li :
http://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html

<li><img src="/boutique/modules/blockreinsurance/img/reinsurance-1-1.jpg" alt="Sélection de produits" /> <span>Sélection de produits</span></li><!--
--><li><img src="/boutique/modules/blockreinsurance/img/reinsurance-2-1.jpg" alt="Échange en magasin" /> <span>Échange en magasin</span></li><!--
-->etc...

Modifié par Manhattan (07 Jun 2013 - 18:14)
@cosimo> tes img sont en "vertical-align:bottom", un coup d'oeil avec firebug ou la console de ton navigateur et tu verras.

@Manhattan> tu ne t'immisces pas Smiley biggrin Smiley biggrin en plus c'est bien expliqué.

EDIT: mon 100e message Smiley birthday
Modifié par Zelalsan (07 Jun 2013 - 18:54)
Sujet clos
Aller à