Créer un style à partir d'un autre

**narmataru** · 11/02/2013, 10h42

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.well-news {
	background-color: blue;
	height: 100%;
}

et de l'appeler en plus de 'well' :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 11/02/2013, 14h23

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

Regarde peut être du coté de display:table et autres table-cell, table-row

**narmataru** · 11/02/2013, 14h30

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

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

**Dr.Who** · 16/02/2013, 06h21

il suffit de faire :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 16/02/2013, 06h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#mon_body .well-news {
  background-color: blue;
  height: 100%;
}

**Dr.Who** · 16/02/2013, 15h29

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

Créer un style à partir d'un autre

CSS

Vue hybride

Discussions similaires

Partager

Partager