Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Mise en page de vos pages > Insérer un css

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

Insérer un css

Répondre
La question
Posté le 3 Septembre à 14:55
canvas

363 messages
Inscrit le 17/1/2008
Bonjour,
J'ai déjà inséré des codes en iframe, css...
Et là je souhaiterai intégrer un css sur une page html mais je ne comprends pas pourquoi cette fois ci je n'y arrive pas.
Je m'explique.
Je souhaite ajouter un texte qui apparait de la gauche ou de la droite sur une image comme on peut le voir sur ce site: http://css-workshop.com/hover-box-tex [...] and-more/

J'ai donc testé les codes tel quel mais l'effet ne fonctionne pas. J'ai changer le code css avec l'aide de quelqu'un car en cliquant sur examiner l'élément il y avait d'autres lignes de code:
   SCRIPT

.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_image {
padding: 0;
background: none;
}
.hvrbox .hvrbox-layer_slideleft {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.hvrbox:hover .hvrbox-layer_slideleft,
.hvrbox.active .hvrbox-layer_slideleft {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}


j'ai donc inséré ce code sur une page css et j'ai incrusté le "link" sur le head de ma page.
Mais cela ne fonctionne pas et je ne comprends pas.
Vous pouvez voir le rendu sur cette page test : http://galerie-dessein.wifeo.com/test-menu.php
et le texte apparait en dessous de l'image et non sur l'image avec un effet vers la gauche.
J'aimerai comprendre mon erreur... un grand merci à qui voudra bien m'expliquer ce que je ne fais pas correctement.

canvas

Voir mon site

 
Navigateur utilisé : Firefox

 
Posté le 4 Septembre à 11:07
gabriel-support

Bonjour,

Je vois un certain nombre de feuilles de style CSS dans le HEAD de cette page.

Comment s'appelle le fichier de la feuille de style en question ?

 
Navigateur utilisé : Chrome

- Réagissez à l'actu de Wifeo : facebook.com/wifeo
- Suivez l'actu de Wifeo : twitter.com/wifeo_news


 
Posté le 4 Septembre à 11:56
canvas

363 messages
Inscrit le 17/1/2008
Bonjour Gabriel,

Effectivement, pardon j'ai oublié de le mentionner: il s'agit de 975_test-texte-slide_




J'ai fait un autre test sur cette page http://galerie-dessein.wifeo.com/test [...] image.php avec le css:976_test-texte-sur-image et celui-ci fonctionne (bien sûr je dois effectuer des modifications). par contre en insérant le <link>
dans le head , mon menu disparait... bref... en cours d'apprentissage !)

Néanmoins, j'aimerai réussir à intégrer le 1er code css:975 test texte slide dans ma page http://galerie-dessein.wifeo.com/test-menu.php

merci de votre aide

canvas

 
Navigateur utilisé : Firefox
 
Posté le 4 Septembre à 14:53
Re bonjour Gabriel,

A force de persévérance, je suis parvenue à insérer cet effet sur mes images contact et défiscalisation.
Il y a encore des retouche à faire au niveau centrage et police d'écriture mais j'avance!
En tout cas merci pour votre aide! C'est toujours super!)


canvas

nb: si vous avez des suggestions concernant mon code ou autre( mise en page...); n'hésitez pas, tout conseil est bon à prendre...

 
Navigateur utilisé : Firefox
 
Posté le 4 Septembre à 15:22
Pardon de revenir vers vous une nouvelle fois, j'ai crée mon code sur cette page avant de l'insérer sur mon site :
https://jsfiddle.net/85oskj0r/

mon code css et html au point, je l'ai inséré sur mon site. Mais le rendu n'est pas le même! (à ma grande surprise...)
le texte est décalé, gras, débordant sur l'extérieur...

Pourquoi une telle différence?

J'ai placé mon code sur "contact" et "defiscalisation" de ma page index.
Mon code css est: test-texte-sur-image-3

Si vous pouviez m'éclairer... Merci beaucoup

Canvas

 
Navigateur utilisé : Firefox

 
Posté le 4 Septembre à 18:59
gabriel-support

Bonsoir,

galerie-dessein/975_test-texte-slide_galerie-dessein.css est bien présent dans la page.

Du coup c'et peut-etre simplement le contenu CSS du fichier qui a un problème

 
Navigateur utilisé : Chrome

- Réagissez à l'actu de Wifeo : facebook.com/wifeo
- Suivez l'actu de Wifeo : twitter.com/wifeo_news


 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES