Créer un style à partir d'un autre

Version imprimable

bonjour,

J'utilise le style 'well' de bootstrap pour encadrer des news. Les news sont encadrer avec un fond gris et les coins arrondis.

Mon document html ressemble à peu près à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> <body> <div class="row"> <div class="span6"> <div class="well"> Corps de ma news 1.... </div> </div> <div class="span6"> <div class="well"> Corps de ma news 2.... </div> </div> </div> <div class="row"> <div class="span6"> <div class="well"> Corps de ma news 3.... </div> </div> <div class="span6"> <div class="well"> Corps de ma news 4.... </div> </div> </div> </body> </html>
J'affiche donc 2 news par 'row' de largeur 'span6'. Cependant la hauteur des news dans une même 'row' n'est pas toujours la même.

Je voulais rajouter un attribut 'height: 100%' pour que 2 news côte à côte dans une même row fasse la même hauteur.

Je ne veux pas toucher à la class well de bootstrap. J'ai essayé de créer une nouvelle class :
Code:

1 2 3 4 .well-news { background-color: blue; height: 100%; }
et de l'appeler en plus de 'well' :
Code:

1 2 3 <div class="well well-news"> Corps de ma news 4.... </div>
Mais ma div n'est pas bleu et ne fais pas 100% de la hauteur.

Comment puis-je rajouter l'attribut height à well, et de façon général comment personnaliser un class existante ?

merci

11/02/2013, 14h23
NoSmoking

Bonjour,
difficile de répondre sans voir le CSS associé.

Regarde peut être du coté de display:table et autres table-cell, table-row
11/02/2013, 14h30
narmataru

J'ai vraiment dû mal m'exprimer car je ne comprends pas ta réponse :aie:

J'utilise le projet bootstrap de twitter qui me fourni un fichier bootstrap.css avec plein de classes dedans. J'utilise row et spanX pour positionner des div contenant des news. Ces news sont affiché dans une div de classe 'well'. Les classes row, spanX et well sont des classes fournies par bootstrap.

Je voudrais personnaliser la class well sans toucher au fichier bootstrap.css, est-ce possible ?

Est-ce possible de créer une classe 'well2' (dans monfichier.css) qui se baserait sur 'well' et dans laquelle je pourrais personnalise des attributs css ?

merci
16/02/2013, 06h21
Dr.Who
il suffit de faire :
Code:

1 2 3 4 .well-news { background-color: blue !important; height: 100% !important; }
pour forcer ces définitions à l'affichage.

ou même encore sur le même principe, surcharger .news directement, si quelque chose ne s'affiche pas selon le souhait -> "!important" et hop.
16/02/2013, 06h50
NoSmoking
d'un autre coté, ne mettre que des !important revient à faire du CSS approximatif.

Autant jouer avec les spécificités des sélecteurs
Code:

1 2 3 4 #mon_body .well-news { background-color: blue; height: 100%; }
16/02/2013, 15h29
Dr.Who

oui point n'en faut abuser c'est sur, on ne peux pas redéfinir tout avec ça.