Auteur Sujet: Stabilité des fonctions de calcul du site  (Lu 1381 fois)

Borak

  • Full Member
  • ***
  • Messages: 640
Re : Stabilité des fonctions de calcul du site
« Réponse #15 le: février 12, 2019, 09:51:53 am »
En plus basculer tout en CSS, ça représente un gros boulot dans le cas de ce site.
Ca simplifie l'écriture des nouvelles pages, mais est-ce que ça vaut le coup... ...

Sinon, exemple de menu déroulant CSS. le code HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
   <title>Test Menu</title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <link href="menu.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div class="menu">
<ul>
<li>Menu 1
   <div>
     <ul><li><a href="#">Menu 1 - A</a></li>
         <li><a href="#">Menu 1 - B</a></li>
         <li><a href="#">Menu 1 - C C C</a></li>
         <li><a href="#">Menu 1 - D</a></li></ul>
   </div>
</li>
<li>Menu 2 qui marche
   <div>
     <ul><li><a href="#">Menu 2 - A</a></li>
         <li><a href="#">Menu 2 - B</a></li>
         <li><a href="#">Menu 2 - C</a></li>
         <li><a href="#">Menu 2 - D</a></li></ul>
   </div>
</li>
</ul>
</div>

</ul>

</body>

</html>

Le fichier CSS qui met ça en place.
div.menu
{  width: 100% ;
   margin: 0 ;
   padding: 0 ;
   background-color: #A2B1E4 ;
}

div.menu ul li
{  display: inline-block ;
   color: white ;
   padding: 0 1em ;
   position: relative ;
}

div.menu ul li div
{  display: none ;
}

div.menu ul li:hover, div.menu ul li:focus
{  background-color: #727FA2 ;
}

div.menu ul li:hover div, div.menu ul li:focus div
{  display: block ;
   width: 20em ;
   position: absolute ;
   left: 0 ;
   top: 100% ;
}

div.menu ul li ul
{  background-color: #E3EBFF ;
   margin: 0 ;
   padding: 0 ;
   z-index: 100000 ;
   display: inline-block ;
}

div.menu ul li ul li
{  margin-top: 0 ;
   padding: 0 ;
   display: block ;
   width: auto ;
}

div.menu ul li ul li a
{  text-decoration: none ;
   display: block ;
   margin: 0 ;
   padding: 0 1em ;
}

div.menu ul li ul li a:hover, div.menu ul li ul li a:focus
{  text-decoration: none ;
   color: white ;
}


Tout se met en place grace à la class="menu". Ca n'a aucun impact sur le reste de la page. Qu'elle soit en CSS ou pas.

Tonipe

  • Administrator
  • Hero Member
  • *****
  • Messages: 7797
    • E-mail
Re : Stabilité des fonctions de calcul du site
« Réponse #16 le: février 12, 2019, 19:16:57 pm »
Comme ça ?
http://petoindominique.fr/html/test-menu.htm

Cordialement, Dominique

Borak

  • Full Member
  • ***
  • Messages: 640
Re : Stabilité des fonctions de calcul du site
« Réponse #17 le: février 12, 2019, 20:14:45 pm »
Par exemple, après tu peux changer la couleur, la taille des caractères, la police, tout dans le css.

Borak

  • Full Member
  • ***
  • Messages: 640
Re : Stabilité des fonctions de calcul du site
« Réponse #18 le: février 15, 2019, 13:50:41 pm »
Oups, je viens de voir que dans ton test, tu m'avais mis des horribles "<font size="2" face="Arial">" un peu partout.
C'est ça le problème qui complique méchamment le html. C'est ce qu'on évite de renseigner avec une feuille de style.

Comme il y a une feuille de style dans le menu, on alimente simplement la taille et la police à l'intérieur :

Par exemple :
div.menu
{  font-family: Arial, serif ;
   font-size: 1em ;
}

div.menu ul li  li a
{  font-size: 0.8em ;
}

Le premier donne la police et la taille à l'ensemble du menu.
Le second donne la taille au Lien qui est dans les deux listes (soit le sous-menu).

Et tu peux ajouter de la couleur, couleur de fond, et bordure...
color: red ;
background-color: #545859 ;
border-width: 1px ;
border-color: blue ;
border-style: solid ;

Il y a plein d'exemple sur : https://www.w3schools.com/css/default.asp

Tonipe

  • Administrator
  • Hero Member
  • *****
  • Messages: 7797
    • E-mail
Re : Stabilité des fonctions de calcul du site
« Réponse #19 le: février 20, 2019, 19:01:23 pm »
Bonjour

http://www.petoindominique.fr/boutons/menu-deroulant2.html

J'aurai besoin d'aide pour
- Mettre les menus sur les 3 colonnes en Arial size 2
- Avoir 3 colonnes de même largeur

Merci par avance.

Cordiallement, Dominique

Tonipe

  • Administrator
  • Hero Member
  • *****
  • Messages: 7797
    • E-mail
Re : Stabilité des fonctions de calcul du site
« Réponse #20 le: février 23, 2019, 10:06:21 am »
Bonjour

Petit à petit les choses avances : http://www.petoindominique.fr/php/menu_deroulant.php
Ce n'est pas fini, j'ai encore du boulot. (Je ne crains pas le boulot)

Je ne pensais pas avoir de réorganisation à faire, il y en aura.
Les boutons rouge/vert en haut de page sont appelés à disparaître.

Il y a un soucis avec la 2eme colonne de menus, la souris doit être trop sur la droite pour la sélection.
Avez vous une idée ?

*--- MENU ---*/
div#menu a{color:#000; font-weight: 200; font-family: Arial, serif; font-size: small}
div#menu li{position:relative; list-style:none; margin:0; border-bottom:1px solid #ccc}
div#menu li.sousmenu{background:url(submenu.gif) 95% 50% no-repeat}
div#menu li:hover{background:#ebb}
div#menu li.sousmenu:hover{background-color:#edd}
div#menu ul a{width:inherit}
div#menu ul ul{position:absolute;top:-1px}

/*--- TAILLE PREMIERE COLONNE ---*/
div#menu{float:left;width:13em}
div#menu ul{margin:0;padding:0;width:13em;background:#fff;border:1px solid}
div#menu ul ul{left:13em;display:none}
div#menu li a{display:block;padding:.25em 0 .25em .5em;text-decoration:none;width:20em;border-left:.5em solid #bbb}

/*--- TAILLE DEUXIEME COLONNE ---*/
div#menu ul.niveau2 ul{left:20em}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2{width:20em;display:block}
div#menu ul.niveau2 li a{width:20em}

/*--- TAILLE TROISIEME COLONNE ---*/
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3{width:20em;display:block}

/*--- COULEUR DES BORDURES ---*/
div#menu li a:hover{border-left-color:red}
div#menu ul ul li a:hover{border-left-color:#0f0}
div#menu ul ul ul li a:hover{border-left-color:#00f}

Cordialement, Dominique

Borak

  • Full Member
  • ***
  • Messages: 640
Re : Stabilité des fonctions de calcul du site
« Réponse #21 le: février 24, 2019, 22:30:32 pm »
Bonjour, je suis en installation de micro, alors je n'ai pas eu le temps de regarder.
Une solution pour la largeur c'est de la figer sur le lien (a) par :
display:inline-block ;
width: 13em ;
Margin: 0 ;
Et pas de le faire sur le LI ou le UL.
Ca peut éliminer les problèmes de "souris trop sur la droite".

Tonipe

  • Administrator
  • Hero Member
  • *****
  • Messages: 7797
    • E-mail
Re : Stabilité des fonctions de calcul du site
« Réponse #22 le: février 25, 2019, 11:01:20 am »
Merci Borak

Avec des largeurs identiques pour les 3 colonnes, le problème n'existe plus.
J'augmente progressivement la largeur, pour avoir des affichages sur une seule ligne partout.
Je vais devoir ajouter une 4eme colonne, pour ne pas avoir à charger une page complète.
Merci pour votre aide.

Cordialemennt, Dominique

Tonipe

  • Administrator
  • Hero Member
  • *****
  • Messages: 7797
    • E-mail
Re : Stabilité des fonctions de calcul du site
« Réponse #23 le: février 26, 2019, 18:20:57 pm »
Bonjour

Les menus déroulants sont en place partout et à 100%.
http://www.petoindominique.fr/php/menu_deroulant.php

C'est le moment de parler de deux choses :

- La structure utilisée dans les menus est-elles pertinente ?
  Que changeriez vous ?

- Ajouter des CSS sur les menus classiques qui restent en haut des pages pour améliorer la présentation.
  Comment voyez vous ça ?

Toutes les idées sont les bienvenues.

Cordialement, Dominique

xnwrx

  • Administrator
  • Hero Member
  • *****
  • Messages: 2678
Re : Stabilité des fonctions de calcul du site
« Réponse #24 le: février 26, 2019, 18:45:03 pm »
Je découvre...mais c'est extra ! 8)
Bravo Dominique, ça permet de se retrouver beaucoup plus facilement. Il est nécessaire que toutes les pages du site soient accessibles par ce menu déroulant (un sommaire en quelques sortes). Auparavant je ne trouvais pas toutes les pages car j'avais l'impression que les pages d'accueils ne référençaient pas tout.
En gros, éviter les pages qui donnent l'accès à d'autres pages, puis à d'autres pages...etc. pages qui ne seraient pas directement accessibles depuis le sommaire. Lorsque tout est accessible depuis un endroit unique, et de manière logique, on s'y retrouve. Ca n'empêche évidemment pas les liens de pages en pages.
Merci pour ce travail impressionnant.

Tonipe

  • Administrator
  • Hero Member
  • *****
  • Messages: 7797
    • E-mail
Re : Stabilité des fonctions de calcul du site
« Réponse #25 le: février 26, 2019, 20:45:18 pm »
Je vais finir la mise à jour de cette page de lien : http://www.petoindominique.fr/php/liens.php
Et je vérifierai que toutes les pages sont dans les menus déroulants, dans la structure qui convient.

Cordialement, Dominique