28106 sujets

CSS et mise en forme, CSS3

Bonjour,
Je cherche à diminuer l'espace du menu principal en haut, car dans le cas ou tout les rubriques sont activées, cela fait un retour à la ligne du dernier élément
https://www.alterweb.info/fr/sites-web (site en cours de construction)
1/ Je pense que je dois faire un margin sur li mais comment faire sans impacter les autres menus alors que les id sont générés par le cms?

2/ pouvez-vous me communiquer des ressources pour améliorer le rendu , notamment au survol ou au soulignement (par exemple) d'un lien de menu actif ?
Merci

@+
Administrateur
Hello,

Plutôt que je jouer sur les espaces (qui poseront toujours des soucis sur des écrans de taille différente à la tienne), je pense que le mieux serait de jouer sur la structure globale (chez toi c'est ".container").

Actuellement, ton .container est bloqué à 1140px de large même sur grand écran en raison de la règle suivante :
@media (min-width: 1200px)
.container {
    max-width: 1140px;
}


Je propose dans un premier temps de modifier cette valeur par celle-ci (et à adapter si besoin) :
@media (min-width: 1200px)
.container {
    max-width: 1200px;
}
@media (min-width: 1400px)
.container {
    max-width: 1400px;
}
Bonjour,
Merci pour cette proposition.
Pour l'instant cela ne fonctionne pas (même avec un !important !) malgré le fait de vider le cache. je continue à chercher.
Par contre je souhaite des précisions
1/ pourquoi 2 valeurs 1200px, 1400px c'est pour que je choisisse celle qui me convient? ou c'est pour que ce soit l'écran au dessus d'une taille qui bascule dans une valeur ?
2/ celà impacte tout le site du coup, n'y aura t-il pas des effets collatéraux pour les tablettes, smartphones ?

Si toi ou autres personnes as des ressources pour améliorer le rendu html de la navigation (comme mentionnée), même dans quelques mois, je serai tjs preneur, car les extensions que je trouve sont plutôt moches ou pas ergonomiques du tout
Administrateur
HDcms a écrit :
Pour l'instant cela ne fonctionne pas (même avec un !important !)

En fait, j'ai testé directement dans mon navigateur, via l'inspecteur d'élément, c'est pour cela que je t'ai proposé cette solution car elle fonctionne (même sans !important).

HDcms a écrit :

1/ pourquoi 2 valeurs 1200px, 1400px c'est pour que je choisisse celle qui me convient? ou c'est pour que ce soit l'écran au dessus d'une taille qui bascule dans une valeur ?

Réponse 2 : oui pour que ce soit encore un peu plus élargi si les tailles d'écran le permettent.

HDcms a écrit :

2/ celà impacte tout le site du coup, n'y aura t-il pas des effets collatéraux pour les tablettes, smartphones ?

Justement non... sauf s'il existe des tablettes de largeur supérieure à 1200 pixels (et de toute façon la règle @media existe déjà et fonctionne déjà, je t'ai juste proposé de changer la valeur).
Administrateur
Après vérification, ta règle problématique provient de Bootstrap Smiley rolleyes

upload/1600769051-1-bs.png

Rien ne t'oblige à passer par Bootstrap pour ce genre de choses, car c'est bien contraignant pour un gabarit aussi basique.
Modifié par Raphael (22 Sep 2020 - 12:06)
Administrateur
Par contre, il va être extrêmement difficile pour toi de gérer tes styles de page avec autant... de fichiers partout ! Smiley eek (sans compter la perte en web perf Smiley sweatdrop )

upload/1600769395-1-styles.png
Merci pour cette investigation.
Et oui j'utilise un template plutot bien fait et flexible pour arriver a des modifications rapides mais effectivement avec plein d'effet de bords car c'est lui qui utilise boostrap
J'ai bien conscience qu'il y aura de l'optimisation, compression, cache à mettre plus tard mais je n'en suis pas là.
Je vais demander au dev' du template et si je n'y arrive pas, j'appliquerai le plan B de tronquer des mots (comme document) ou voir si je mets au singulier, bref de la bidouille pas non plus terrible pour le référencement
Cdt