http://disshi10.rusff.me/
Подскажите как сделать прокрутку в таблице в каждой колонке, а не в блоке как сейчас? (В стиле каждой колонке прописываю, а она не встаёт )
как сделать прокрутку в таблице в каждой колонке (CSS, HTML)
Сообщений 1 страница 9 из 9
Поделиться114.12.22 10:29
Поделиться214.12.22 10:33
(В стиле каждой колонке прописываю, а она не встаёт )
Чот в инспекторе не видать на каждую - выложите код
Поделиться314.12.22 10:45
#p177548,Enima написал(а):(В стиле каждой колонке прописываю, а она не встаёт )
Чот в инспекторе не видать на каждую - выложите код
Я их удалила, так как толку не было
<div id="tabs">
<!-- блок подменю -->
<div id="submenu"><!-- под кнопкой игра -->
<div id="game" class="submenutext"><!-- блок новости -->
<div id="news1">
<div id="zag">
Неигровые новости:
</div>
<div id="text">
⁃ добавлены разделы для любителей дегустации пива. Ознакомьтесь с ними в данном разделе, может быть вы сможете обрести новое хобби! <br>
⁃ Сменилась погода и было выбрано название сезона: Зима Чавкающего Снега
</div>
</div>
<div id="news2">
<div id="zag">
Игровые новости:
</div>
<div id="text">
⁃ в клан Солнцекошек пришлый одиночка принёс блох. Львы до сих пор борются с их нашествием <br>
⁃ Тигры и горные кошки поймали огромного яка: чтобы он не сгнил, ели его два клана сразу. <br>
⁃ Землетрясение прогремело в тропических горах. Вольные кошки могут исследовать местность по правилам ивента. <br>
⁃ Пестрокошки плохо молились духам и были наказаны: молния сожгла лес колючих деревьев <br>
</div>
</div>
<!-- конец блока новости --><!-- блок объявление и ссылки -->
<div id="ad_link"><!-- блок объявление -->
<div id="ad">
<div id="zag">
Объявления:
</div>
<div id="text">
⁃ в акциях появилось несколько новых предложений от амс. Нам нужна ваша помощь! <br>
⁃ погода на этот месяц определена, а какая будет в следующем? Пишите в этой теме свои пожелания <br>
⁃ Проходит ивент. Подробнее читайте тут <br>
⁃ Проголосуйте за награды!<br>
</div>
</div>
<!-- конец блока объявление--><!-- блок ссылки -->
<div id="link">
<div id="zag">
Полезные ссылки:
</div>
<div id="link_text">
<a href="#"><span>⁃ Самая важная ссылка для каждого игрока - это ссылка на Правила. Не забывайте регулярно освежать память. </span></a><br>
<a href="#"><span> ⁃ Новичкам стоит ознакомиться с Лором и навигацией по сайту, чтобы быстро влиться в поток. </span></a><br>
<a href="#"> <span>⁃ Часто задаваемые вопросы тут. Прочитайте тему, это может помочь Вам быстро разобраться с проблемой. </span></a><br>
</div>
</div>
<!-- конец блок ссылки --></div>
<!-- конец блока объявления и ссылки --></div>
<!-- конец под кнопкой игра --><!-- блок помощь -->
<div id="help" class="submenutext">
<div id="help_pic">
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про гепардов</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про пум/ирбисов</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про тигров</span></a>
<br>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про ягуаров</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про львов</span></a>
<a href="#"><img src="https://forumstatic.ru/files/0007/e3/f7/69291.jpg"><span>Я хочу спросить про леопардов</span></a>
</div>
</div>
<!-- конец блока помощь --></div>
<!-- конец блока подменю --><!-- колонка меню -->
<div id="menu">
<span alt="#game" style="cursor: pointer;">Игра</span><br>
<span alt="#help" style="cursor: pointer;">Помощь</span>
</div>
<!-- конец колонки меню -->
</div><style>
#tabs {
border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/39055.png);
border-image-slice: 35 190 35 fill;
border-image-repeat: repeat round;
border-image-width: auto;
width: 100%;
max-height: 160px;
margin: 0px 0;
padding: 2%;
z-index: 1;
}#menu, #submenu {
display: table-cell;
vertical-align: top;
}#menu {
margin: -10%;
padding: 3% 0% 3% 0%;
width: 60%;
}#menu span {
display: block;
text-align: center;
margin: 10% -5%;
padding: 3% 0% 10% 0%;
line-height: 25px;
width: 100%;
font-size: 15px;
font-weight: bold;
position: relative;
border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
border-image-slice: 55 200 35 fill;
border-image-repeat: repeat round;
border-image-width: auto;
border-image-outset: 2px 10px 2px 10px;
z-index: 2;
}#menu .active {
color: #efe1c9;
}#menu span:hover {
color: #ffffff;
}#submenu {
margin-left: 3%;
width: 100%;
}.submenutext {
position: relative;
border-image-source: url(https://forumstatic.ru/files/001b/bf/bc/97992.png?v=1);
border-image-slice: 55 200 35 fill;
border-image-repeat: repeat round;
border-image-width: auto;
border-image-outset: 10px;
z-index: 2;
height: 125px;
padding: 1%;
margin: 1%;
width: 92%;
}#game {
position: relative;
overflow-y: auto;
height: 125px;
}#news1 {
position: relative;
display: table-cell;
overflow-y: auto;
height: 125px;
padding: 3%;
margin: 3%;
}#news2 {
position: relative;
display: table-cell;
overflow-y: auto;
height: 125px;
padding: 3%;
margin: 3%;
}#ad_link {
display: table-cell;
height: 125px;
}#ad {
display: table-row;
height: 60px;
overflow-y: auto;
padding: 3%;
}#link {
display: table-row;
height: 60px;
overflow-y: auto;
padding: 5% 3% 3% 3%;
}#zag {
text-align: center;
font-family: 'Comic CAT';
text-transform: lowercase;
padding-top: 2%;
font-size: 15px!important;
color: #0f120b;
}#text, #link_text {
text-align: left;
padding-top: 1%;
font-family: 'Helvetica';
text-transform: lowercase;
font-size: 10px!important;
color: #000000;
}#link_text a {
color: #33391e;
}#help_pic {
text-align: center;
overflow-y: auto;
height: 125px;
}#help_pic a {
display: inline-block;
margin: 10px;
}#help_pic a img {
display: block;
width: 25%;
height: 25%;
}</style>
<script type="text/javascript">
$(document).ready(function() {
$("#submenu div.submenutext").hide();
$("#menu span:first").addClass("active").show();
$("#submenu div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("active");
$(this).addClass("active");
$("#submenu div.submenutext").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
});
</script>
Поделиться414.12.22 11:06
Enima
Ну во первых в указанном стиле нет прокруток на данные блоки, ибо нет для него правила с overflow
второе: поскок блоков несколько, стоит им проставлять не ID, а class, ибо правила к ID действуют только на один единственный первый блок
3-е Не стоит идти с вопросом удаляя стиль к блокам(для анализа траблов помогающими)
Поделиться514.12.22 11:10
Enima
Ну во первых в указанном стиле нет прокруток на данные блоки, ибо нет для него правила с overflowвторое: поскок блоков несколько, стоит им проставлять не ID, а class, ибо правила к ID действуют только на один единственный первый блок
Так я прописывала overflow к ним
Потом удалила, т к не работали
Или вы не об этом? Я тормоз)
Попробую с class переписать, посмотрю что выйдет
Поделиться614.12.22 11:11
Попробую с class переписать, посмотрю что выйдет
Если не выйдет, не удаляйте неудачную пробу, ибо удобно анализировать править в инспекторе почему не работает
Поделиться714.12.22 14:28
Попробую с class переписать, посмотрю что выйдет
Добрый день.
Идентификатор должен быть уникален, присутствовать на странице в единственном экземпляре. Т.е. id="game" должно быть использовано один раз, в открывающем теге блока div, внутри которого у вас находятся все блоки с новостями. Все остальные id="game" нужно удалить. Классы для блоков, которые должны выглядеть примерно одинаково, могут (и даже должны) повторяться. Т.е. у вас должно быть не class="news1" и class="news2" для соседних блоков, а просто class="news" в обоих. В заголовках у вас правильно написано class="zag" для обоих. Для текста тоже нужно прописать не class="text1", class="text2", а просто class="text". После этого вам не придётся писать одинаковый стиль для каждого блока, типа
.text1 {overflow-y: auto;}
.text2 {overflow-y: auto;}
...
.text999 {overflow-y: auto;}
Достаточно будет написать один раз
.text {overflow-y: auto;} для всех блоков, у которых прописан class="text".
Поделиться814.12.22 15:06
#p177554,Enima написал(а):Попробую с class переписать, посмотрю что выйдет
Добрый день.
Идентификатор должен быть уникален, присутствовать на странице в единственном экземпляре. Т.е. id="game" должно быть использовано один раз, в открывающем теге блока div, внутри которого у вас находятся все блоки с новостями. Все остальные id="game" нужно удалить. Классы для блоков, которые должны выглядеть примерно одинаково, могут (и даже должны) повторяться. Т.е. у вас должно быть не class="news1" и class="news2" для соседних блоков, а просто class="news" в обоих. В заголовках у вас правильно написано class="zag" для обоих. Для текста тоже нужно прописать не class="text1", class="text2", а просто class="text". После этого вам не придётся писать одинаковый стиль для каждого блока, типа
.text1 {overflow-y: auto;}
.text2 {overflow-y: auto;}
...
.text999 {overflow-y: auto;}
Достаточно будет написать один раз
.text {overflow-y: auto;} для всех блоков, у которых прописан class="text".
Спасибо за подсказки, несколько блоков текст, так как разное форматирование планируется
Про div учту
Отредактировано Enima (14.12.22 15:07)
Поделиться914.12.22 15:54
Enima, я вам нашла статейку про правильное использование классов и идентификаторов. Тут.