28106 sujets

CSS et mise en forme, CSS3

Bonjour
Bon j'ai allégé le menu, suite à des demandes mais je voudrai encore tout concentrer.
Il me reste des points bloquants
Pouvez-vous me dire comment mettre le menu à l'extrême gauche et le menu à l'extrême droite pour n'avoir qu'une seule ligne Smiley confused
https://cochanger.eu/organisation/association-collectif ?
sans bien sûr diminuer la taille des caractères.

J'ai essayé , sans succès, entre autres les float sur les éléments
#mod-custom136 => left
.moduletable => right


<div id="mod-custom136" class="mod-custom custom">></div>
<nav class="moduletable " aria-label="Main menu fr-FR"></nav>

Modifié par HDcms (21 Mar 2023 - 18:42)
Modérateur
Salut,

Tu peux enlever
flex:wrap;

de
<div class="grid-child container-nav">

.container-header .container-nav {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 1em;
}

et lui donner une max-width plus grande
Modifié par _laurent (21 Mar 2023 - 22:26)
Meilleure solution
Bonsoir
Encore simple et élégant.
Super Smiley biggrin
Merci

J'ai mis au final juste la modif
.container-header .container-nav {
        flex-wrap: nowrap;
}


1/ Par contre, je suis obligé d'ajouter
#mod-custom136{
  margin-top: 10px;
}

si je veux a peu près aligner le logo texte et le menu.
Est-ce qu'il y a un moyen de centre verticalement les 2 pour qu'il soit parfaitement aligné?

2/ Et question subsidiaire, quand un membre se connecte, cela ajoute un item de menu, amis du coup à priori cela va passer à la ligne si on ajoute encore un item dans ce menui.
Est-ce qu'il ay aurait encore une astuce en dehors de diminuer la taille et l'espace entre les items ? (je ne peux pas déborder à gauche et à droite en même temps??)
Modérateur
HDcms a écrit :

J'ai mis au final juste la modif
.container-header .container-nav {
        flex-wrap: nowrap;
}


Pour le coup avoir :
.container-header .container-nav {
        flex-wrap: wrap;
}
.container-header .container-nav {
        flex-wrap: nowrap;
}

C'est pas élégant du tout Smiley lol


HDcms a écrit :
1/ Par contre, je suis obligé d'ajouter
#mod-custom136{
  margin-top: 10px;
}

si je veux a peu près aligner le logo texte et le menu.
Est-ce qu'il y a un moyen de centre verticalement les 2 pour qu'il soit parfaitement aligné?

align-items : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

HDcms a écrit :
2/ Et question subsidiaire, quand un membre se connecte, cela ajoute un item de menu, amis du coup à priori cela va passer à la ligne si on ajoute encore un item dans ce menui.
Est-ce qu'il ay aurait encore une astuce en dehors de diminuer la taille et l'espace entre les items ? (je ne peux pas déborder à gauche et à droite en même temps??)

Agrandir le menu en augmentant la max-width comme suggéré ?
Bonjour
a écrit :
Pour le coup avoir :
.container-header .container-nav {
        flex-wrap: wrap;
}
.container-header .container-nav {
        flex-wrap: nowrap;
}

C'est pas élégant du tout Smiley lol


Effectivement, mais là je ne crois pas qu'il ya une solution ?
En effet, il y en a un qui est généré par le cms tandis que moi je le "surcharge" et encore j'ai de la chance sans le !important Smiley smile

1/ alignement du logo et du menu avec centrage
 
.container-nav{
   align-items: baseline;
}

Merci ça l'air d'être bon

2/ ajout de plusieurs items de menu en évitant le retour à la ligne
Bon je ne suis pas sûr d'arriver, car après plusieurs tests de css, j'ai pu ajouter sans soucis 2 items, mais le 3ème déborde; je n'ai pas vu de différence avec 100%
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

.moduletable{
max-width:auto;
}

A moins d'une erreur de ma part, j'enlèverai ce bout de css.
2 items en plus c'est déjà bien
Bonjour
Je n'ai pas encore mis a résolu, car je ne suis pas sûr de mes dernières réponses
Est-ce possible de confirmer ou d'infirmer ? @_laurent ou autre personne
@+
Modérateur
Salut !

Désolé j'avais commencé a répondre et j'ai jamais fini puis j'ai zappé haha


HDcms a écrit :
En effet, il y en a un qui est généré par le cms tandis que moi je le "surcharge" et encore j'ai de la chance sans le !important Smiley smile

Ok j'avais pas vu cet aspect là donc pas de soucis Smiley smile

HDcms a écrit :
2/ ajout de plusieurs items de menu en évitant le retour à la ligne
Bon je ne suis pas sûr d'arriver, car après plusieurs tests de css, j'ai pu ajouter sans soucis 2 items, mais le 3ème déborde; je n'ai pas vu de différence avec 100%
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

.moduletable{
max-width:auto;
}


Mmmmmmhhh c'est sur l'élément grid-child container-nav qu'il y a un max-width à 1320px et c'est sur lui qu'il faut surcharger avec un max width plus grand ou à none si tu ne veux pas de largeur max ("auto" n'est pas une valeur acceptée par max-width)
Salut
Ok j'ai pu ajouter 3 items ce qui devrait suffire sinon je ferai autrement.
J'ai mis
.container-nav{
  max-width:none;
}

Merci
Modifié par HDcms (23 Mar 2023 - 15:00)
re
Ah non j'ai vérifié côté smartphone et j'ai un problème avec menu qui décale tout.
le menu se trouve complétement décalé Smiley rolleyes
Certainement une modif que j'ai faite!
Voici la photo
upload/1679581454-58614-screenshot20230323150538org.m.jpg
Modifié par HDcms (23 Mar 2023 - 15:25)
Modérateur
Et bien il te suffit d'enlever le flew nowrap dans une media-queries au meme breakpoint que l'apparition de ton menu mobile pour revenir a ton état précédent (le menu empilé).
Re
Bon je pense avoir compris ! ce serait peut-être dû au slogan et css appliqués ?
j'ai fait par tâtonnement/recherche pour trouver ce qui ne posait pas de problème sur une smartphone.

