Discussion :

[oceane751]

Bonjour à tous!

J'ai deux problèmes en col-sm

En fait, pour les class read et profil, j'ai l'impression qu'il y a des marges ou des padding de mis

Aux lignes (de mon css, boot3.css), 291 (pour la class read), et 307 (pour la class profil), j'ai l'impression qu'on me met automatiquement des marges...

Je voudrais les décaller pour qu'elles soient bien alignées avec le caroussel

Voici mon url, vous allez voir (en col-sm) : http://vaurel.free.fr/bootstrap/test3.html

C'est plus flagrant avec les class profil
Il y a de l'espace entre elles ce qui fait que je ne peux pas les décaller comme je veux

Avez-vous une idée?

Merci d'avance !!

En attendant je continue de chercher

[NoSmoking]

Bonjour,
ce que je vois ces 5 vignettes de 16.6667% de largeur ce qui ne fait pas 100% !?!

[oceane751]

oui ok

mais si je fais ça :

Code html :

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

1
2
3
4
5
6
7
<div class="profil col-lg-2 col-md-2 col-sm-3 col-xs-12">
    <div class="image-point col-lg-11 col-md-9 col-sm-8 col-xs-6"><img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu1"></div>
    <div class="col-lg-12 col-md-10 col-sm-8 col-xs-6" >
        <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
        <p class="col-lg-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
    </div>
</div>

c'est encore pire

et avec le code d'avant, j'aurai voulu jouer avec les margin pour bien les caler
Mais impossible... il me met des marge entre chaque images et je ne sais pas pourquoi (problème de départ)

[oceane751]

même si ça ne fait pas 100%, avec

Code html :

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

<div class="profil col-lg-2 col-md-2 col-sm-2">

, je devrai pouvoir jouer avec les margin pour bien caler le tout en fonction du caroussel

En gros, l'espace avec la flèche, cf image en PJ, me pose un problème et j'aimerai bien l'enlever...

[oceane751]

Bonjour,
ce que je vois ces 5 vignettes de 16.6667% de largeur ce qui ne fait pas 100% !?!

oui ça fait environ 83%
mais si je rajoute des marges pour arriver à 100%, techniquement ça devrait le faire

donc j'ai fait :

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
29
30
31
32
33
34
35
36
 
<div class="profil col-lg-2 col-md-2 col-sm-2">
                    <div class="image-point col-lg-2 col-md-9 col-sm-11"><img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu1"></div>
                    <div class="col-lg-12 col-md-11 col-sm-11">
                        <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
                        <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
                    </div>
               </div>
                <div class="profil col-lg-2 col-md-2 col-sm-2">
                   <div class="image-point col-lg-2 col-md-9 col-sm-11"><img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu2"></div>
                    <div class="col-lg-12 col-md-11 col-sm-11">
                        <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
                        <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
                    </div>
               </div>
                <div class="profil col-lg-2 col-md-2 col-sm-2">
                    <div class="image-point col-lg-2 col-md-9 col-sm-11"><img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu3"></div>
                    <div class="col-lg-12 col-md-11 col-sm-11">
                       <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
                       <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
                   </div>
               </div>
                <div class="profil col-lg-2 col-md-2 col-sm-2">
                    <div class="image-point col-lg-2 col-md-9 col-sm-11"><img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu4"></div>
                    <div class="col-lg-12 col-md-11 col-sm-11">
                        <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
                        <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
                    </div>
                </div>
                <div class="profil_dernier col-lg-2 col-md-2 col-sm-2">
                    <div class="image-point col-lg-2 col-md-9 col-sm-11"><img src="http://www.developpez.net/forums/images/point4.jpg" alt="inconnu5"></div>
                     <div class="col-lg-12 col-md-11 col-sm-11">
                        <span class="name">Name : </span><span class="john">John Doe John doe doe</span>
                        <p class="col-lg-12 col-md-12 col-sm-12">Vbi curarum abiectis ponderibus aliis tamquam nodum et codicem difficillimum Caesarem convellere</p>
                    </div>
               </div>

Avec le CSS de la classe profil :

Code css :

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

1
2
3
4
 
.profil {
         margin-right:31px;    
    }

Mais c'est bizarre, il me manque au moins un px ou 2 sur le margin-right pour que se soit bien aligné avec le caroussel :/

[NoSmoking]

(...)il me manque au moins un px ou 2 sur le margin-right(...)

px et % ne font pas toujours bon ménage, de plus des 16.6667% ne seront pas forcément arrondi de la même façon sur tous les navigateurs, il y a bien des "morceaux" de pixel qui vont trainer .

Concernant l'espace, de ce que j'ai pu voir il est du à une multitude de classe qui se monte dessus.

- la DIV conteneur fait width: 91.6667%;.
- la DIV contenu fait width: 16.6667%;.
- l'IMG du contenu fait width: 75%;.
- la DIV du contenu fait width: 91.6667%;.
- il y en a sûrement d'autre...

Dur dur de faire au pixel prêt

[oceane751]

hey NoSmoking!

Donc ça passe alors?

Ou sinon que dois je arranger?

J'avais pensé à modifier le col-sm-3, notamment le width, en fonction de la classe profil... Mais je ne sais pas comment faire en CSS....

Merci encore

[oceane751]

Je pense que le psd que j'ai récupéré pour faire cette page n'a pas été pensé "bootstrap"
J'en ai trouvé un autre...

Mais est ce que tu connais un site bien, proposant des psd gratuits pensés "bootstrap"?

Et j'aurai une autre question, est ce qu'à l'intérieur d'une class container-fluid, on peu mettre une class container?