Bonjour à tous,
Je rencontre un problème de présentation.
Je voudrais que mon texte entre mes <ul> soit bien sur 2 ou 3 lignes, et que ces lignes ne soient pas trop espacées!
J'arrive à les réduire avec line-height. Jusque là, tout va bien sauf si je veux centrer ces lignes verticalements. Si j'ajoute vertical-align:middle, j'ai tout le texte qui descend au même niveau et la moitié du texte n'est plus visible... Comment faire?
Code :
- #steps { list-style:none; width: 100%; overflow:hidden; margin:0px; padding:0px; background-color:#3F3; }
- #steps li {font-size:20px; float:left; padding:0px 5px 0px 5px; line-height:40px; color:#b0b1b3; }
- #steps li ul { width:100px; margin:0; background-color:#CCF; height:40px;}
- #steps li span {font-size:11px; line-height:11px; font-weight:bold; }
- #steps li.current { color:#000;}
- #steps li.rond {background: url(rond.jpg) no-repeat center;}
|
Extrait de mon code Java. Le texte à centrer verticalement est représenté par "name". NB: Il peut être composé de 1, 2 ou 3 lignes! :
Code :
- var name = $(this).find("legend" ).html();
- $("#steps" ).append("<li class='rond' id='stepDesc" + i + "'>" + (i + 1) + "</li>" + "<li id='stepDesc2" + i + "'><ul><span>" + name + "</span></ul></li>" );
|
Message édité par bingojm le 26-07-2010 à 21:04:04