Avant ce qui fonctionnait sur un navigateur et pas sur un smartphone

HTML
<p><a class="acc" href="https://cochanger.eu/">CoChanger.Eu</a> <br />Se changer ensemble </p>

CSS

/* Logo/titre du site (hors page accueil) en texte avec lien sur la page accueil */
#mod-custom136 a.hors-acc {
	color: #fff;
	text-decoration: none; /* a supprimer si image */
	font-weight: 700;
	font-size: 2.2em;	
	font-family: "Lobster Two", Helvetica, "Trebuchet MS", Verdana, sans-serif;
}
/* Logo/titre du site en texte avec lien sur la page accueil */
#mod-custom110 a.acc {
	color: #fff;
	text-decoration: none; /* a supprimer si image */
	font-weight: 700;
	font-size: 3.2em;
	font-family: "Lobster Two", Helvetica, "Trebuchet MS", Verdana, sans-serif;
} 


En virant ces dernières lignes, je n'avais plus le menu qui se barrait à droite mais bien sûr j'ai
absolument besoin des mises en forme précédente. Je suis parti sur
HTML
<div><a class="acc" href="https://cochanger.eu/">CoChanger.Eu</a></div>
<div class="slogan">xxxxxxxxxxxxxxxxxxx</div>

pour peut-être mieux géré les 2 parties logo/slogan (surtout si le slogan est plus long que le logo!
CSS
@media only screen and (orientation: portrait) and (max-width: 500px){
	.slogan, .logo {
		
	}
}

J'essaie de "jouer" avec cela mais je ne suis arrivé à rien
Modifié par HDcms (23 Mar 2023 - 17:50)
Modérateur
Je te recolle mon précédent commentaire au cas ou tu ne l'aurais pas lu....

_laurent a écrit :
Et bien il te suffit d'enlever le flew nowrap dans une media-queries au meme breakpoint que l'apparition de ton menu mobile pour revenir a ton état précédent (le menu empilé).


Bonne soirée
Bonsoir
Si si j'avais oublié de dire que j'avais d'abords cherché dans ta direction (même si je ne connais pas bien cela (media-querie).
Comme je n'y arrivais pas et que je savais que cela fonctionne avant que je ne retouche à l'en tête, j'ai d'abords supprimés le fichier user.css https://cochanger.eu/media/templates/site/cassiopeia_cochanger/css/user.css pour retrouver un fonctinnement normal sous le smartphone. Puis j'ai supprimé des lignes ... jusqu'à trouver les coupables.

C'est pour cela que je cherche maintenant à peut-être mettre le slogan à la ligne dans le cas du smartphone, voir mon : @media only screen and (orientation: portrait) and (max-width: 500px){ ...
@+
Modifié par HDcms (23 Mar 2023 - 23:21)
Modérateur
HDcms a écrit :
Comme je n'y arrivais pas et que je savais que cela fonctionne avant que je ne retouche à l'en tête, j'ai d'abords supprimés le fichier user.css

D'où l'utilité de n'enlever que ce qu'on a rajouté pour le mobile Smiley smile

.container-header .container-nav {
     flex-wrap: wrap;
}
@media (max-width: 767.98px) {
     .container-header .container-nav {
        flex-wrap: wrap;
     }
}

Ou, de rajouter ce code seulement au dessus de la def mobile :

@media (min-width: 767.98px) {
     .container-header .container-nav {
        flex-wrap: nowrap;
     }
}

De cette façon le menu tombera naturellement sous le logo comme avant.


HDcms a écrit :
je ne connais pas bien cela (media-querie).

Ce sont les @média qui permettent de cibler un média précis (taille, orientation, device...)

HDcms a écrit :
C'est pour cela que je cherche maintenant à peut-être mettre le slogan à la ligne dans le cas du smartphone,

Le slogan est déjà à la ligne après le logo. Il est meme dans le meme conteneur que ton logo. Donc toucher au slogan n'aura aucun effet sur le menu.

Smiley cligne
Bonjour
Merci pour avoir continué à répondre même à cette heure tardive.
Effectivement avec ou sans slogan, j'avais le même problème.
J'ai d'abords commence par dire que cela ne fonctionnait pas, mais en reprenant au calme et supprimant mon précédent ajout
.container-header .container-nav {
     flex-wrap: wrap;
}

et en ajoutant
@media (max-width: 767.98px) {
     .container-header .container-nav {
        flex-wrap: wrap;
     }
}

tout fonctionne parfaitement Smiley biggrin

Néanmoins, as-tu un avis critique sur
@media only screen and (orientation: portrait) and (max-width: 500px)

a) l'ajout du type d'écran et l'orientation
b) max-width: 500px
J'avais retrouvé ce type de code qui me permet de d'être plus précis et le conserver dans mes tips par rapport à ta version plus restreinte ?
Modifié par HDcms (24 Mar 2023 - 11:43)
Modérateur
Salut,

Je n'utilise que très rarement les autre mot clés. Je passe peut etre a coté de quelquechose important mais je m'en fiche un peu du média et de l'orientation, ce qui compte pour moi c'est la largeur dispo. Avec ton dernier exemple si c'est étroit mais en paysage ca ne s'appliquera pas donc c'est dommage. Il faut etre spécifique si ca répond a un besoin. La le besoin est juste sur la largeur. Voila pour mon humble avis Smiley smile

Bonne journée !