Décalage sur certain navigateur et selon la résolution de l'écran

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Mer 02 Juil 2014, 21:46

Coucou ♥

J'ai fait le codage de ce forum http://www.gf-pub.com/
Je vous explique le problème, je l'ai fait sur mon ordinateur portable 15 pouces, il allait très bien jusqu'à ce que des membres du staff disent avoir des décalages :/
Comment avoir pareil de partout ?


Dernière édition par Alex' ♥ le Jeu 03 Juil 2014, 15:38, édité 1 fois
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Mer 02 Juil 2014, 22:05

Il doit s'agir du décalage sur l'image en haut et en bas de vos catégories.
Remplacez
Code:
.catehead {
background: url("http://img4.hostingpics.net/pics/465185categorieshaut.png") 50% 50% no-repeat transparent;
height: 109px;
margin-left: 94px;
margin-top: 15px;
padding-top: 126px;
width: 85.5%;
}

par
Code:
.catehead {
background: url("http://img4.hostingpics.net/pics/465185categorieshaut.png") 50% 50% no-repeat transparent;
height: 109px;
margin-top: 15px;
padding-top: 126px;
}

Le visuel initial de l'index sous Opera
Décalage sur certain navigateur et selon la résolution de l'écran Sans_t17

Après, pour le reste, j'ai beau changer la résolution sur l'index;les messages....; tout est centré sous opera.

Le header semble légérement excentré vers la droite mais il s'agit d'un effet visuel lié au fait qu'une grosse partie du dessin est sur la droite. Au point de vue largeur, il est centré.



Dernière édition par demeter1 le Mer 02 Juil 2014, 22:12, édité 1 fois
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Mer 02 Juil 2014, 22:11

Merci beaucoup ♥
Mais j'ai aussi des problème avec la page d'accueil et le QEEL Sad
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Mer 02 Juil 2014, 23:13

POur le queel :
Dans le template, vous avez

Code:
 FIN Modifications par Taktiik -->
<img src="http://zupimages.net/up/14/26/cc0a.png" name="map" id="map" usemap="map"/>

vous le remplacez par

Code:
 FIN Modifications par Taktiik -->
<center>
<img src="http://zupimages.net/up/14/26/cc0a.png" name="map" id="map" usemap="map"/>
</center>

ensuite , remplacez
Code:
div.qeel {
margin-left: 200px;
}

par
Code:
div.qeel {
margin: auto;
width: 680px;
}

Pour l'accueil, là par contre , déposez le code ou le template complet avec le css associé. Avec les outils d'analyse, je vous avouerai que je m'y perd un peu.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Jeu 03 Juil 2014, 11:36

Merci (:
Voilà le code de la page d'accueil

Et le CSS
Code:
/*staff*/
div#staff {
margin-left: -128px;
}
#staff div {
background: #fff;
height: 59px;
margin: 10px;
overflow: hidden;
position: relative;
width: 59px;
}
#staff div img {
        left: 0;
        position: absolute;
        top: 0;
}

#staff div:hover img {
        transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        -webkit-transform: translateY(-60px);
}

#staff div img {
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
div#staff5 {
margin-left: 9px;
margin-top: -69px;
}
#staff5 div {
background: #fff;
height: 59px;
margin: 10px;
overflow: hidden;
position: relative;
width: 59px;
}
#staff5 div img {
        left: 0;
        position: absolute;
        top: 0;
}

#staff5 div:hover img {
        transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        -webkit-transform: translateY(-60px);
}

#staff5 div img {
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
div#staff4 {
margin-left: 149px;
margin-top: -69px;
}
#staff4 div {
background: #fff;
height: 59px;
margin: 10px;
overflow: hidden;
position: relative;
width: 59px;
}
#staff4 div img {
        left: 0;
        position: absolute;
        top: 0;
}

#staff4 div:hover img {
        transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        -webkit-transform: translateY(-60px);
}

#staff4 div img {
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
div#staff1 {
margin-left: 10px;
margin-top: -69px;
}
#staff1 div {
background: #fff;
height: 59px;
margin: 10px;
overflow: hidden;
position: relative;
width: 59px;
}
#staff1 div img {
        left: 0;
        position: absolute;
        top: 0;
}

#staff1 div:hover img {
        transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        -webkit-transform: translateY(-60px);
}

#staff1 div img {
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

div#staff2 {
margin-left: 148px;
margin-top: -69px;
}
#staff2 div {
background: #fff;
height: 59px;
margin: 10px;
overflow: hidden;
position: relative;
width: 59px;
}
#staff2 div img {
        left: 0;
        position: absolute;
        top: 0;
}

#staff2 div:hover img {
        transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        -webkit-transform: translateY(-60px);
}

#staff2 div img {
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
div#staff3 {
margin-left: -128px;
}
#staff3 div {
background: #fff;
height: 59px;
margin: 10px;
overflow: hidden;
position: relative;
width: 59px;
}
#staff3 div img {
        left: 0;
        position: absolute;
        top: 0;
}

