Résolu J'aimerais avoir une taille définie responsive

Statut
N'est pas ouverte pour d'autres réponses.
W

Whyotest

Premium
Inscription
3 Avril 2015
Messages
18
Réactions
26
Points
801
Hello,
J'ai une sorte de "pricing box" html & css avec bootstrap:

GSrGN38.png



Sauf, que lorsque je mets plusieurs box comme-celles-ci avec un nombre de caractère différents, les dimensions de la box changent:

fzVZHy6.png



Si je modifie les classes pour que les box ont des dimensionnions précises, ça marche, mais ce n'est pas responsive, et moi j'aurais voulu que ça soit responsive !


Avez-vous donc une idée pour que ça fonctionne?


Je vous laisse le code:

HTML: 
              <!-- Modern Warfare -->
    <br>
                <div class="col-sm-4">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img src="http://i.imgur.com/DwX79DT.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Nom de clan non-assigné</p>
                                    <p>• Unlock-all (accessoires...)</p>
                                    <p>• Infection (promod, wallhack...)</p>
                                    <p>• ModMenu pendant le lobby</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                       
                       
                        <!-- Advanced Warfare -->
                <div class="col-sm-4">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img  src="http://i.imgur.com/mSHibL4.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Unlock-all(défis, camouflages...)</p>
                                    <p>• Médailles + stats armes au choix</p>
                                    <p>• Personnage Zombie</p>
                                    <p>• Statistiques au choix en ligue</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Merci !
 
Trier par date Trier par votes
LD Capitaliste

LD Capitaliste

Membre
Inscription
6 Mai 2015
Messages
282
Réactions
77
Points
9 006
Mdr j'suis trop perdu dans ma tête j'ai cru que c'était un problème de width mec fait comme Tropik à dis met un max-height. Tropix le problème c'est qu'il veut que l'height des deux élements soit le même, mais soit mettre un bête height=*** pour que ça reste responsive.
 
Voter positivement 0 Voter négativement
Whyouuu

Whyouuu

Ancien staff
Inscription
27 Septembre 2012
Messages
16 783
Réactions
7 251
Points
24 155
(c'est mon compte secondaire, j'ai fais le topic pour test)
TheDefunt1802 a dit:
Montre le css s'il te plait aussi. Et essaie de mettre un id à ton div aussi en plus de la class="col-sm-4" et à cet id donne un max-width que tu souhaite.
Cliquez pour agrandir...
C'est boostrap.css, comme ça:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Vous pouvez essayer par vous-même en entrant l'HTML & le CSS ici:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

TheDefunt1802 a dit:
Mdr j'suis trop perdu dans ma tête j'ai cru que c'était un problème de width mec fait comme Tropik à dis met un max-height. Tropix le problème c'est qu'il veut que l'height des deux élements soit le même, mais soit mettre un bête height=*** pour que ça reste responsive.
Cliquez pour agrandir...
Exact, si je met une hauteur ou largeur définie, ça marche mais pas responsive :(
 
Voter positivement 0 Voter négativement
LD Capitaliste

LD Capitaliste

Membre
Inscription
6 Mai 2015
Messages
282
Réactions
77
Points
9 006
Donc voilà tu donne une class en plus de cette déjà mise au deux éléments
HTML: 
         <!-- Modern Warfare -->
    <br>
                <div class="col-sm-4" class="lobby">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img src="http://i.imgur.com/DwX79DT.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Nom de clan non-assigné</p>
                                    <p>• Unlock-all (accessoires...)</p>
                                    <p>• Infection (promod, wallhack...)</p>
                                    <p>• ModMenu pendant le lobby</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                      
                      
                        <!-- Advanced Warfare -->
                <div class="col-sm-4" class="lobby">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img  src="http://i.imgur.com/mSHibL4.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Unlock-all(défis, camouflages...)</p>
                                    <p>• Médailles + stats armes au choix</p>
                                    <p>• Personnage Zombie</p>
                                    <p>• Statistiques au choix en ligue</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Ensuite tu crées un fichier css en plus que tu ajoute à la page et dans ce fichier css tu va mettre : .lobby { max-height: **; } Le max-height sera la height de ton premier élement.
 
Voter positivement 0 Voter négativement
Tropik

Tropik

Membre
Inscription
9 Janvier 2013
Messages
80
Réactions
19
Points
6 913
Je me permet d'essayer d'aider même si je suis loin d'être un programmeur :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Si tu mets ton max-height dans .panel-default et qu'en suite tu mets un overflow:scroll sur le texte, ça peut l'faire non? Tu gardes des dimensions acceptables comme ça
 
Voter positivement 0 Voter négativement
Whyouuu

Whyouuu

Ancien staff
Inscription
27 Septembre 2012
Messages
16 783
Réactions
7 251
Points
24 155
Tropik a dit:
Je me permet d'essayer d'aider même si je suis loin d'être un programmeur :

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Si tu mets ton max-height dans .panel-default et qu'en suite tu mets un overflow:scroll sur le texte, ça peut l'faire non? Tu gardes des dimensions acceptables comme ça
Cliquez pour agrandir...
Rien ne change :(
TheDefunt1802 a dit:
Donc voilà tu donne une class en plus de cette déjà mise au deux éléments
HTML: 
         <!-- Modern Warfare -->
    <br>
                <div class="col-sm-4" class="lobby">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img src="http://i.imgur.com/DwX79DT.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Nom de clan non-assigné</p>
                                    <p>• Unlock-all (accessoires...)</p>
                                    <p>• Infection (promod, wallhack...)</p>
                                    <p>• ModMenu pendant le lobby</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                   
                   
                        <!-- Advanced Warfare -->
                <div class="col-sm-4" class="lobby">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img  src="http://i.imgur.com/mSHibL4.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Unlock-all(défis, camouflages...)</p>
                                    <p>• Médailles + stats armes au choix</p>
                                    <p>• Personnage Zombie</p>
                                    <p>• Statistiques au choix en ligue</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Ensuite tu crées un fichier css en plus que tu ajoute à la page et dans ce fichier css tu va mettre : .lobby { max-height: **; } Le max-height sera la height de ton premier élement.
Cliquez pour agrandir...
ça fait rien, la taille ne change pas :mmh:


EDIT: Si je modifie la le .panel-defaut, voici ce que j'ai:

Vnx2frB.png



Qui est responsive :D

Mais j'arrive pas à le faire pour la totalité :(
 
Dernière édition:
Voter positivement 0 Voter négativement
Whyouuu

Whyouuu

Ancien staff
Inscription
27 Septembre 2012
Messages
16 783
Réactions
7 251
Points
24 155
ça marche bizarement et ça fait bugger le responsive. :mmh:

Tu peux essayer en live toi comme ça:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

C'est pratique si tu veux tester toi-même au lieu de passer par moi :)
 
Voter positivement 0 Voter négativement
Whyouuu

Whyouuu

Ancien staff
Inscription
27 Septembre 2012
Messages
16 783
Réactions
7 251
Points
24 155
vGraazi ☺ a dit:
*///// Suite à mon erreur, je te conseille d'utiliser des Thumnails:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


C'est beaucoup plus simple et responsive, peu importe la taille.
Cliquez pour agrandir...
J'arrive pas moi, essaye de le faire toi à la limite si tu sais comment ça marche ^^"

vGraazi ☺ a dit:
*///// Suite à mon erreur, je te conseille d'utiliser des Thumnails:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


C'est beaucoup plus simple et responsive, peu importe la taille.
Cliquez pour agrandir...
ça ne correspond pas tellement à ce que j'aimerais :(

11e0f5a5882752d7cdcd7f1a9a3142d3.png
 
Dernière édition:
Voter positivement 0 Voter négativement
P

Petrouchka

??
Premium
Inscription
16 Février 2015
Messages
2 078
Réactions
727
Points
10 761
Why a dit:
Hello,
J'ai une sorte de "pricing box" html & css avec bootstrap:

GSrGN38.png



Sauf, que lorsque je mets plusieurs box comme-celles-ci avec un nombre de caractère différents, les dimensions de la box changent:

fzVZHy6.png



Si je modifie les classes pour que les box ont des dimensionnions précises, ça marche, mais ce n'est pas responsive, et moi j'aurais voulu que ça soit responsive !


Avez-vous donc une idée pour que ça fonctionne?


Je vous laisse le code:

HTML: 
              <!-- Modern Warfare -->
    <br>
                <div class="col-sm-4">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img src="http://i.imgur.com/DwX79DT.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Nom de clan non-assigné</p>
                                    <p>• Unlock-all (accessoires...)</p>
                                    <p>• Infection (promod, wallhack...)</p>
                                    <p>• ModMenu pendant le lobby</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                      
                      
                        <!-- Advanced Warfare -->
                <div class="col-sm-4">
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <div class="panel panel-default slideInLeft animate">
                                <div class="panel-heading">
                                  <img  src="http://i.imgur.com/mSHibL4.png" class="wow bounceIn text-primary img-responsive" data-wow-delay=".1s"></img></div>
                                <div class="panel-body">
                                    <p>• Prestige au choix</p>
                                    <p>• Niveau au choix</p>
                                    <p>• Statistiques au choix</p>
                                    <p>• Unlock-all(défis, camouflages...)</p>
                                    <p>• Médailles + stats armes au choix</p>
                                    <p>• Personnage Zombie</p>
                                    <p>• Statistiques au choix en ligue</p>
                                    <hr>COMMANDER
                                    <hr>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Merci !
Cliquez pour agrandir...

Bien joué
 
Voter positivement 0 Voter négativement
Statut
N'est pas ouverte pour d'autres réponses.
Haut