Décalage sur certain navigateur et selon la résolution de l'écran
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Décalage sur certain navigateur et selon la résolution de l'écran
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 ?
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
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Il doit s'agir du décalage sur l'image en haut et en bas de vos catégories.
Remplacez
par
Le visuel initial de l'index sous Opera
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é.
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
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
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Merci beaucoup ♥
Mais j'ai aussi des problème avec la page d'accueil et le QEEL
Mais j'ai aussi des problème avec la page d'accueil et le QEEL
Re: Décalage sur certain navigateur et selon la résolution de l'écran
POur le queel :
Dans le template, vous avez
vous le remplacez par
ensuite , remplacez
par
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.
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.
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Merci (:
Voilà le code de la page d'accueil
Et le CSS
Normalement le css est déjà mis sur la Page d'Accueil
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
Re: Décalage sur certain navigateur et selon la résolution de l'écran
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 .
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 .
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Je ne comprends pas trop, vous voulez dire que c'est à cause des images ? Comment puis-je le resoudre ? :/
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Je vais vous expliquer avec un exemple.
Dans cette partie
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.
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
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Donc il faut mettee les même valeur ? Un width 400px et height 300px
Re: Décalage sur certain navigateur et selon la résolution de l'écran
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.
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
Re: Décalage sur certain navigateur et selon la résolution de l'écran
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 ?
Re: Décalage sur certain navigateur et selon la résolution de l'écran
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.
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Donc selon vous je dois redimmrnssionner l'image sur photoshop ? Desole je suis dur à comprendre
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Ok, mais pour le css je dois enlever le width et le height ?
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Non, il faudra juste exprimer la taille en px.
Si votre image fait 150px, on mettra :
Si votre image fait 150px, on mettra :
- Code:
width : 150px;
height : 150px;
Re: Décalage sur certain navigateur et selon la résolution de l'écran
Ok, merci, je pense que c'est resolu ♥
Sujets similaires
» Affichage des réponses selon navigateur
» Décalage en fonction de la résolution
» Redimentionner le background selon la résolution du visiteur
» logo qui bouge selon la résolution
» Problème de police selon le navigateur
» Décalage en fonction de la résolution
» Redimentionner le background selon la résolution du visiteur
» logo qui bouge selon la résolution
» Problème de police selon le navigateur
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum