27292 sujets

CSS et mise en forme, CSS3

Bonjour à tout le monde,

Je viens par ici afin d'essayer de reccueillir un peu d'aide, car je patine déjà depuis un bon moment, mais je n'arrive pas à trouver la solution par moi-même... J'espère donc que vous pourrez m'aider...

Mon problème se situe au niveau du menu de mon site web que je développe en PHP (je suis novice, sans formation et j'apprends un peu sur le tas depuis 5-6 ans), et au niveau du CSS, ce n'est pas spécialement ma tasse de thé...

Voici mon problème au niveau de mon menu, qui se met sur deux lignes (voir image 1) :
upload/1574002876-77840-menu.png

Voilà ce que je voudrais faire (sans la mise en forme, juste le système avec les flèches quand le menu est trop long pour éviter qu'il soit sur deux lignes) :
upload/1574002913-77840-menu2.png

Je suis à bout.. je n'arrive vraiment pas à trouver comment faire, j'espère que l'un d'entre vous pourra m'aider..

En vous remerciant par avance,
Cordialement,

Taylor.

Voici le codage de mon menu :

<div class="classynav">
						
                                <ul id="nav">
								
                                    <li><a href="index"><font size="4px"><?PHP if($etat_icones_header == 1) { echo '<i class="fa fa-home"></i>';} ?></font> &nbsp;&nbsp;Accueil</a></li>
									
									<?PHP if($etat_categorie_radio == 0) { echo '';} else { ?>
									<li><a href="#"><font size="4px"><?PHP if($etat_icones_header == 1) { echo '<i class="fa fa-play-circle"></i>';} ?></font> &nbsp;&nbsp;<?php echo $nom_categorie_radio ?></a>
										<ul class="dropdown" style="width: 210px;">
										<?PHP if($etat_page_programmes == 0) { echo '';} else { ?><li><a href="programmes"><?php echo $nom_page_programmes ?></a></li><?php } ?>
										<?PHP if($etat_page_equipe == 0) { echo '';} else { ?><li><a href="equipe"><?php echo $nom_page_equipe ?></a></li><?php } ?>
										</ul>
										</li>
									<?php } ?>
									
									<?PHP if($etat_categorie_actualites == 0) { echo '';}  else { ?>
                                    <li class='active'><a href="#"><font size="4px"><?PHP if($etat_icones_header == 1) { echo '<i class="fa fa-newspaper"></i>';} ?></font> &nbsp;&nbsp;<?php echo $nom_categorie_actualites ?></a>
									<ul class="dropdown" style="width: 210px;">
                                            <?PHP if($etat_page_actualites == 0) { echo '';} else { ?><li><a href="actualites"><?php echo $nom_page_actualites ?></a></li><?php } ?>
                                            <?PHP if($etat_page_actualites_rss == 0) { echo '';} else { ?><li><a href="actualites_rss"><?php echo $nom_page_actualites_rss ?></a></li><?php } ?>
										</ul>
										</li>
									<?php } ?>

									<?PHP if($etat_categorie_medias == 0) { echo '';}  else { ?>									
                                    <li><a href="#"><font size="4px"><?PHP if($etat_icones_header == 1) { echo '<i class="fa fa-film"></i>';} ?></font> &nbsp;&nbsp;<?php echo $nom_categorie_medias ?></a>
									<ul class="dropdown" style="width: 210px;">
                                            <?PHP if($etat_page_photos == 0) { echo '';} else { ?><li><a href="photos"><?php echo $titre_page_photos ?></a></li><?php } ?>
                                            <?PHP if($etat_page_videos == 0) { echo '';} else { ?><li><a href="videos"><?php echo $titre_page_videos ?></a></li><?php } ?>
                                            <?PHP if($etat_page_podcasts == 0) { echo '';} else { ?><li><a href="podcasts"><?php echo $titre_page_podcasts ?></a></li><?php } ?>
										</ul>
										</li>
									<?php } ?>	
									
									<?php
			$reponse = $bdd->query("SELECT * FROM pages WHERE actif='1' ORDER BY id");
			while ($donnees = $reponse->fetch())
			{
			?>
			<li><a href="radio?idpages=<?php echo $donnees['id']; ?>"><font size="4px"><?PHP if($etat_icones_header == 0) { echo '';} else {?><i class="fa <?php echo $donnees['icone_page']; ?>"></i><?php } ?></font> &nbsp;&nbsp;<?php echo $donnees['page']; ?></a></li>
			<?PHP } ?>	
			
			
									<?PHP if($etat_page_contact == 0) { echo '';}  else { ?>
                                    <li><a href="nous_contacter"><font size="4px"><?PHP if($etat_icones_header == 1) { echo '<i class="fa fa-envelope"></i>';} ?></font> &nbsp;&nbsp;<?php echo $nom_page_contact ?></a></li>
									<?php } ?>	
										
                                </ul>
                                <div class="social-share-icon" title="Nos réseaux sociaux" style="margin-top: 8px;">
                                  <font color="<?php echo $couleur_header3; ?>" style="font-size: 20px;">  <i class="social_share"></i></font>
                                </div>


                                <div class="search-icon" data-toggle="modal" data-target="#message" title="Laisser un message à l'antenne" style="margin-top: 8px;">
                                    <font color="<?php echo $couleur_header3; ?>" style="font-size: 20px;"><i class="icon_comment_alt"></i></font>
                                </div>
								
                            </div>

Modifié par Taylor10 (17 Nov 2019 - 16:09)
Bonjour,
je crois que tu te compliques la vie en réalisant un menu en php. J'en ai placé un sur un site, entièrement en css, responsive. et pas besoin de flèches droites/gauche. Deux traits de longueur inégale et dont l'un est rouge indiquent parfaitement qu'il s'agit d'un menu glissant. Il fonctionne sur tous les portables (ce qui est sa destination...)

ps : pourquoi je ne peux pas envoyer un image/capture d'écran, ce soir, même en éditant le post ?
Modifié par Bongota (17 Nov 2019 - 21:45)
Bongota a écrit :
Bonjour,
je crois que tu te compliques la vie en réalisant un menu en php. J'en ai placé un sur un site, entièrement en css, responsive. et pas besoin de flèches droites/gauche. Deux traits de longueur inégale et dont l'un est rouge indiquent parfaitement qu'il s'agit d'un menu glissant. Il fonctionne sur tous les portables (ce qui est sa destination...)

ps : pourquoi je ne peux pas envoyer un image/capture d'écran, ce soir, même en éditant le post ?


Bonsoir, merci pour ta réponse !

C'est possible mais avec mon expérience.. Et le menu était déjà présent sur ma template que j'ai acheté, c'est pour cela que je voulais la compléter...
Bongota a écrit :
Bonjour,
je crois que tu te compliques la vie en réalisant un menu en php. J'en ai placé un sur un site, entièrement en css, responsive. et pas besoin de flèches droites/gauche. Deux traits de longueur inégale et dont l'un est rouge indiquent parfaitement qu'il s'agit d'un menu glissant. Il fonctionne sur tous les portables (ce qui est sa destination...)

ps : pourquoi je ne peux pas envoyer un image/capture d'écran, ce soir, même en éditant le post ?

Je me demandes surtout pourquoi tu ne nous fais pas cadeau du code complet, ou de l'URL ?? ce serait un beau partage sur un forum comme celui-ci ! Merci d'avance.
Jean-Pierre
Bonjour,
Même si mon code fonctionne parfaitement sur un site actif, je ne suis qu'un autodidacte en ce domaine et ce code n'est peut-être pas exempt d'erreurs. J'attendais des réponses de personnes plus pointues. Voici le code, pour la partie faibles résolutions. J'ai même installé un second menu glissant en bas, juste avant le footer et avec des liens/images. Que les gens naviguent avec le pouce, ce n'est pas une nouveauté, mais on ne peut pas toujours atteindre le menu du haut avec le pouce. De nombreux articles traitent des menus glissants sur le net, et de la zone d'action privilégiée sur les écrans des portables. Mes choix peuvent se discuter, bien sûr.

<div class="topBar">
    <!-- Logo etc. -->
</div>
<nav class="navBar">
    <div class="container">
        <ul class="nav">
        <li><a href="index.html" class="active">Accueil</a></li>
            <li><a href="Jembes.html">Jemb&eacute;s</a></li>
            <li><a href="Vulcain.html">Vulcain</a></li>
            <li><a href="Jelidunun.html">Jelidunun</a>
	    <li><a href="Dunun-PVC.html">Dunun PVC</a>
            <li><a href="Yabara.html">Yabara</a>
            <li><a href="Avertissement.html">Avertissement</a>
	    <li><a href="Faire-Soi-Meme.html">DIY</a>
        </ul>
    </div>
</nav>


/* Menu "scroll" */
.topBar {
    background: white;
    color: rgba(255, 255, 255, 0.3);
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px 0;
    text-align: center;
}
.container {
    margin: 0 auto;
    padding: 0 10px;
    max-width: 800px;
}
.navBar {
    background-color: blue;
}
.nav {
    margin: 0 -10px;
    position:absolute;/* Pour enlever le "fixed"*/
    padding: 0 10px;
    list-style: none;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.nav > li > a {
    padding: 14px 16px;
    display: block;
    color: lightblue /* Couleur des liens */
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8em;
}
.nav > li > a.active {
    border-bottom: 2px solid #E64A19;
}


Voici le lien du site : cliniquejembe.free.fr
Administrateur
Bonjour,

l'élément font et l'attribut color sont dépréciés depuis 15 ans : il faut plus utiliser ça Smiley cligne
Un span ou si pertinent un élément tel que strong, em, etc avec une classe et en CSS une règle ayant cette classe pour sélecteur sont à privilégier.

Pour forcer l'affichage sur une ligne, je pense à 2 méthodes :
- display: flex; (sur le conteneur) qui par défaut a pour particularité d'empêcher le passage à la ligne et donc crée un débordement des flex items si nécessaire
- white-space: nowrap; qui empêche de transformer les espaces en retours à la ligne https://developer.mozilla.org/fr/docs/Web/CSS/white-space
Felipe a écrit :
Bonjour,

l'élément font et l'attribut color sont dépréciés depuis 15 ans : il faut plus utiliser ça Smiley cligne
Un span ou si pertinent un élément tel que strong, em, etc avec une classe et en CSS une règle ayant cette classe pour sélecteur sont à privilégier.

Pour forcer l'affichage sur une ligne, je pense à 2 méthodes :
- display: flex; (sur le conteneur) qui par défaut a pour particularité d'empêcher le passage à la ligne et donc crée un débordement des flex items si nécessaire
- white-space: nowrap; qui empêche de transformer les espaces en retours à la ligne https://developer.mozilla.org/fr/docs/Web/CSS/white-space


Merci Felipe,
comme je l'ai précisé, je suis autodidacte, je travaille un peu à l'arrache, jusqu'à que ça fonctionne correctement. Après, je nettoie et je vois si une meilleure solution n'existe pas Smiley cligne
Merci pour le conseil.
Jean-Pierre-Bruneau a écrit :

Je me demandes surtout pourquoi tu ne nous fais pas cadeau du code complet, ou de l'URL ?? ce serait un beau partage sur un forum comme celui-ci ! Merci d'avance.
Jean-Pierre


Bonsoir Jean-Pierre,

Voici le code raccourci au niveau du CSS :


.classy-nav-container {
  background-color: transparent;
  padding: 0; }
  .classy-nav-container .classy-navbar {
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
    height: 120px;
    padding: 0; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .classy-nav-container .classy-navbar {
        height: 70px; } }
    @media only screen and (max-width: 767px) {
      .classy-nav-container .classy-navbar {
        height: 70px; } }
    @media only screen and (max-width: 767px) {
      .classy-nav-container .classy-navbar .nav-brand {
        max-width: 90px;
        margin-right: 15px; } }
    .classy-nav-container .classy-navbar .classynav ul li a {
      position: relative;
      z-index: 1;
      font-size: 14px;
      text-transform: uppercase;
      color: <?php echo $header_texte ?>;
      font-weight: 600; }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .classy-nav-container .classy-navbar .classynav ul li a {
          color: purple; } }
      @media only screen and (max-width: 767px) {
        .classy-nav-container .classy-navbar .classynav ul li a {
          color: green; } }
      .classy-nav-container .classy-navbar .classynav ul li a:focus, .classy-nav-container .classy-navbar .classynav ul li a:hover {
        color: <?php echo $header_texte_hover ?>;
        font-weight: 600; }
    .classy-nav-container .classy-navbar .classynav ul li.cn-dropdown-item ul li a, .classy-nav-container .classy-navbar .classynav ul li.megamenu-item ul li a {
      font-size: 13px;
      text-transform: none;
	  background-color: rgba(36,34,34,0.84);
      height: 42px;
      line-height: 42px;
      padding: 0 30px;
      color: white;
      font-weight: 600; }
      .classy-nav-container .classy-navbar .classynav ul li.cn-dropdown-item ul li a:focus, .classy-nav-container .classy-navbar .classynav ul li.cn-dropdown-item ul li a:hover, .classy-nav-container .classy-navbar .classynav ul li.megamenu-item ul li a:focus, .classy-nav-container .classy-navbar .classynav ul li.megamenu-item ul li a:hover {
        color: rgba(168,165,165,1);
        font-weight: 600;
        padding-left: 35px;
}


Pour les autres personnes qui m'ont répondu, merci à vous, je vais essayer les différentes méthodes.
Bonsoir,

Je me permets de revenir vers vous car je n'ai toujours pas réussi...

Si quelqu'un a la solution, je suis toujours preneur (j'ai skype, discord, anydesk ou teamviewer si besoin...)

Merci par avance.
Felipe a écrit :
Quelque chose comme ça : https://jsfiddle.net/386q0nmg/ ou bien il faut les flèches gauche et droite visibles ?
Pour un truc complexe comme ces onglets (en 320px de large), il vaut mieux parfois ne pas compliquer les choses Smiley smile
Sinon avec les flèches c'est un slider/carrousel et il faut une bonne dose de JavaScript.


Bonsoir, merci pour ta réponse. En fait c'est un carrousel que je voudrais faire en effet; mais avec mon menu... Si quelqu'un a un script ou une piste, je prends Smiley smile

Bonne soirée Smiley cligne