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)
Debian
Debian-France
Debian-Facile
Debian-fr.org
Forum-Debian.fr
Debian ?
Communautés
