Bonjour à tous et à toutes,

suite à une précédente question, j'ai su comment coder des vignette : http://codepen.io/EmmanuelB/pen/XJJBrw

Seulement j'ai une image de 350 px sur 350 px, le code (avec quelques modififications) marche parfaitement avec mon éditeur de texte Brackets.

Cependant le cadre ne s'adapte pas avec Joomla et Gantry 5 (exemple).

Voilà comment j'ai intéger le code sur joomla :

-ajout du code html après la création d'un module; contenu personnalisé

-ajout du code css dans le custom css de Gantry 5

Je suis perdu, voici le code que j'ai inclus :

-html 

<div class="box">
<div class="box__content"><img class="box__image" src="images/vignette/vignette_350px.png" alt="" /></div>
<div class="box__caption">
<div class="box__title"><img class="box__icon" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/128/XBox_360.png" alt="" /> Mob Ruled</div>
<div class="box__description"><strong>T-Bone:</strong> Complete 20 Chicago South Club contracts</div>
</div>
</div>
<div> </div>

-css

body {
    background: #0e0e0e;
    font: 400 16px/1.5em "Segoe Ui", Arial, sans-serif;
}
 
.box {
    width: 350px;
    margin: 60px auto;
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
}
 
.box__image {
    display: block;
}
 
.box__icon {
display: inline-block;
vertical-align: bottom;
height: 40px;
margin-right: 5px;
}
 
.box__caption {
    position: absolute;
    color: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    top: 270px;
    background: rgba(0,0,0,.7);
    transition: top .4s ease-in-out;
}
 
.box__title {
font-size: 3em;
font-weight: 100;
line-height: 1;
padding: 20px;
}
 
.box__description {
    position: absolute;
    padding: 20px 0;
    border-top: 1px solid #fff;
    left: 20px;
    right: 20px;
}
 
.box:hover .box__caption {
    top: 0;
    transition: top .3s ease-in-out;
}

Pour conclure, ma question est comment adapter le cadre à l'image ?

J'espère avoir été le plus clair possible, je vous remercie d'avance pour l'aide que vous allez m'apporter.

-
Edité par Fatavis 31 janvier 2016 à 14:48:39

Personne pour m'aider ?

Salut,

il y a un width fixe sur ton cadre, enlève-le :

.box {
    border: 4px solid #fff;
    margin: 60px auto;
    overflow: hidden;
    position: relative;
    width: 636px;
}

Ensuite, mets lui display:inline-block pour qu'il prenne juste la largeur de son contenu.

Le code css devient celui ci alors ?

body {
    background: #0e0e0e;
    font: 400 16px/1.5em "Segoe Ui", Arial, sans-serif;
}
 
.box {
   display:inline-block; 
    margin: 60px auto;
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
}
 
.box__image {
    display: block;
}
 
.box__icon {
display: inline-block;
vertical-align: bottom;
height: 40px;
margin-right: 5px;
}
 
.box__caption {
    position: absolute;
    color: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    top: 270px;
    background: rgba(0,0,0,.7);
    transition: top .4s ease-in-out;
}
 
.box__title {
font-size: 3em;
font-weight: 100;
line-height: 1;
padding: 20px;
}
 
.box__description {
    position: absolute;
    padding: 20px 0;
    border-top: 1px solid #fff;
    left: 20px;
    right: 20px;
}
 
.box:hover .box__caption {
    top: 0;
    transition: top .3s ease-in-out;
}

Car cela ne fonctionne pas, http://suprajeu.com/

Mais merci de me venir en aide, j'étais désespéré 

ça fonctionne quand je teste ton site en direct.
Et je ne vois pas pour l'instant tes mises à jour, j'ai toujours width: 636px sur box.

Tu as un cache sur ton site ou chez ton hébergeur ?

Autrement oui, c'est ce qu'il faut faire dans la CSS.

-
Edité par Frogweb 1 février 2016 à 18:19:43

Quelle version tu as de Joomla ?

Pour ton info : https://fr.wikipedia.org/wiki/Cache_web

Edit : tu peux me dire où tu as mis le code CSS que tu nous montre plus haut ?
Parce que si je regarde le code source de la page, je trouve ça (entre autres) :

.box {
	width: 636px;
	margin: 60px auto;
	position: relative;
	overflow: hidden;
	border: 4px solid #fff;
}

donc directement dans le code html.
Si toi tu fais tes modifs dans le fichiers CSS, ça ne va forcément pas fonctionner...

-
Edité par Frogweb 1 février 2016 à 19:40:14

Tu vas mettre un petit commentaire dans le custom CSS de gantry.
Juste pour voir si c'est lui qui mets du code dans le html.

Mets juste ça avant la CSS de .box :

/*** code css gantry ***/

-
Edité par Fatavis 2 février 2016 à 8:12:54

Et on ne le vois pas, ça veux dire que ton code est écrasé par celui qui se trouve dans le code html (ce qui est normal).

Tu va essayer deux choses.

D'abord, dans ton template, tu vas ouvrir le fichier index.php.

Si tu vois ce code :

.box {
	width: 636px;
	margin: 60px auto;
	position: relative;
	overflow: hidden;
	border: 4px solid #fff;
}

mets le en commentaire comme ça :

/***
.box {
	width: 636px;
	margin: 60px auto;
	position: relative;
	overflow: hidden;
	border: 4px solid #fff;
}
***/

si ça ne fonctionne toujours pas on passe à une autre solution plus bourrin.

Dans la CSS de gantry ou celle du template tu mets ce code :

.box {
    display:inline-block!important;
    width:auto!important;
    margin: 60px auto;
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
}

Et dans l'index.php il y avait ce code ? :

.box {
    width: 636px;
    margin: 60px auto;
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
}

 Si c'est le cas ou même si ce n'est pas le cas mets ce code :

.custom .box {
    display:inline-block!important;
    width:auto!important;
    margin: 60px auto;
    position: relative;
    overflow: hidden;
    border: 4px solid #fff;
}

autre chose à faire, vider le cache de Joomla.
Dans l'interface tu vas dans système > purger le cache.
Tu sélectionnes tout et tu clique sur "supprimer" (en haut à gauche).

Une autre chose à faire, te renseigner auprès de ton hébergeur pour savoir si il utilise un système de cache serveur.

On va y arriver à force, je lâche pas l'affaire

Là où ça serait vraiment problèmatique c'est que ce code CSS soit intégrer avec un JS...

-
Edité par Frogweb 2 février 2016 à 20:23:34

-
Edité par Fatavis 5 février 2016 à 9:51:49