BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - CSS et @media screen
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

CSS et @media screen

 Répondre Répondre Page  12>
Auteur
Message
j74 allez vers le bas
Senior Member
Senior Member


Depuis le: 25 Juil 2010
Status: Inactif
Points: 110
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer j74 Citer  RépondreRéponse Lien Direct à ce Post Sujet: CSS et @media screen
    Envoyé : 19 Mai 2023 à 08:43
[Mon message a été déplacé, et faisait suite au didacticiel "Chouette c'est responsive" de Larsene]

Super didacticiel !!!! Clap

Grâce à lui j'ai pu commencer une ébauche de site responsive, qui était pour moi un grand mystère...

Je ne sais pas si je peux poser des questions sur son utilisation directement ici, ou si je dois ouvrir un topic dédié, mais j'aurai forcément des interrogations vous vous en doutez...

J'ai bien suivi le tuto, ça marche pas mal jusqu'ici, j'ai pu me familiariser avec le concept des classes perso, un peu de code CSS, etc...

Par contre, comme bizarrerie, je n'arrive pas à réduire la taille du titre de la barre de menu (classe .titrebarremenu) lorsque la fenêtre se réduit...
J'arrive pourtant à le faire pour le texte des boutons liens, dont j'ai créé une classe spécifique .bouton (qui n'est pas dans le tuto me semble-t-il).

Je vous donne l'adresse (très) temporaire de l'ébauche (tout debut) de mon site pour vous faire une idée, et le code CSS commenté du menu, si ça peut vous éclairer...

https://hugaux.000webhostapp.com/

_________________________________________________________________

.barremenu{
background-color:rgba(27,37,58,0.8) !important;
width:100% !important;
position : fixed !important;
z-index:9999 !important;
}
 
@media screen and (max-width: 1134px) {
.titrebarremenu{
font-size: 18px !important; /* Taille du titre de la barre de menu, réduite à 18px */ Ne marche pas
}
#WEBoutonMenu{
display:inline-block !important; /* Affiche le bouton du menu déroulant */
}
#WEmenuprincipal{ /* Cache la barre de menu principal */
display:none !important;
}
}

@media screen and (min-width: 1134px) and (max-width: 1400px) {
.titrebarremenu{
font-size: 20px !important; /* Taille du titre de la barre de menu, réduite à 20px */ Ne marche pas
margin-right: 3% !important; /* réduit la taille de la marge droite de la barre de menu à 3% */
}
.menu{
width: 800px !important; /* réduit la taille de la barre de menu principal */
}
.bouton{
font-size: 16px !important; /* réduit la taille du texte des bouton liens à 16px */
margin-right: 2% !important; /* réduit les marges droite et gauche des boutons liens à 2% */
margin-left: 2% !important;
}

#WEBoutonMenu{
display:none !important; /* cache le bouton du menu déroulant */
}
#WEmenuprincipal{
display:inline-block !important; /* Affiche la barre de menu principal */
}
}

@media screen and (min-width: 1401px) {
.titrebarremenu{
font-size: 24px !important; /* Taille du titre de la barre de menu, normale */
margin-right: 8% !important;
}
.menu{
width: 919px !important; /* Taille de la barre de menu principal, normale */
}
.bouton{
font-size: 18px !important; /* taille du texte des bouton liens, normale */
margin-right: 3% !important; /* marges droite et gauche des boutons liens */
margin-left: 3% !important;
}

#WEBoutonMenu{
display:none !important; /* cache le bouton du menu déroulant */
}
#WEmenuprincipal{
display:inline-block !important; /* Affiche la barre de menu principal */
}
}


Edité par j74 - 20 Mai 2023 à 13:53
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Mai 2023 à 09:49
Votre code est bon et fonctionne très bien.

Par contre, le hack !important n'est pas dans les préférences des Google de ce monde, il n'est à utiliser qu'en dernier recours.

Vous avez forcé la taille du texte via le menu des propriétés de OE

          <div class="OESZ OESZ_DivContent OESZG_WE3443589adb">
           <span class="OESZ OESZ_Text OESZG_WE3443589adb ContentBox"><span style="color:rgb(196, 189, 151);font-size:24px;">Le Domaine des Hugaux</span></span>
          </div>


