Rendu Firefox (règlé).

potemkine17 · 22-07-2023 19:48:28

Bonsoir,
Depuis mon passage à Bookworm, je constate des changements sur le rendu de fichiers .html sur Firefox et Firefox ESR. Cela au niveau des dimensions des blocs ; par exemple, les menus débordants maintenant des cadres. Sous Falkon, Firefox-windows et Edge, il n'y a aucun soucis, les fichiers s'ouvrent comme il se doit( je n'ai pas testé sur Chromium, pas installé). Ce comportement, ennuyeux du fait que j'utilise essentiellement FF, serait-il du à mon seul système ou Mozilla a-t-il modifié certains paramètres de son navigateur ?
Je vous joins, en exemple, ce bout de code qui s'affichait correctement jusqu'ici :

!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" media="all" href="deux.css">

    <link rel="stylesheet" media="screen and (max-width: 1280px)">

    <script type="text/javascript"></script>

    <title>Mediathéque</title>

  </head>

  <body style="">

    <header>

      <div class="title5" style="text-align: center;">

        <h1 id="BG_1588845813567_54702" style="margin-left: 491px; width: 381px;"><span

            style="background-color: rgba(51, 51, 255, 0.21);"></span></h1>

      </div>

    </header>

    <br>

    <br>

    <h3><audio loop="loop" autoplay="autoplay" preload="auto" src="zcs.mp3"></audio></h3>

    <ul>

      <div class="menu1" style="width: 280px; height: 670px; margin-left: 60px; text-align: center; background-color: rgb(0, 255, 0, 0.2);">

        <nav>

          <p class="title2" style="list-style: outside none none; text-align: center; width: 248px; font-size: 19px; font-style: italic; font-weight: bold; margin-left: 24px; margin-top: 6px; height: 25px; padding: 2px;">

            A L'AFFICHE</p>

          <ul class="button1">

            <li>

              <ul class="article1" style="list-style: none; ">

                <li style="margin-left: -31px; margin-top: 2px; height: 20px;">

                  <ul class="submenu" style="list-style-type: none;">

                    <li style="text-align: center; width: 109px; margin-left: -58px;"><a

                        href="doc1/page5a.html">ANIME</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; margin-left: -62px; width: 114px;"><a

                        href="doc2/page5a.html">ASIAN</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; margin-left: -47px; width: 199px;"><a

                        href="doc3/page5a.html">AVENTURE/ACTION</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 157px; margin-left: -40px;"><a

                        href="doc3/page5c.html">AVENTURE/EPIC</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; margin-left: -68px; width: 154px;"><a

                        href="doc4/page5a.html">COMEDIE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 193px; margin-left: -35px;"><a

                        href="doc5/page5a.html">COMEDIE/DRAMATIQUE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 176px; margin-left: -32px;"><a

                        href="doc5/page5c.html">COMEDIE/SATIRIQUE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 142px; margin-left: -34px;"><a

                        href="doc5/page5e.html">COMEDIE/POLICIERE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 115px; margin-left: -35px;"><a

                        href="doc6/page5a.html">DOCUMENTAIRE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 133px; margin-left: -30px;"><a

                        href="doc7/page5c.html">DRAME/HISTORIQUE</a></li>

                    <br>

                    <br>

                  </ul>

                </li>

              </ul>

            </li>

          </ul>

        </nav>

      </div>

      <div class="menu2" style="width: 280px; height: 670px; margin-left: 60px; text-align: center; background-color: rgb(0, 255, 0, 0.2);">

        <nav>

          <p class="title2" style="list-style: outside none none; text-align: center; width: 236px; font-size: 19px; font-style: italic; font-weight: bold; margin-left: 36px; margin-top: 6px; height: 25px; padding: 2px;">

            A L'AFFICHE</p>

          <ul class="button1">

            <li>

              <ul class="article1" style="list-style: none;">

                <li style="margin-left: -31px; margin-top: 2px; height: 20px;">

                  <ul class="submenu" style="list-style-type: none;">

                    <br>

                    <li style="text-align: center; width: 125px; margin-left: -36px;"><a

                        href="doc7/page5a.html">DRAME/SENTIMENTAL</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 175px; margin-left: -35px;"><a

                        href="doc8/page5a.html">EPOUVANTE/HORREUR</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; margin-left: -60px; width: 180px;"><a

                        href="doc9/page5a.html">FANTASTIQUE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; margin-left: -77px; width: 167px;"><a

                        href="doc10/page5a.html">GUERRE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; margin-left: -70px; width: 163px;"><a

                        href="doc11/page5a.html">MUSIQUE</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 150px; margin-left: -31px;"><a

                        href="doc12/page5a.html">POLICIER/THRILLER</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 191px; margin-left: -48px;"><a

                        href="doc13/page5a.html">SCIENCE-FICTION</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 156px; margin-left: -49px;"><a

                        href="doc15/page5a.html">SURREALISME</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 165px; margin-left: -55px;"><a

                        href="doc16/page5a.html">TOUT-PUBLIC</a></li>

                    <br>

                    <br>

                    <li style="text-align: center; width: 151px; margin-left: -63px;"><a

                        href="doc17/page5a.html">WESTERN</a></li>

                    <br>

                    <br>

                  </ul>

                </li>

              </ul>

            </li>

          </ul>

        </nav>

      </div>

      <video class="bgvid" autoplay="autoplay" loop="" poster="c.png" id="bgvid">

        <source src="z.webm" type="video/webm"> </video>

    </ul>

  </body>

</html>

Le css :

.menu 

{

  width: 340px;

  height: 200px;

  border-style: solid;

  border-color: #FF0000;

  border-radius: 10px;

  background-color: rgb(0, 255, 0, 0.5);

}

.menu1

{

  height: 222px;

} 

.menu2

{

  height: 222px;

} 

.menu3

{

  height: 222px;

} 

.menu4

{

  height: 222px;

} 

.menu5

{

  height: 222px;

} 

.menu6

{

  height: 222px;

}

.bgvid {

  position: fixed; right: 0; bottom: 0;

  min-width: 100%; min-height: 100%;

  width: auto;  height: auto; z-index: -100;

  background: url(b.webm) no-repeat;

  background-size: cover;

} 

.title5 

{

   border-style: hidden;

   width: 400px;

   padding: auto;

   text-align: center;

   #background-color: rgba(121, 248, 248, 0.4);

 }

.menu1

{

  display: inline-block;

  margin-left: 100px;

  width: 340px;

  height: 130px;

  border-style: solid;

  border-color: #FF0000;

  border-radius: 10px;

  background-color: rgb(0, 255, 0, 0.4);

} 

.menu2

{

  float: right;

  margin-right: 150px;

  width: 340px;

  height: 130px;

  border-style: solid;

  border-color: #FF0000;

  border-radius: 10px;

  background-color: rgb(0, 255, 0, 0.4);

}

.menu3

{

  margin-top: 80px;

  margin-left: 100px;

  display: inline-block;

  vertical-align: middle;

  width: 340px;

  height: 130px;

  border-style: solid;

  border-color: #FF0000;

  border-radius: 10px;

  background-color: rgb(0, 255, 0, 0.4);

} 

.menu4

{

  float: right;

  margin-right: 150px;

  margin-top: 80px;

  vertical-align: middle;

  width: 340px;

  height: 130px;

  border-style: solid;

  border-color: #FF0000;

  border-radius: 10px;

  background-color: rgb(0, 255, 0, 0.4);

} 

.menu5

{

  margin-top: 80px;

  margin-left: 100px;

  display: inline-block;

  vertical-align: bottom;

  width: 340px;

  height: 130px;

  border-style: solid;

  border-color: #FF0000;

  border-radius: 10px;

  background-color: rgb(0, 255, 0, 0.4);

} 

.menu6

{

  float: right;

  margin-top: 80px;

  margin-right: 150px;

  vertical-align: bottom;

  width: 340px;

  height: 130px;

  border-style: solid;

  border-color: #FF0000;

  border-radius: 10px;

  background-color: rgb(0, 255, 0, 0.4);

}

.conteneur

{

 display: inline-block;

}

.video3 

{

  float: left;

  padding-left: 15px;

} 

.text3

{

  float: right;

  #column-width: 500px;

  padding-left: 10px;

  background-color: rgba(0, 0, 255, 0.2);

} 

.text2 

{

  padding-left: 10px;

  #column-width: 250px;

}

.bouton0

{

  float: right; 

  padding-right: 20px;

}

Dernière modification par potemkine17 (23-07-2023 18:10:12)

Croutons · 23-07-2023 08:06:45

Hello
j'ai testé et c’est vrai que ça déborde du cadre sur Firefox-esr, la page utilise la taille par défaut réglée à 16 dans les paramètres générale de Firefox
quand on va dans les options avancées la case autorisée les sites web a utiliser leurs propres polices est coché

edit: sa passe bien si on règle une police par défaut de 14

<!DOCTYPE html>

Dernière modification par Croutons (23-07-2023 08:35:30)

Croutons · 23-07-2023 08:46:22

bon je connais pas grand chose en html mais en m'inspirant d'un autre fichier css
rajoute la taille de police 14 pour menu 1 et menu 2 et c'est tout bon
note que 16 c'est avec la police par défaut de firefox (Noto Serif), si tu spécifies font-family sa peut être + comme moins suivant la police utilisé

.menu1

{

  height: 222px;

  font-size: 14px;

}

.menu2

{

  height: 222px;

  font-size: 14px;

}

en vrai j'ai jeté un œil sur le style.css de la page d’accueil de ma Debian NakeDeb

(y'a un <br> en trop ou en moins pour la position de la puce dans les menus)
edit: éventuellement changer la police avec un

font-family:

Dernière modification par Croutons (23-07-2023 13:43:51)

vv222 · 23-07-2023 13:10:53

Croutons a écrit :

note que 14 c'est avec la police par défaut de firefox (Noto Serif)

Vaut mieux pas trop se fier à ça, je viens de regarder sur mon Firefox ESR et la police par défaut y est DejaVu Sans.

Croutons · 23-07-2023 13:46:48

je l’ai peut-être modifié un jour va savoir
de ce que j’ai pu voir ça influe directement sur l’affichage du forum DF

Dernière modification par Croutons (23-07-2023 13:48:02)

potemkine17 · 23-07-2023 18:09:21

Bonsoir à vous,
Je viens de tester avec une police en 14 - noto serif et ça fonctionne. En fait, c'était un faux problème ; J'aurai du réfléchir davantage avant de poster. Merci pour votre aide et votre patience.

Jean-Pierre Pinson · 23-07-2023 19:13:36

Bonsoir,
Dans ton profil tu pourrais mettre aussi le bureau que tu utilises dans (G)UI : xfce par exemple
Et n'oublie pas de mettre en résolu

vv222 · 24-07-2023 14:02:34

Croutons a écrit :

je l’ai peut-être modifié un jour va savoir

C’est aussi très probable que j’ai modifié ça de mon côté

Je crois que la vraie valeur par défaut c’est un truc du style "serif" ou "sans-serif", auquel cas c’est probablement le système qui choisit la police la plus appropriée.

potemkine17 · 24-07-2023 18:10:29

vraie valeur par défaut

Il vaut mieux la connaitre avant de coder. Surtout que j'avoue ne faire que rarement attention au rendu de la police, seule sa visibilité comptait...j'aviserai maintenant.

vv222 · 24-07-2023 22:29:13

Bah, pour du Web la police par défaut n’est pas une information très intéressante. Ce ne sera de toutes façons pas la même d’une distribution Linux à l’autre, et c’est sans même causer des autres OS (*BSD, Windows, Mac OS, Android, etc.).

Debian-facile

#1 22-07-2023 19:48:28

Rendu Firefox (règlé).

#2 23-07-2023 08:06:45

Re : Rendu Firefox (règlé).

#3 23-07-2023 08:46:22

Re : Rendu Firefox (règlé).

#4 23-07-2023 13:10:53

Re : Rendu Firefox (règlé).

#5 23-07-2023 13:46:48

Re : Rendu Firefox (règlé).

#6 23-07-2023 18:09:21

Re : Rendu Firefox (règlé).

#7 23-07-2023 19:13:36

Re : Rendu Firefox (règlé).

#8 24-07-2023 14:02:34

Re : Rendu Firefox (règlé).

#9 24-07-2023 18:10:29

Re : Rendu Firefox (règlé).

#10 24-07-2023 22:29:13

Re : Rendu Firefox (règlé).

Pied de page des forums