Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Форум для новичков » Общие вопросы от новичков (63) #2


Общие вопросы от новичков (63) #2

Сообщений 1461 страница 1480 из 1938

1

Инструменты для поиска и редактирования стиля (скриптов).

Как с помощью браузера можно определить элемент дизайна.

Каталог скриптов/CSS

Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.

Типовые Вопросы (ЧаВо)

Ответы на часто задаваемые вопросы.

Как задавать вопросы! Разница между стилем и скриптом. ( Советы)

Плюс к названию темы еще и Памятка.

Любой вопрос по оформлению/неполадкам сопровождайте ссылкой на форум, по которому возникли сложности.

Предыдущая часть темы: Общие вопросы от новичков (63)

+2

1461

ACT3255, поправил, поставьте вот этот код:

Код:
<!-- Последние 10 сообщений в темах с наведением -->
<style>
#pun-t10 {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  background: #000000;
  width: calc(100% - 4px);
  margin-bottom: 4px;
}
 
.stats-t10 {
  background: #5381B5;
  width: 100%;
}
 
.body-t10 {padding: 1em 0;}

.last-post-t10 {
  position: relative;
  text-align: center;
}

.tipsy-t10 {display: none;}
 
.last-post-t10:hover .tipsy-t10 {
  display: block;
  position: absolute;
  min-width: 100%;
  max-width: 400px;
  max-height: 170px;
  overflow: hidden;
  padding: 5px 8px 4px;
  background-color: white;
  color: inherit;
  font-size: 12px;
  bottom: 30px;
  border-radius: 5px;
  border-width: 1px 0px 1px 1px;
  box-sizing: content-box;
  z-index: 1000;
}
 
.tipsy-t10:after {
  content: '';
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
  margin: 0 0 0 0px;
}

.last-post-t10 a {
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
}
</style>
<script type="text/javascript">
$(function(){
var arrays = 859;
$.get('export.php?type=rss&tid=' + arrays,'',processXML);
function processXML(data){
$(data).find('item:lt(10)').each(function(){  
var JAuthor=$(this).find('author').text().slice(14,-1);
var JTitle=$(this).find('title').text().split('.').join('');
var JLink=$(this).find('link').text();
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
 
var vtopB = '<div class="stats-t10 body-t10">\
            <div class="last-post-t10"><a href="'+JLink+'" target="_blank">'+JTitle+'</a><div class="tipsy-t10">'+JContent+'</div></div></div>';
 
$('#pun-t10').append(vtopB);
});
} 
var vtopA = '<div id="pun-t10"></div>';
 
$('#pun-index #My_Marq001').after(vtopA);
});
</script>

0

1462

kolobdur74
Готово, если названия не длинные, может тогда 3 колонки по 5 названий фильмов?

0

1463

ACT3255 написал(а):

Готово, если названия не длинные, может тогда 3 колонки по 5 названий фильмов?

Попробуйте такой код:

Код:
<!-- Последние 10 сообщений в темах с наведением -->
<style>
#pun-t10 {
  display: grid;
  grid-template-columns: 33.2% 33.2% 33.2%;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  background: #000000;
  width: calc(100% - 4px);
  margin-bottom: 4px;
}
 
.stats-t10 {
  background: #5381B5;
  width: 100%;
}
 
.body-t10 {padding: 1em 0;}

.last-post-t10 {
  position: relative;
  text-align: center;
}

.tipsy-t10 {display: none;}
 
.last-post-t10:hover .tipsy-t10 {
  display: block;
  position: absolute;
  min-width: 100%;
  max-width: 400px;
  max-height: 170px;
  overflow: hidden;
  padding: 5px 8px 4px;
  background-color: white;
  color: inherit;
  font-size: 12px;
  bottom: 30px;
  border-radius: 5px;
  border-width: 1px 0px 1px 1px;
  box-sizing: content-box;
  z-index: 10000;
}
 
.tipsy-t10:after {
  content: '';
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
  margin: 0 0 0 0px;
}

.last-post-t10 a {
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
}
</style>
<script type="text/javascript">
$(function(){
var arrays = 859;
$.get('export.php?type=rss&tid=' + arrays,'',processXML);
function processXML(data){
$(data).find('item:lt(15)').each(function(){  
var JAuthor=$(this).find('author').text().slice(14,-1);
var JTitle=$(this).find('title').text().split('.').join('');
var JLink=$(this).find('link').text();
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
 
var vtopB = '<div class="stats-t10 body-t10">\
            <div class="last-post-t10"><a href="'+JLink+'" target="_blank">'+JTitle+'</a><div class="tipsy-t10">'+JContent+'</div></div></div>';
 
$('#pun-t10').append(vtopB);
});
} 
var vtopA = '<div id="pun-t10"></div>';
 
$('#pun-index #My_Marq001').after(vtopA);
});
</script>

0

1464

kolobdur74
https://forumupload.ru/uploads/0000/14/1c/32894/t857143.jpg
Как то так )))

0

1465

ACT3255 написал(а):

Как то так )))

Нормально? Наведение оставить?

0

1466

kolobdur74
https://forumupload.ru/uploads/0000/14/1c/32894/t235295.jpg
А по бокам скрина никак прозрачку не сделать? Что бы название было с фоном, а скрин без фона?

0

1467

kolobdur74 написал(а):

Нормально? Наведение оставить?

kolobdur74 написал(а):
ACT3255 написал(а):

Как то так )))

Нормально? Наведение оставить?

Отлично!
Наведение лучше оставить ибо там видно полное название, вот ток прозрачку по бокам скрина бы и вообще идеально.
https://forumupload.ru/uploads/0000/14/1c/32894/t988444.jpg

Отредактировано ACT3255 (Вс, 10 Ноя 2024 14:20:42)

0

1468

ACT3255 написал(а):

Наведение лучше оставить ибо там видно полное название, вот ток прозрачку по бокам скрина бы и вообще идеально.

Это где?

0

1469

kolobdur74
Скрин выше сделал, когда при наведении открывается, там Название, его желательно с фоном, а скрин без фона, ну по бокам белый фон есть.

0

1470

ACT3255, как на счет такого варианта:

Код:
<!-- Последние 10 сообщений в темах с наведением -->
<style>
#pun-t10 {
  display: grid;
  grid-template-columns: 33.2% 33.2% 33.2%;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  background: #fff;
  width: calc(100% - 4px);
  margin-bottom: 4px;
}
 
.stats-t10 {
  background: #5381B5;
  width: 100%;
}
 
.body-t10 {padding: 1em 0;}

.last-post-t10 {
  position: relative;
  text-align: center;
}

.tipsy-t10 {display: none;}
 
.last-post-t10:hover .tipsy-t10 {
  display: block;
  position: absolute;
  min-width: 100%;
  max-width: 400px;
  max-height: 170px;
  overflow: hidden;
  padding: 5px 8px 4px;
  background: rgba(83, 129, 181, 0.8);
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
  font-size: 12px;
  bottom: 30px;
  border-radius: 5px;
  border-width: 1px 0px 1px 1px;
  box-sizing: content-box;
  z-index: 10000;
}
 
.tipsy-t10:after {
  content: '';
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
  margin: 0 0 0 0px;
}

.last-post-t10 a {
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
}
</style>
<script type="text/javascript">
$(function(){
var arrays = 859;
$.get('export.php?type=rss&tid=' + arrays,'',processXML);
function processXML(data){
$(data).find('item:lt(15)').each(function(){  
var JAuthor=$(this).find('author').text().slice(14,-1);
var JTitle=$(this).find('title').text().split('.').join('');
var JLink=$(this).find('link').text();
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
 
var vtopB = '<div class="stats-t10 body-t10">\
            <div class="last-post-t10"><a href="'+JLink+'" target="_blank">'+JTitle+'</a><div class="tipsy-t10">'+JContent+'</div></div></div>';
 
$('#pun-t10').append(vtopB);
});
} 
var vtopA = '<div id="pun-t10"></div>';
 
$('#pun-index #My_Marq001').after(vtopA);
});
</script>

+1

1471

kolobdur74 написал(а):
  • <!-- Последние 10 сообщений в темах с наведением -->

  • <style>

  • #pun-t10 {

  • display: grid;

  • grid-template-columns: 33.2% 33.2% 33.2%;

  • grid-template-rows: auto;

  • justify-items: center;

  • align-items: center;

  • column-gap: 4px;

  • row-gap: 2px;

  • background: #fff;

  • width: calc(100% - 4px);

  • margin-bottom: 4px;

  • }

  • .stats-t10 {

  • background: #5381B5;

  • width: 100%;

  • }

  • .body-t10 {padding: 1em 0;}

  •  

  • .last-post-t10 {

  • position: relative;

  • text-align: center;

  • }

  •  

  • .tipsy-t10 {display: none;}

  • .last-post-t10:hover .tipsy-t10 {

  • display: block;

  • position: absolute;

  • min-width: 100%;

  • max-width: 400px;

  • max-height: 170px;

  • overflow: hidden;

  • padding: 5px 8px 4px;

  • background: rgba(83, 129, 181, 0.8);

  • color: #fff !important;

  • text-shadow: 0 -1px 0 #385b83;

  • font-size: 12px;

  • bottom: 30px;

  • border-radius: 5px;

  • border-width: 1px 0px 1px 1px;

  • box-sizing: content-box;

  • z-index: 10000;

  • }

  • .tipsy-t10:after {

  • content: '';

  • border: 10px solid transparent;

  • border-top-color: white;

  • position: absolute;

  • margin: 0 0 0 0px;

  • }

  •  

  • .last-post-t10 a {

  • color: #fff !important;

  • text-shadow: 0 -1px 0 #385b83;

  • }

  • </style>

  • <script type="text/javascript">

  • $(function(){

  • var arrays = 859;

  • $.get('export.php?type=rss&tid=' + arrays,'',processXML);

  • function processXML(data){

  • $(data).find('item:lt(15)').each(function(){

  • var JAuthor=$(this).find('author').text().slice(14,-1);

  • var JTitle=$(this).find('title').text().split('.').join('');

  • var JLink=$(this).find('link').text();

  • var JContent=$(this).find('description').text();

  • var JPosted=$(this).find('pubDate').text().slice(4,-5);

  • var vtopB = '<div class="stats-t10 body-t10">\

  • <div class="last-post-t10"><a href="'+JLink+'" target="_blank">'+JTitle+'</a><div class="tipsy-t10">'+JContent+'</div></div></div>';

  • $('#pun-t10').append(vtopB);

  • });

  • }

  • var vtopA = '<div id="pun-t10"></div>';

  • $('#pun-index #My_Marq001').after(vtopA);

  • });

  • </script>

Да, вроде смотрится хорошо. Наверное так и оставим, правда название не очень выделяется и впритык к скрину, там наверное расстояние между названием и скрином не раздвинуть?

0

1472

ACT3255 написал(а):

Да, вроде смотрится хорошо. Наверное так и оставим, правда название не очень выделяется и впритык к скрину, там наверное расстояние между названием и скрином не раздвинуть?

Вот так:

Код:
<!-- Последние 10 сообщений в темах с наведением -->
<style>
#pun-t10 {
  display: grid;
  grid-template-columns: 33.2% 33.2% 33.2%;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  background: #fff;
  width: calc(100% - 4px);
  margin-bottom: 4px;
}
 
.stats-t10 {
  background: #5381B5;
  width: 100%;
}
 
.body-t10 {padding: 1em 0;}

.last-post-t10 {
  position: relative;
  text-align: center;
}

.tipsy-t10 {display: none;}
 
.last-post-t10:hover .tipsy-t10 {
  display: block;
  position: absolute;
  min-width: 100%;
  max-width: 400px;
  max-height: 170px;
  overflow: hidden;
  padding: 5px 8px 4px;
  background: rgba(83, 129, 181, 0.8);
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
  font-size: 12px;
  bottom: 30px;
  border-radius: 5px;
  border-width: 1px 0px 1px 1px;
  box-sizing: content-box;
  z-index: 10000;
}
 
.tipsy-t10:after {
  content: '';
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
  margin: 0 0 0 0px;
}

.tipsy-t10 p strong {
  display: inline-block;
  margin-bottom: 6px;
}

.last-post-t10 a {
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
}
</style>
<script type="text/javascript">
$(function(){
var arrays = 859;
$.get('export.php?type=rss&tid=' + arrays,'',processXML);
function processXML(data){
$(data).find('item:lt(15)').each(function(){  
var JAuthor=$(this).find('author').text().slice(14,-1);
var JTitle=$(this).find('title').text().split('.').join('');
var JLink=$(this).find('link').text();
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
 
var vtopB = '<div class="stats-t10 body-t10">\
            <div class="last-post-t10"><a href="'+JLink+'" target="_blank">'+JTitle+'</a><div class="tipsy-t10">'+JContent+'</div></div></div>';
 
$('#pun-t10').append(vtopB);
});
} 
var vtopA = '<div id="pun-t10"></div>';
 
$('#pun-index #My_Marq001').after(vtopA);
});
</script>

+2

1473

kolobdur74
Да, вот так хорошо, спасибо огромное, дай Бог Вам здоровья.

+1

1474

@Deff Вам тоже большое спасибо за отзывчивость, если будут идеи с полным названием, напишите пожалуйста.
Скрипт @kolobdur74 тоже очень хорош.

+1

1475

ACT3255 написал(а):

если будут идеи с полным названием

Вот вариант с полным названием:

Код:
<!-- Последние 10 сообщений в темах с наведением -->
<style>
#pun-t10 {
  display: grid;
  grid-template-columns: 33.2% 33.2% 33.2%;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  column-gap: 4px;
  row-gap: 2px;
  background: #fff;
  width: calc(100% - 4px);
  margin-bottom: 4px;
}
 
.stats-t10 {
  background: #5381B5;
  width: 100%;
}
 
.body-t10 {padding: 1em 0;}

.last-post-t10 {
  position: relative;
  text-align: center;
}

.tipsy-t10 {display: none;}
 
.last-post-t10:hover .tipsy-t10 {
  display: block;
  position: absolute;
  min-width: 100%;
  max-width: 400px;
  max-height: 170px;
  overflow: hidden;
  padding: 5px 8px 4px;
  background: rgba(83, 129, 181, 0.8);
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
  font-size: 12px;
  bottom: 30px;
  border-radius: 5px;
  border-width: 1px 0px 1px 1px;
  box-sizing: content-box;
  z-index: 10000;
}
 
.tipsy-t10:after {
  content: '';
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
  margin: 0 0 0 0px;
}

.tipsy-t10 p strong {
  display: inline-block;
  margin-bottom: 6px;
}

.last-post-t10 a {
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
}
</style>
<script type="text/javascript">
$(function(){
var arrays = 859;
$.get('export.php?type=rss&tid=' + arrays,'',processXML);
function processXML(data){
$(data).find('item:lt(15)').each(function(){  
var JAuthor=$(this).find('author').text().slice(14,-1);
var JLink=$(this).find('link').text();
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
var JTitle=$(JContent).find('strong').text();
 
var vtopB = '<div class="stats-t10 body-t10">\
            <div class="last-post-t10"><a href="'+JLink+'" target="_blank">'+JTitle+'</a><div class="tipsy-t10">'+JContent+'</div></div></div>';
 
$('#pun-t10').append(vtopB);
});
} 
var vtopA = '<div id="pun-t10"></div>';
 
$('#pun-index #My_Marq001').after(vtopA);
});
</script>

Но название всегда должно быть выделено жирным, остальное не должно быть жирным.

+1

1476

kolobdur74
Огромнейшее спасибо, попробую вечером, ушел от ПК.
Название всегда жирное и более ничего.
Вы прям кудесники какие то!

+1

1477

kolobdur74
https://forumupload.ru/uploads/0000/14/1c/32894/t315316.jpg
Как то так... просветы какие то из-за разной длины названий.
А хотелось бы вот так:
https://forumupload.ru/uploads/0000/14/1c/32894/t834692.jpg
Добавлено спустя 10 минут 38 секунд:
Удалил

Код:
 justify-items: center;

https://forumupload.ru/uploads/0000/14/1c/32894/t907587.jpg
Цвет вроде выровнялся.

Отредактировано ACT3255 (Вс, 10 Ноя 2024 21:28:31)

0

1478

ACT3255, попробуйте такой вариант:

Код:
<!-- Последние 10 сообщений в темах с наведением -->
<style>
#pun-t10 {
  display: grid;
  grid-template-columns: 33.2% 33.2% 33.2%;
  grid-template-rows: auto;
  column-gap: 4px;
  row-gap: 2px;
  background: #fff;
  width: calc(100% - 4px);
  margin-bottom: 4px;
}
 
.stats-t10 {
  background: #5381B5;
  width: 100%;
}
 
.body-t10 {
  display: grid;
  align-content: center;
  padding: 10px 0;
}
 
.last-post-t10 {
  position: relative;
  text-align: center;
}
 
.tipsy-t10 {display: none;}
 
.last-post-t10:hover .tipsy-t10 {
  display: block;
  position: absolute;
  min-width: 100%;
  max-width: 400px;
  max-height: 170px;
  overflow: hidden;
  padding: 5px 8px 4px;
  background: rgba(83, 129, 181, 0.8);
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
  font-size: 12px;
  bottom: 30px;
  border-radius: 5px;
  border-width: 1px 0px 1px 1px;
  box-sizing: content-box;
  z-index: 10000;
}
 
.tipsy-t10:after {
  content: '';
  border: 10px solid transparent;
  border-top-color: white;
  position: absolute;
  margin: 0 0 0 0px;
}
 
.tipsy-t10 p strong {
  display: inline-block;
  margin-bottom: 6px;
}
 
.last-post-t10 a {
  color: #fff !important;
  text-shadow: 0 -1px 0 #385b83;
}
</style>
<script type="text/javascript">
$(function(){
var arrays = 859;
$.get('export.php?type=rss&tid=' + arrays,'',processXML);
function processXML(data){
$(data).find('item:lt(15)').each(function(){  
var JAuthor=$(this).find('author').text().slice(14,-1);
var JLink=$(this).find('link').text();
var JContent=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-5);
var JTitle=$(JContent).find('strong').text();
 
var vtopB = '<div class="stats-t10 body-t10">\
            <div class="last-post-t10"><a href="'+JLink+'" target="_blank">'+JTitle+'</a><div class="tipsy-t10">'+JContent+'</div></div></div>';
 
$('#pun-t10').append(vtopB);
});
} 
var vtopA = '<div id="pun-t10"></div>';
 
$('#pun-index #My_Marq001').after(vtopA);
});
</script>

+1

1479

kolobdur74
Работает, вроде так же как я и выше писал.

ACT3255 написал(а):

Удалил

Код:
 justify-items: center;

https://forumupload.ru/uploads/0000/14/1c/32894/t907587.jpg
Цвет вроде выровнялся.

0

1480

ACT3255 написал(а):

Работает, вроде так же как я и выше писал.

Я выровнял надписи по высоте, они несколько были не по центру..

+1


Вы здесь » Единый форум поддержки » Форум для новичков » Общие вопросы от новичков (63) #2