CSS et @media screen |
Répondre ![]() |
Page 12> |
Auteur |
![]() ![]() |
|
j74 ![]() Senior Member ![]() Depuis le: 25 Juil 2010 Status: Inactif Points: 100 |
![]() ![]() ![]() ![]() ![]() Envoyé : 19 Mai 2023 à 08:43 |
|
[Mon message a été déplacé, et faisait suite au didacticiel "Chouette c'est responsive" de Larsene] ![]() 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 |
||
![]() |
||
Hobby001 ![]() Admin Group ![]() ![]() Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6402 |
![]() ![]() ![]() ![]() ![]() |
|
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
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 |
||
![]() |
||
Hobby001 ![]() Admin Group ![]() ![]() Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6402 |
![]() ![]() ![]() ![]() ![]() |
|
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.
|
||
![]() |
||
Hobby001 ![]() Admin Group ![]() ![]() Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6402 |
![]() ![]() ![]() ![]() ![]() |
|
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 |
||
![]() |
||
Hobby001 ![]() Admin Group ![]() ![]() Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6402 |
![]() ![]() ![]() ![]() ![]() |
|
Ajoutez ceci dans un bloc de code html en position header
|
||
![]() |
||
j74 ![]() Senior Member ![]() Depuis le: 25 Juil 2010 Status: Inactif Points: 100 |
![]() ![]() ![]() ![]() ![]() |
|
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 ![]() 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 ![]() Et félicitations pour les didacticiels et éléments proposés !! ![]() Edité par j74 - 20 Mai 2023 à 09:45 |
||
![]() |
||
Hobby001 ![]() Admin Group ![]() ![]() Modérateur Depuis le: 14 Feb 2015 Pays: Canada, Québec Status: Inactif Points: 6402 |
![]() ![]() ![]() ![]() ![]() |
|
Le code servira à mieux gérer l'aspect du site sur les différentes plateformes utilisées pour le consulter.
|
||
![]() |
||
Bridet ![]() Senior Member ![]() ![]() Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5048 |
![]() ![]() ![]() ![]() ![]() |
|
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. |
||
![]() |
||
j74 ![]() Senior Member ![]() Depuis le: 25 Juil 2010 Status: Inactif Points: 100 |
![]() ![]() ![]() ![]() ![]() |
|
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 |
||
![]() |
||
Bridet ![]() Senior Member ![]() ![]() Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5048 |
![]() ![]() ![]() ![]() ![]() |
|
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 ;).
|
||
![]() |
Répondre ![]() |
Page 12> |
Tweet
|
Aller au Forum | Permissions du forum ![]() Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |