[Réglé] Modifier le positionnement de certains éléments avec les media queries

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.1

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !
Partager sur FacebookPartager sur TwitterPartager sur Google+

[Réglé] Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 17:49

Bonjour à tous,

J'ai un petit problème, j'aimerais modifier le positionnement de certains éléments grâce aux media queries pour la résolution 1024px seulement j'ai essayé en modifiant la page Common.css tout d'abord et comme il n'y a eu aucun changement j'ai alors modifié la page Responsive.css mais c'est la même chose :/

Les photos pour mieux comprendre:

L'affichage en 1440px
Image

L'affichage en 1024px
Image


Voici donc les éléments que j'aimerais déplacer pour que l'affichage soit correct avec la résolution 1024px
Code: Tout sélectionner
#bienvenue {
    
    padding-top: 252px;
    left: 64%;
    float:left;
    position:absolute;
    color:#412b1d;
    text-align:center;

}

#textwelcome {
   
    color:#412b1d;
    margin-top: 360px;
	left: 71%;
    float:left;
    position:absolute;
    text-align:center;
    -webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);
writing-mode: lr-tb;
display:block;

}
#quill {
   
    
    margin-top: 400px;
	left: 69%;
    float:left;
    position:absolute;
    text-align:center;
    -webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
writing-mode: lr-tb;
display:block;

}

#block {

margin-top: 5px;
left: 66%;
float:left;
position:absolute;
    height: auto;
display:block;

}

#newspaper{
    
margin-top: 300px;
margin-left:820px;
float:left;
position:absolute;
height: auto;
 -webkit-transform: rotate(370deg);
-moz-transform: rotate(370deg);
-o-transform: rotate(370deg);
writing-mode: lr-bt 

}

#owl {
   
    margin-top: 405px;
	left: 82%;
    float:left;
    position:absolute;
    text-align:center;
    color:#FFFFFF;
    font-size:20px;
    -webkit-transform: rotate(356deg);
-moz-transform: rotate(356deg);
-o-transform: rotate(356deg);
writing-mode: lr-bt ;
text-shadow: 1px 1px 5px #000000;

}
 
 #headeravatar img{
	max-height: 185px;
	margin-top: 62px;
    left: 70%;
  	position:absolute;
    float:left;
    width:auto;
    
 }
 
 #menu img {
    
    margin-top: 390px;
	left: 17%;
    position:absolute;
    display:block;
    float:left;
    
}
 
 #connexion img {
   
    margin-top: 0px;
	margin-left: 165px;
    position:absolute;
    float:left;
    display:block;

 }
  
#connexion1 {
  
	margin-top:-50px;
	padding-left: 165px;
	text-align:center;
	font-size:11px;
	text-transform: uppercase;
	text-shadow: 1px 1px 3px #000000;
    position:absolute;
    float:left;
    
}
 
 #navbar1 {
   
	margin-top: 370px;
    left: 20%;
	font-size:10px;
	color:#a8846e;
	text-transform:uppercase ;
	text-shadow: 0px 0px 0px #8b6757;
  	position:absolute;
    display:block;
    text-align:center;
    float:left;
    
}
  
#logo {

    margin-top:90px;
    margin-left: 423px;
    float:left;

}
 
#copy {
    
    color:#6a5447;
    padding-top:50px;
    margin-left:22%;
    text-align:center;
    position:absolute;
    display:inline-block;
   
}
  
    #twitter {
    padding-top:250px;
    margin-left:250px;
    position:absolute;
    float:left;
    display:none;
    
    }    

    #clock {
    padding-top:150px;
    margin-left:200px;
    position:absolute;
    float:left;
    
 


Si vous avez des indices pour que mes changements via les media queries soit pris en compte :)
Merci à vous !!!!!!
Modifié en dernier par themagicalcase le 05 Avr 2017 à 22:27, modifié 1 fois.
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar Mazeltof » 05 Avr 2017 à 18:48

'jour ici,

En ajoutant tes règles (pour les écrans inférieurs a 1024px de large) de la manière suivante, ça devrait fonctionner. :wink:

Code: Tout sélectionner
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
	#exemple {
		padding-top: 125px;
		left: 52%;
	}
}


Cela dit, vu les modifs que tu as apporté, je m'étonne que tu n'aies pas utilisé l'héritage de style comme cela t'a été conseillé.

Votre sujet a été déplacé par un membre de l'équipe.
origine : [3.1.x] Support de phpBB ‹ Utilisation
Modifié en dernier par Mazeltof le 05 Avr 2017 à 21:22, modifié 1 fois.
Raison: correction ligne media queries
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2516
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 19:38

Merci Mazeltof de ta réponse, mais ça ne fonctionne visiblement toujours pas :/
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar Mazeltof » 05 Avr 2017 à 21:18

oups, 'tite erreur de ma part

il fallait lire dans le code proposé * :
Code: Tout sélectionner
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {


Si ça ne fonctionne pas il faut que tu sois un peu plus précis.
Tu peux aussi fournir, par exemple, les modifs exactes que tu as essayé, un lien vers le forum, des précision sur ce que tu veux pour les écrans de 1024px, etc.

* je rectifie mon message précédent
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2516
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 21:24

Merci de ta réponse, voici déjà le lien du forum [url][/url], ensuite je veux juste que les éléments ne se chevauchent pas et soit à peu près positionnés comme la première photo posté sur mon premier post, pour ce qui est des modifications j'ai juste essayé de modifier les valeurs left des éléments mais comme je n'ai aucun changement c'est difficile de te dire exactement ou je veux placer les éléments car je n'ai aucun retour visuel :/
Modifié en dernier par themagicalcase le 06 Avr 2017 à 10:27, modifié 1 fois.
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar Mazeltof » 05 Avr 2017 à 21:27

As tu purgé le cache de ton forum et/ou le cache de ton navigateur ?
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2516
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 21:28

Je vais le faire de ce pas :)
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 21:35

Ca ne fonctionne toujours pas :/ on est bien d'accord que je dois mettre le code dans Responsive.css ?
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar Mazeltof » 05 Avr 2017 à 21:50

oui tu mets tes modifs pour les différentes tailles d'ecrans à la suite de responsive.css.

si on prend #bienvenue par exemple,
tu as mis ta modif dans common.css ligne 228 alors que la déclaration globale se trouve à la ligne 427
et tu peux supprimer les propriétés que tu ne modifies pas pour avoir au final :
Code: Tout sélectionner
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
	#bienvenue {
		left: 44%;
	}
}
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2516
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 22:01

J'ai tout mis à la fin du fichier Responsive.css et j'ai supprimé les valeurs inutiles mais rien non plus :lol: je rigole mais c'est nerveux XD
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar cabot » 05 Avr 2017 à 22:05

Plop,

Sous phpBB 3.1, il ne faut pas ajouter les règles destinées aux résos > 700px dans responsive.css car tout ce qui est déclaré dans ce fichier concerne les résos ≤ 700px.
=> placer ces modifs dans common.css
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26741
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 22:11

Ah d'accord je ne le savais pas du tout :/ mais est-ce que tu sais d'où pourrait venir le problème du fait que rien ne se modifie pour l'affichage en 1024px ?

Merci :)
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar Mazeltof » 05 Avr 2017 à 22:24

cabot a écrit:Sous phpBB 3.1, il ne faut pas ajouter les règles destinées aux résos > 700px dans responsive.css car tout ce qui est déclaré dans ce fichier concerne les résos ≤ 700px.
=> placer ces modifs dans common.css

Très juste, au temps pour moi (à force de torturer la 3.2 ^^)

@ themagicalcase :
tu as toujours ta déclaration pour les ecrans 1024px avant la déclaration globale dans common.css (pour #bienvenue, je n'ai pas regardé les autres).
mets tes déclarations concernées à la fin du fichier :wink:
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2516
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar themagicalcase » 05 Avr 2017 à 22:27

Ca marcheeeeeee merciiiiii beaucoup !!!! en fait pour chaque modification il faut les ajouter à la fin du fichier si j'ai bien compris ?
themagicalcase
Posteur néophyte
Posteur néophyte
 
Messages: 45
Enregistré le: 28 Nov 2016 à 20:59

Re: Modifier le positionnement de certains éléments avec les media queries

Messagepar Mazeltof » 05 Avr 2017 à 22:31

oui, à la fin du fichier ou au minimum après la déclaration globale. :wink:
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2516
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Suivante

Retourner vers [3.1.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité