просмотр веб-страницы (обычный):
просмотр веб-страницы (когда браузер свернут по горизонтали):
просмотр веб-страницы (когда браузер свернут по горизонтали):
Код CSS и HTML, который я использовал для раздела уведомлений:
/*=================================Common=================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #f0f0f0;
color: #555;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
p {
font-weight: 500;
}
/*========================resuable=============*/
.row {
max-width: 1140px;
margin: 0 auto;
}
section {
padding: 15px 0;
}
.box {
padding: 1%;
}
.list-item a:link,
.list-item a:visited {
text-decoration: none;
transition: color 0.2s;
}
.list-item a:hover,
.list-item a:active {
color: #4285f4;
cursor: pointer;
}
/*==============================Heading====================*/
h1,
h2,
h3 {
font-weight: 800;
letter-spacing: 1px;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
font-size: 150%;
word-spacing: 4px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 25px;
}
h3 {
font-size: 80%;
margin-bottom: 15px;
}
/*====================Button=========================*/
.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
background-color: rgba(204, 204, 204, 0.24);
}
/*==============================NOTICE====================*/
.notice {
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Vendor/css/normalize.css">
<link rel="stylesheet" type="text/css" href="Vendor/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendor/css/generic.css" />
<link href="vendor/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Resources/css/styles.css">
<link href="https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="vendor/css/js-image-slider.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet" type="text/css">
<title>Homepage</title>
<link rel="apple-touch-icon" sizes="180x180" href="/resources/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/resources/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
<link rel="manifest" href="/resources/favicons/site.webmanifest">
<link rel="mask-icon" href="/resources/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/resources/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<header>
<!-- *******************************-->
<!-- NOTICE -->
<!-- *******************************-->
<div class="notice col span-1-of-3">
<img src="resources/img/notice.png" alt="notice" class="notice-img">
<script type="text/javascript" src="vendor/js/jquery.min.js"></script>
<script type="text/javascript" src="vendor/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="vendor/js/jquery.easy-ticker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var dd = $('.vticker').easyTicker({
direction: 'up',
easing: 'easeInOutBack',
speed: 'slow',
interval: 2000,
height: 'auto',
visible: 7,
mousePause: 0,
}).data('easyTicker');
});
</script>
<style>
.notice-img {
width: 100px;
margin-left: 50px;
margin-top: 10px;
}
.vticker {
background-color: #fff;
box-shadow: 0 5px 5px 0 rgba(105, 105, 105, 0.2);
width: 209.76px;
border-radius: 5px;
position: fixed;
}
.vticker ul {
padding: 0;
}
.vticker li {
border-bottom: 0.5px solid rgba(85, 85, 85, 0.33);
padding: 10px;
font-size: 60%;
font-weight: 500;
}
.vticker li a {
color: #9D4949;
text-decoration: none;
}
</style>
<div class="vticker">
<ul>
<li class="list-item"><a href="resources/pdf/alumnimeet2018.pdf" target="_blank">Alumni Meet - 2018</a></li>
<li class="list-item"><a href="resources/pdf/spss_brochure.pdf" target="_blank">Two Day National Workshop on SPSS dt. 27-28/Feb/18</a></li>
<li class="list-item"><a href="resources/downloads/lab_file_mba_sem_iv.docx" download>Guidelines COMPUTER lab MBA Sem-IV</a></li>
<li class="list-item"><a href="">Admission Open - 2018 in MBA - MSW - BBA - BCA - B.Com</a></li>
<li class="list-item"><a href="http://fwld.in/hdfcbankso" target="_blank">Jobs!! Apply Online - HDFC Bank Recruitment</a></li>
<li class="list-item"><a href="resources/downloads/tpg.zip" download>Summer Training Project Report Guidelines</a></li>
<li class="list-item"><a href="resources/pdf/twpr.pdf" target="_blank">Training Progress Report Format</a></li>
</ul>
</div>
</div>
</header>
<script src="vendor/js/js-image-slider.js" type="text/javascript"></script>
</body>
используется js lib
, поэтому здесь я объясню всю проблему.я использовал плагин js news-ticker, а затем дал тикеру новостей белый фон с изображением уведомления поверх фонового слоя.но каждый раз, когда я минимизирую окно браузера, новостная лента и белый фон распадаются на две части.и соседнее изображение оказывается зажатым между ними.Как я могу исправить это разделение слоев или как я могу добавить изображение уведомления поверх тикера новостей, чтобы не было никакого фона для разделения.заранее спасибо.;)