#staff3 div:hover img {
        transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        -webkit-transform: translateY(-60px);
}

#staff3 div img {
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
}
div#staff4 {
margin-left: -128px;
}
#staff4 div {
background: #fff;
height: 59px;
margin: 10px;
overflow: hidden;
position: relative;
width: 60px;
}
#staff4 div img {
        left: 0;
        position: absolute;
        top: 0;
}

#staff4 div:hover img {
        transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        -webkit-transform: translateY(-60px);
}

#staff4 div img {
        left: 0;
        position: absolute;
        top: 0;
        transition: transform 0.5s ease-in-out;
        -moz-transition: -moz-transform 0.5s ease-in-out;
        -o-transition: -o-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

Normalement le css est déjà mis sur la Page d'Accueil Wink
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Jeu 03 Juil 2014, 13:30

Là, je vais passer la main .
Le soucis avec ce codage c'est que :
les images subissent un redimensionnement aussi bien en % qu'en pixel,
le container est mis à 85% de la taille ce qui coupe les images automatiquement et provoque un dédoublement des images en fonction de la résolution.

IL faudrait fixer la taille des images en px pour pouvoir donner une valeur exacte au container.

Personnellement, je retravaillerai les images à la bonne taille pour commencer au lieu de leur imposer une redimensionnement .
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Jeu 03 Juil 2014, 14:54

Je ne comprends pas trop, vous voulez dire que c'est à cause des images ? Comment puis-je le resoudre ? :/
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Jeu 03 Juil 2014, 15:02

Je vais vous expliquer avec un exemple.

Dans cette partie
Code:
<div style="background: url(http://zupimages.net/up/14/26/h2w0.png);
width: 35%;
height: 339px;
margin-left: -375px;">

Si vous affichez l'image par le biais de votre navigateur et, si vous cliquez sur propriétés vous verrez que la dimension réelle est de 400px de large pour 300px de haut. En gros, deux images de cette dimension prendraient la largeur totale d'un petit écran.

En rajoutant width: 35%, l'image subit un redimensionnement pour ne faire que 35% de l'image initiale et le height est diminué.

Rien que sur cet élément et en fonction de la résolution du visiteur, l'image se verra amputé d'une partie vu que le container n'autorise que 85% en affichage total.




Dernière édition par demeter1 le Jeu 03 Juil 2014, 15:09, édité 1 fois
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Jeu 03 Juil 2014, 15:07

Donc il faut mettee les même valeur ? Un width 400px et height 300px
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Jeu 03 Juil 2014, 15:14

Si on respectait la taille des images oui mais le problème c'est que deux images de cette taille prennent en surface la largeur totale d'un petit écran.

Le plus simple à mon avis serait de retravailler les images pour pouvoir imposer la taille en px et non en %. Cela permettrait de fixer la taille des images sans qu'elles subissent une déformation.

Pour imager un peu la chose, imaginons que votre image soit un ballon. Que vous enfermiez ce ballon dans une boite et que vous mettiez à gonfler ce ballon en continu dans la boite.
Que ce passe t'il : le ballon se compresse sur les bords de la boite au fur et à mesure qu'il augmente de volume.

C'est ce qui ce passe avec votre image en fonction de la résolution.




Dernière édition par demeter1 le Jeu 03 Juil 2014, 15:20, édité 1 fois
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Jeu 03 Juil 2014, 15:19

Je ne comprends pas pour je dois retravailler les images, vous voulez dire que je dois mettre un width et heught en auto et mettre la bonne largeur et hauteur sur Photoshop ?
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Jeu 03 Juil 2014, 15:23


On va retenter une explication

Deux images qui font respectivement 400px de large font 800px au total.

800px c'est la taille d'un écran de petite taille.

Si vous laissez des images de cette taille, ce ne sont pas des balles de ping-pong que vous aurez à l'écran mais deux ballons de foot qui vont prendre toute la largeur de l'écran.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Jeu 03 Juil 2014, 15:27

Donc selon vous je dois redimmrnssionner l'image sur photoshop ? Desole je suis dur à comprendre Sad
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Jeu 03 Juil 2014, 15:32

Oui
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Jeu 03 Juil 2014, 15:34

Ok, mais pour le css je dois enlever le width et le height ?
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par demeter1 Jeu 03 Juil 2014, 15:35

Non, il faudra juste exprimer la taille en px.
Si votre image fait 150px, on mettra :
Code:
width : 150px;
height : 150px;
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Décalage sur certain navigateur et selon la résolution de l'écran

Message par Alex' ♥ Jeu 03 Juil 2014, 15:37

Ok, merci, je pense que c'est resolu ♥
Alex' ♥

Alex' ♥
*

Masculin
Messages : 41
Inscrit(e) le : 21/02/2014

http://forum.sosblog.fr
Alex' ♥ a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum