En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Politique de confidentialité.
Forum - GuppY 5.0 - Vos questions - questions skins 1803 et 1804

 

actif  Sujet n° 448

le 18/09/2018 @ 15:29
par instit89

Anonyme

visiteur

Bonsoir,

En me rendant sur votre site "demoskin", j'ai pu apprécier vos éditos des skins 1803 et 1804 (images avec effet au survol).

Pourriez-vous m'indiquer comment arriver à ces résultats ?

Merci.

Poster une réponse Haut  

Réponse n° 11
--------
le 23/09/2018 @ 01:04
par JeanDenis

JeanDenis



Bonjour instit89, Bonjour Sabine,

Citation : « Sabine »

Pour le fichier styleplus, je vois que vous avez recopié l'intégralité du fichier style. C'est une mauvaise idée car ça peut créer des conflits.

Citation : « instit89 »

Je n'ai rien recopié : j'utilise une skin proposée par Jean-Denis.

J'irai même plus loin en affirmant que les fichiers style.css et styleplus.css sont très différents ! J'essaie autant que possible d'y veiller...

Bien sûr il peut rester quelques doublons qui auraient pu m'échapper... mais un simple regard sur le fichier styleplus suffisait à s'en rendre compte...

Cordialement,

Jean-Denis

Site web JeanDenis
Poster une réponse Haut  
Réponse n° 12
--------
le 23/09/2018 @ 09:19
par sabine

sabine

Administrateur


Bonjour,

Pour cette section, il faudrait réduire line-height, je pense à 305px :

#EditoBoxes .row.E0row0 .tblover a, #EditoBoxes .row.E0row0 .tblover p, #EditoBoxes .row.E0row1 .tblover a, #EditoBoxes .row.E0row1 .tblover p {
	color: #fff;
	line-height: 322px; /*hauteur de la ligne*/
}

et ici aussi (height) et les padding right et left, les réduire un peu :

#EditoBoxes .row.E0row0 .tbl, #EditoBoxes .row.E0row0 .tblover, #EditoBoxes .row.E0row1 .tbl, #EditoBoxes .row.E0row1 .tblover {
	margin: 0;
	height: 322px;
	padding-right: 50px;
	padding-left: 50px;
}

Sabine

Rectifié par sabine le 23/09/2018 @ 09:21


Rectifié par sabine le 23/09/2018 @ 09:21
Site web sabine
Poster une réponse Haut  
Réponse n° 13
--------
le 23/09/2018 @ 11:56
par instit89

Anonyme

visiteur

Bonjour Sabine,

Désolé de t'importuner encore et encore mais :

- Je n'arrive tjrs pas à coller les images : En plus les cadres de couleur au survol sont plus larges et hauts que les images (qui font 500*333)

Pour le  survol qui provoquait un décalage des boites

Ca j'ai réussi à le supprimer : ligne 193, j'ai mis line-height: 145px; (au lieu de 322) : mais du coup, le texte n'est plus centré en hauteur, je dois compenser avec des dans les boites libres

Les padding-right: 50px;    padding-left: 50px; ne servent, me semble-t-il, qu'à positionner le texte horizontalement, non ?

Cordialement.

Poster une réponse Haut  
Réponse n° 14
--------
le 23/09/2018 @ 12:28
par sabine

sabine

Administrateur


Voilà, j'ai trouvé ! Il faut indiquer ceci :

#EditoBoxes {
	max-width: 1000px; /** 1 **/
	margin: auto;
}
#EditoBoxes .row.E0row0 .tbl, #EditoBoxes .row.E0row0 .tblover, #EditoBoxes .row.E0row1 .tbl, #EditoBoxes .row.E0row1 .tblover {
	margin: 0;
	height: 305px; /** 2 **/
}
#EditoBoxes .row.E0row0 .tbl a, #EditoBoxes .row.E0row0 .tbl p, #EditoBoxes .row.E0row1 .tbl a, #EditoBoxes .row.E0row1 .tbl p {
	color: transparent;
}
#EditoBoxes .row.E0row0 .tblover a, #EditoBoxes .row.E0row0 .tblover p, #EditoBoxes .row.E0row1 .tblover a, #EditoBoxes .row.E0row1 .tblover p {
	color: #fff;
	line-height: 305px; /** 2 **/
}
#EditoBoxes h5 a { /*liens images*/
	font-size: 28px;
}

** 1 ** La largeur d'une image étant 500px, pour qu'il n'y ait aucun espace entre les boîtes, la largeur de l'éditorial doit être de 1000px (2 x 500px).

** 2 ** Pour h5 (le texte des liens dans les boîtes), la taille étant de 28px et la hauteur des images étant de 333px, il faut indiquer la différence entre 28 et 333 (donc 305px) pour que l'image soit complète.

Pour les padding left et right, je ne sais plus pourquoi je les ai indiqué car ça fonctionne très bien sans !!!

J'ai fait l'essai et tout s'affiche correctement avec ces indications.

Sabine

Site web sabine
Poster une réponse Haut  
Réponse n° 15
--------
le 23/09/2018 @ 14:40
par instit89

Anonyme

visiteur

Bonsoir Sabine,

Je dois vraiment louper quelque chose...

1) max-width: 1000px;--> nickel les images se touchent verticalement.

2) En taille de police, j'ai mis font: 35px qlassik_mediumregular, Arial, Helvetica, sans-serif;

Donc 333-35=298  

#EditoBoxes .row.E0row0 .tbl, #EditoBoxes .row.E0row0 .tblover, #EditoBoxes .row.E0row1 .tbl, #EditoBoxes .row.E0row1 .tblover {
    margin: 0;
    height: 298px;
}

Avec cette valeur, les cadres ont bien la taille des images mais elles sont tronquées (elles font 308px de haut). De plus les images du haut ne touchent pas celles du bas.

Par contre avec 298px ici

#EditoBoxes .row.E0row0 .tblover a, #EditoBoxes .row.E0row0 .tblover p, #EditoBoxes .row.E0row1 .tblover a, #EditoBoxes .row.E0row1 .tblover p {
    color: #fff;
    line-height: 298px; /*hauteur de la ligne*/

J'ai le décalage au survol

Cordialement.

Poster une réponse Haut  
Réponse n° 16
--------
le 23/09/2018 @ 14:42
par instit89

Anonyme

visiteur

Des captures d'écran

cap1

cap2

Poster une réponse Haut  
Réponse n° 17
--------
le 23/09/2018 @ 17:27
par instit89

Anonyme

visiteur

Je viens de faire un essai avec les autres navigateurs (Chrome, Opera et Edge).

Les images sont toujours tronquées (307px en hauteur au lieu de 333px), celles du dessous ne touchent pas celles du dessus MAIS il n' y a pas ce souci de décalage au survol...

Bonne nuit.

Poster une réponse Haut  
Réponse n° 18
--------
le 24/09/2018 @ 13:06
par instit89

Anonyme

visiteur

Bonjour Sabine,

J'ai réinstallé Firefox : le problème au survol a disparu...

Par contre, j'ai tjrs un espace entre les images du dessus et celles du dessous...

Aurais-tu une idée ?

Merci.

Poster une réponse Haut  
Réponse n° 19
--------
le 24/09/2018 @ 13:09
par sabine

sabine

Administrateur


Bonjour,

Je suis à court d'idées... Dernière possibilité : dans Config Accueil, est-ce que les boîtes sont l'une en-dessous de l'autre (pas de ligne vide entre les 2) ?

Sabine

Site web sabine
Poster une réponse Haut  
Réponse n° 20
--------
le 24/09/2018 @ 17:19
par instit89

Anonyme

visiteur

Bonsoir,

Non pas de ligne vide...

Ne s'agirait-il pas d'une histoire de margin (ou padding) à rajouter entre les boites ?

Cordialement.

Poster une réponse Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum  



Vous êtes ici :   Accueil » Forum » GuppY 5.0 » Vos questions » questions skins 1803 et 1804