Chaque fois que vous utilisez les propriétés, OE génère du code CSS qui devient parfois prédominant. C'est pourquoi ça ne fonctionne pas


Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Mai 2023 à 09:56
Ajoutez un nouveau bloc de texte au menu et n'y mettez que la classe perso titrebarremenu.

Dans le panneau "Edition du code" il y a un bouton Comportement en haut à droite.  Assurez-vous de sélectionner:  Exécuter dans l'éditeur.  Vous verrez l'effet de votre code dans OE.


Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Mai 2023 à 09:58
Si vous ne l'avez pas déjà fait, regardez mes vidéos sur youtube


edit, j'ai corrigé les liens pour qu'ils pointent vers la version française


Edité par Hobby001 - 19 Mai 2023 à 10:09
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Mai 2023 à 10:23
Ajoutez ceci dans un bloc de code html en position header

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
Haut de la page
j74 allez vers le bas
Senior Member
Senior Member


Depuis le: 25 Juil 2010
Status: Inactif
Points: 110
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer j74 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 20 Mai 2023 à 07:11
Message posté par Hobby001 Hobby001 a écrit:

Votre code est bon et fonctionne très bien.

Par contre, le hack !important n'est pas dans les préférences des Google de ce monde, il n'est à utiliser qu'en dernier recours.

Vous avez forcé la taille du texte via le menu des propriétés de OE

          <div class="OESZ OESZ_DivContent OESZG_WE3443589adb">
           <span class="OESZ OESZ_Text OESZG_WE3443589adb ContentBox"><span style="color:rgb(196, 189, 151);font-size:24px;">Le Domaine des Hugaux</span></span>
          </div>


Chaque fois que vous utilisez les propriétés, OE génère du code CSS qui devient parfois prédominant. C'est pourquoi ça ne fonctionne pas




J'en étais arrivé à cette "conclusion" aussi, donc j'avais jeté un oeil (sûrement trop rapidement) dans les divers recoin où il pouvait rester une taille "forcée", mais j'ai dû passer à côté !!!
Je ne maîtrise pas encore toutes les subtilités Confused

Je ne me souviens pourtant pas avoir édité ses propriétés différemment des boutons liens, qui eux se redimensionnent bien.
J'ai essayé d'enlever toutes les caractéristiques de taille dans l'éditeur, il n'y a rien dans "Propriétés", mais la taille restait toujours la même...
Du coup j'ai supprimé l'élément, recréé un autre, et ça a l'air de fonctionner actuellement ;-)

Merci pour le dépannage et les infos !!!
(j'ai pas très bien saisi la fonction du code HTML à mettre en Header, mais je suppose qu'il est utile Wink )

Et félicitations pour les didacticiels et éléments proposés !! Thumbs Up



Edité par j74 - 20 Mai 2023 à 09:45
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 20 Mai 2023 à 10:54
Le code servira à mieux gérer l'aspect du site sur les différentes plateformes utilisées pour le consulter.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Mai 2023 à 08:07
Bonjour j74,
j'ai la chance d'avoir un écran 27" donc je vois très vite quand des choses ont foiré question alignement.
C'est le cas pour votre essai. Il n'y a déjà plus guère de responsive à part la bannière.
J'ai moi aussi utilisé le tuto de Larsène : www.de-troyer.be , vous allez voir les différences.
Dans Chrome il y a moyen de voir ce que donne votre site sur différents supports en tapant F12.
Haut de la page
j74 allez vers le bas
Senior Member
Senior Member


Depuis le: 25 Juil 2010
Status: Inactif
Points: 110
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer j74 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Mai 2023 à 08:25
Merci pour les remarques !

Cependant, je ne suis pas encore allé au bout du tuto, je me suis arrêté à la partie responsive du menu ! (un peu plus de la moitié du tuto sur Youtube)
J'ai commencé un peu la page d'accueil, mais pas jusqu'au bout (pas de responsive, pas de liens vers d'autres pages...), d'où votre impression certainement ;)

Mais je vais poursuivre dès que possible, et j'apprécierai d'avoir d'autres remarques une fois que j'aurai davantage avancé dans le projet !
Merci !

Edité par j74 - 22 Mai 2023 à 10:23
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 23 Mai 2023 à 08:55
J'ai bien compris que vous étiez en cours mais donc vous avez raté les premières phases (ce n'est pas "plus tard" qu'on rend le corps responsive) donc recommencez ;).
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.