Sujet Précédent Sujet Suivant

Deux cadre cote à cote

Résolu/Fermé
varalax Messages postés 61 Date d'inscription mercredi 30 avril 2014 Statut Membre Dernière intervention 28 juillet 2016 - 9 mai 2014 à 11:20
varalax Messages postés 61 Date d'inscription mercredi 30 avril 2014 Statut Membre Dernière intervention 28 juillet 2016 - 9 mai 2014 à 15:57
Bonjour,

Petit soucis du jour, j'ai deux cadres un à gauche, un autre à droite. Ils sont bien espacés tout va bien seulement probleme, lorsque je réduis ma page internet, le cadre de droite vient caché le cadre de gauche. Moi je veux que le cadre de droite reste à sa place!!

Comment faire svp?

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
9 mai 2014 à 13:58
il doit y en avoir un en position fixed ou absolute et l'autre sans position ou bien en relative

donc soit tu mets les 2 cadres en display inline-block et position relative
(il passera en dessous quand la page se reduit)

soit tu mets un min-width a body mais ce ne sera pas responsive
(un scroll horizontal apparaitra)
0
Réponse 2 / 2
varalax Messages postés 61 Date d'inscription mercredi 30 avril 2014 Statut Membre Dernière intervention 28 juillet 2016
9 mai 2014 à 14:19
Salut alors ta première solution reste je le pense la meilleure car je souhaite qu'il reste responsive mais le probleme c'est que mes cadres dans ce cas ne sont jamais l'un en face de l'autre. Je te montre mon code css au cas ou ça aiderait:

.cadre1
{
display:inline-block;
position:relative;
padding:0.5em;
border: 3px solid;
border-radius: 10px;
margin-top:3%;
margin-left:15%;
margin-right:50%;
background-color: rgb(138,194,230);
color: white;
float:left;

}


.cadre2
{
display:inline-block;
position:relative;
padding:0.5em;
border: 3px solid;
border-radius: 10px;
margin-top:3%;
margin-right:25%;
margin-left: 40%;
background-color: rgb(0,96,169);
color: white;
float:left;
}
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 9/05/2014 à 14:37
met un width a tes cadres et il faut que le total des width et des margin left et right et des borders soient inférieurs a 100% sans oublier le white space inhérent au inline-block (environ 4px entre chaque bloc)

la rien qu'en margin tu as 130%.donc des margins supérieurs au width d'un page !

en général avec un inline-block on peux mettre un width en % et un min-width en px

dernier truc retire float left c'est soit inline-block soit float mais pas les 2
0
varalax Messages postés 61 Date d'inscription mercredi 30 avril 2014 Statut Membre Dernière intervention 28 juillet 2016
9 mai 2014 à 15:11
Dac merci je vais tester tout ça!
0
varalax Messages postés 61 Date d'inscription mercredi 30 avril 2014 Statut Membre Dernière intervention 28 juillet 2016
9 mai 2014 à 15:52
Super ça marche nikel!! ;) Juste hum désolé d'abuser de ton temps mais je voudrais que mes cadres soient de la même taille parce que y en a un qui a plus de contenu que l'autre
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
9 mai 2014 à 15:56
tu mets le meme width et ou height aux 2 cadres si tu veux qu'ils aient la meme taile
ou mieux tu en fait 2 qui ont la meme class donc un seul element css au lieu de 2
voila tu peux mettre en résolu
0
varalax Messages postés 61 Date d'inscription mercredi 30 avril 2014 Statut Membre Dernière intervention 28 juillet 2016
9 mai 2014 à 15:57
Ok merci a+
0

Discussions similaires

A quoi correspond cette croix sur snapchat
Sbnet -
Lili -

6 réponses
Aligner 2 photos côte à côte...
Dri80 -
tkyt -

10 réponses
J'ai oublier mon code mtn momo svp aidé moi a le debloquer
88878597 -
Mambayeconte -

2 réponses
Parametres de réglage de parabole en COTE D'IVOIRE
totoroger -
Andy31200 -

3 réponses
Comment débloquer mon compte MTN mobile money
44527293 -
jmarion3 -

1 réponse