Общие вопросы по оформлению (65)

Поделиться1Ср, 13 Фев 2019 13:52:59

Автор: Maquis
Модератор
Зарегистрирован: Чт, 5 Ноя 2009
Сообщений: 1938
Уважение: +1962
Позитив: +1658
Предупреждения: ‡
Последний визит:
Сб, 26 Фев 2022 23:41:00

Предыдущая тема: Общие вопросы по оформлению (64)


Инструменты для поиска и редактирования стиля (скриптов).	Как с помощью браузера можно определить элемент дизайна.
Каталог скриптов/CSS	Полезные скрипты, необходимые темы для новичков, а также ссылки на сайты рассказывающие что такое HTML и CSS.
Типовые Вопросы (ЧаВо)	Ответы на часто задаваемые вопросы.
Как задавать вопросы! Разница между стилем и скриптом. ( Советы)	Плюс к названию темы еще и Памятка.

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

+4

Поделиться581Пт, 22 Ноя 2019 20:10:29

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Sportbar.mybb, сделал такой вариант:

Вариант

Код:

<style>
.tabfoot {
display: inline-flex;
flex-flow: row wrap;
width: 100%;
border-top: 2px solid #0071BC;
border-left: 3px solid #0071BC;
border-right: 3px solid #0071BC;
}

.cellfoot {
flex: 1 1 0px;
display: flex;
flex-flow: column nowrap;

}
.cellfoot div {
flex: 1;
text-align: center;
vertical-align: top;
border: 1px solid #50A8DB;
padding: 10px 0;
}
.cellfoot div:first-child {min-height: 120px;}
.cellfoot div:last-child {
border-bottom: 3px solid #0071BC;
min-height: 160px;
}
.tabfoot .pad {
padding: 0;
display: flex;
}
.tabfoot span {
flex: auto;
text-align: center;
width: 40%;
}
.tabfoot span.cifrL, .tabfoot span.cifrR {
width: 2%;
}
.cifrL {
border-right: 1px solid #50A8DB;
}
.cifrR {
border-left: 1px solid #50A8DB;
}
</style>
<div class="tabfoot">
  <div class="cellfoot">
    <div>
	  <img style="width: 59px;" src="http://forumstatic.ru/files/000b/0a/f7/98700.png">
      <h3>Чемпионат <br> Англии</h3>
	</div>
	<div><a href="http://sportbar.mybb.ru/viewtopic.php?id=400&amp;p=8#p55898"> Прогноз на 13й тур </a></div>
	<div><h3> 23.11.2019 </h3></div>
	<div><b>Призовая тройка</b></div>
	<div class="pad"><span class="cifrL">1</span> <span>Master-Bugi</span> <span class="cifrR">112</span></div>
	<div class="pad"><span class="cifrL">2</span> <span>Главбух</span> <span class="cifrR">111</span></div>
	<div class="pad"><span class="cifrL">3</span> <span>Г.Иванов</span> <span class="cifrR">109</span></div>
	<div>
	  <img style="width: 150px;" src="http://forumstatic.ru/files/000b/0a/f7/43814.png">
      <h3>Блиц-турнир<br>Чемпионский пояс недели<br><a href="http://sportbar.mybb.ru/viewtopic.php?id=409#p55815"> Сделать прогноз </a></h3>
    </div>
  </div>
  
  <div class="cellfoot">
    <div>
	  <img style="width: 100px;" src="http://forumstatic.ru/files/000b/0a/f7/85256.png">
      <h3>Чемпионат <br> Германии</h3></div>
	<div><a href="http://sportbar.mybb.ru/viewtopic.php?id=403&amp;p=8#p55924"> Прогноз на 12й тур </a></div>
	<div><h3> 22.11.2019 </h3></div>
	<div><b>Призовая тройка</b></div>
	<div class="pad"><span class="cifrL">1</span> <span>Master-Bugi</span> <span class="cifrR">78</span></div>
	<div class="pad"><span class="cifrL">2</span> <span>Главбух</span> <span class="cifrR">72</span></div>
	<div class="pad"><span class="cifrL">3</span> <span>Лирик</span> <span class="cifrR">66</span></div>
	<div>
	  <img style="width: 80px;" src="http://forumavatars.ru/img/avatars/000b/0a/f7/33-1311618231.jpg">
      <h3>Победитель недели<br>Blink</h3>
	  <br>
    </div>
  </div>
  
  <div class="cellfoot">
    <div>
	  <img style="width: 59px;" src="http://forumstatic.ru/files/000b/0a/f7/12631.png">
      <h3>Чемпионат <br> Испании</h3>
	</div>
	<div><a href="http://sportbar.mybb.ru/viewtopic.php?id=402&amp;p=9#p55858"> Прогноз на 14й тур </a></div>
	<div><h3> 22.11.2019 </h3></div>
	<div><b>Призовая тройка</b></div>
	<div class="pad"><span class="cifrL">1</span> <span>Master-Bugi</span> <span class="cifrR">104</span></div>
	<div class="pad"><span class="cifrL">2</span> <span>23Valdes23</span> <span class="cifrR">104</span></div>
	<div class="pad"><span class="cifrL">3</span> <span>Г.Иванов</span> <span class="cifrR">99</span></div>
	<div>8</div>
  </div>
  
  <div class="cellfoot">
    <div>
	  <img style="width: 83px;" src="http://forumstatic.ru/files/000b/0a/f7/70052.png">
      <h3>Чемпионат <br> Италии</h3>
	</div>
	<div><a href="http://sportbar.mybb.ru/viewtopic.php?id=404&amp;p=8#p55967"> Прогноз на 13й тур </a></div>
	<div><h3> 23.11.2019 </h3></div>
	<div><b>Призовая тройка</b></div>
	<div class="pad"><span class="cifrL">1</span> <span>Главбух</span> <span class="cifrR">109</span></div>
	<div class="pad"><span class="cifrL">2</span> <span>Blink</span> <span class="cifrR">109</span></div>
	<div class="pad"><span class="cifrL">3</span> <span>Г.Иванов</span> <span class="cifrR">104</span></div>
	<div>8</div>
  </div>
  
  <div class="cellfoot">
    <div>
	  <img style="width: 71px;" src="http://forumstatic.ru/files/000b/0a/f7/10363.png">
      <h3>Чемпионат <br> России</h3>
	</div>
	<div><a href="http://sportbar.mybb.ru/viewtopic.php?id=396&amp;p=17#p55846"> Прогноз на 17й тур </a></div>
	<div><h3> 22.11.2019 </h3></div>
	<div><b>Призовая тройка</b></div>
	<div class="pad"><span class="cifrL">1</span> <span>Instruktor</span> <span class="cifrR">126</span></div>
	<div class="pad"><span class="cifrL">2</span> <span>Г.Иванов</span> <span class="cifrR">122</span></div>
	<div class="pad"><span class="cifrL">3</span> <span>Оля</span> <span class="cifrR">119</span></div>
	<div>8</div>
  </div>
  
  <div class="cellfoot">
    <div>
	  <img style="width: 71px;" src="http://forumstatic.ru/files/000b/0a/f7/43960.jpg">
      <h3>Лига <br> чемпионов</h3></div>
	<div><a href="http://sportbar.mybb.ru/viewtopic.php?id=399&amp;p=6#p55861"> Прогноз на 7й тур </a></div>
	<div><h3> 26.11.2019 </h3></div>
	<div><b>Призовая тройка</b></div>
	<div class="pad"><span class="cifrL">1</span> <span>Instruktor</span> <span class="cifrR">71</span></div>
	<div class="pad"><span class="cifrL">2</span> <span>Оля</span> <span class="cifrR">70</span></div>
	<div class="pad"><span class="cifrL">3</span> <span>Валера</span> <span class="cifrR">69</span></div>
	<div>8</div>
  </div>
  
  <div class="cellfoot">
    <div>
	  <img style="width: 72px;" src="http://forumstatic.ru/files/000b/0a/f7/84271.jpg">
      <h3>Лига <br> Европы</h3></div>
	<div><a href="http://sportbar.mybb.ru/viewtopic.php?id=406&amp;p=4#p55902"> Прогноз на 5й тур </a></div>
	<div><h3> 28.11.2019 </h3></div>
	<div><b>Призовая тройка</b></div>
	<div class="pad"><span class="cifrL">1</span> <span>Master-Bugi</span> <span class="cifrR">98</span></div>
	<div class="pad"><span class="cifrL">2</span> <span>Blink</span> <span class="cifrR">85</span></div>
	<div class="pad"><span class="cifrL">3</span> <span>Главбух</span> <span class="cifrR">85</span></div>
	<div>8</div>
  </div>
</div>

Тестируйте..

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

Проблема. Шапка форума в разных браузерах и на разных компах имеет разную ширину.То есть где то по краям шапки черные полосы, а у меня,например стоит ровно.Видела скрипт автоматического выравнивания по ширине окна.

Адрес форума и скриншоты проблемы..

+1

Поделиться582Сб, 23 Ноя 2019 10:45:02

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

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

Добрый вечер! Видела где то скрипт, но не могу найти.
Проблема. Шапка форума в разных браузерах и на разных компах имеет разную ширину.То есть где то по краям шапки черные полосы, а у меня,например стоит ровно.Видела скрипт автоматического выравнивания по ширине окна.
Помогите,плиз.

Замените

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

#pun-title {
background: #000 url(http://forumstatic.ru/files/0019/e4/9d/52514.png)no-repeat center top;
height: 305px;
}

на:

Код:

#pun-title {
background: #000 url(http://forumstatic.ru/files/0019/e4/9d/33223.png) no-repeat center top;
height: 25vw;
background-size: cover;
}

Отредактировано kolobdur74 (Сб, 23 Ноя 2019 10:45:20)

0

Поделиться583Сб, 23 Ноя 2019 10:45:16

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

Форум http://1embroiderygames.0bb.ru/

Скрины

Так сейчас у меня :
Хром

Яндекс
На хроме края с закругленными уголками ушли за окно.Но сейчас стоит картинка 1244х305.

Ставила 1200х305, у меня все ОК было, стояло ровненько на Хроме, но у моего второго админа квадратный монитор и она видела вот такой заплаткой тоже на Хроме
Поставила картинку 1244х305, у нее стало все ровненько,а у меня уехало за края окна.
Понятно, что на разных мониторах и браузерах видится по разному.

Поэтому и спрашиваю скрипт автоматического выравнивания по окну.

0

Поделиться584Сб, 23 Ноя 2019 10:46:05

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

Ой, пока писала, вы ответили выше o.O

Сейчас попробую.

Отредактировано murrena (Сб, 23 Ноя 2019 10:46:22)

0

Поделиться585Сб, 23 Ноя 2019 10:50:46

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

kolobdur74
на Хроме выровнялось, на Яндексе так же левая сторона уходит за окно.(пробовала на тестовике http://1test123.mybb.ru/ )

0

Поделиться586Сб, 23 Ноя 2019 10:56:49

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

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

на Хроме выровнялось, на Яндексе так же левая сторона уходит за окно

Ну, попробуйте высоту поставить такую: height: 24.8vw; Вообще должно было растянуть одинаково на любом браузере.. Дайте ссылку на этот яндекс браузер..

+1

Поделиться587Сб, 23 Ноя 2019 11:01:50

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

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

попробуйте высоту поставить такую: height: 24.8vw;

вместо шапки узкая полока картинки видна всего.

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

айте ссылку на этот яндекс браузер..

да я просто на своем открываю :dontknow:

0

Поделиться588Сб, 23 Ноя 2019 11:08:21

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

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

вместо шапки узкая полока картинки видна всего.

Поставьте на тестовик посмотреть..

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

да я просто на своем открываю

Вот этот у вас стоит: https://browser.yandex.ru/ ?

0

Поделиться589Сб, 23 Ноя 2019 11:14:37

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

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

Поставьте на тестовик посмотреть..

поставила http://1test123.mybb.ru/

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

Вот этот у вас стоит: https://browser.yandex.ru/ ?

вроде да

0

Поделиться590Сб, 23 Ноя 2019 11:17:13

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

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

kolobdur74 написал(а):
Поставьте на тестовик посмотреть..
поставила http://1test123.mybb.ru/

но теперь по бокам стоит на обоих браузерах ровно. Но только по высоте полоской.

0

Поделиться591Сб, 23 Ноя 2019 11:17:23

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

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

поставила http://1test123.mybb.ru/

Не запятая: height: 24,8vw;, а точка должна быть..

+2

Поделиться592Сб, 23 Ноя 2019 11:19:07

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

kolobdur74
:cool: Класс! Теперь все ровненько! Спасибо огромное! :love:

+1

Поделиться593Сб, 23 Ноя 2019 11:30:13

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

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

Класс! Теперь все ровненько! Спасибо огромное!

Нема за что :flirt: Но при маленьких экранах может обрезаться нижняя полоса (иногда и верхняя).. Полностью убрать это не возможно при такой картинке - это надо ее разрезать и делать плавающей..

+2

Поделиться594Сб, 23 Ноя 2019 11:33:15

Автор: murrena
Заслуженный
Зарегистрирован: Вт, 20 Ноя 2018
Сообщений: 90
Уважение: +48
Позитив: +66
Последний визит:
Пн, 24 Янв 2022 12:10:37

kolobdur74
Спасибо! :love: Даже на телефоне все ровно встало, а то и там шапка уползала за края.

+2

Поделиться595Сб, 23 Ноя 2019 23:22:00

Автор: Sportbar.mybb
Заслуженный
Зарегистрирован: Ср, 14 Сен 2011
Сообщений: 82
Уважение: +21
Позитив: +64
Пол: Мужской
Последний визит:
Чт, 14 Сен 2023 23:30:56

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

Sportbar.mybb, сделал такой вариант:

Под размер экрана однозначно адаптируется. Правда, не так. как хотелось бы, но все же!
kolobdur74, я попробую пошаманить над уменьшением информации в таблице. Она реально громоздкая и нормально скомпановать вряд ли выйдет.
Если не возражаете, ещё обращусь за помощью.

0

Поделиться596Сб, 23 Ноя 2019 23:26:54

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Sportbar.mybb написал(а):

Под размер экрана однозначно адаптируется. Правда, не так. как хотелось бы, но все же!

Ну, она действительно большая, боюсь, что это самая лучшая адаптация, которую я могу придумать под маленький экран..

Sportbar.mybb написал(а):

я попробую пошаманить над уменьшением информации в таблице. Она реально громоздкая и нормально скомпановать вряд ли выйдет.

Ну, еще можно для смартфонов убрать менее нужную информацию..

Sportbar.mybb написал(а):

Если не возражаете, ещё обращусь за помощью.

Обращайтесь :yep:

Отредактировано kolobdur74 (Сб, 23 Ноя 2019 23:27:24)

0

Поделиться597Вс, 24 Ноя 2019 15:38:41

Автор: Sportbar.mybb
Заслуженный
Зарегистрирован: Ср, 14 Сен 2011
Сообщений: 82
Уважение: +21
Позитив: +64
Пол: Мужской
Последний визит:
Чт, 14 Сен 2023 23:30:56

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

Ну, еще можно для смартфонов убрать менее нужную информацию..

Это возможно?! В смысле, можно сделать так, чтобы для смартфона объявление вообще не отображалось?

0

Поделиться598Вс, 24 Ноя 2019 15:46:12

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

Sportbar.mybb написал(а):

Это возможно?! В смысле, можно сделать так, чтобы для смартфона объявление вообще не отображалось?

В самый низ НТМЛ верха:

Код:

<style>
@media screen and (max-width: 540px) {
#pun-announcement {display: none;}
}
</style>

+1

Поделиться599Вс, 24 Ноя 2019 15:50:56

Автор: Sportbar.mybb
Заслуженный
Зарегистрирован: Ср, 14 Сен 2011
Сообщений: 82
Уважение: +21
Позитив: +64
Пол: Мужской
Последний визит:
Чт, 14 Сен 2023 23:30:56

kolobdur74, спасибо! Сейчас попробую.

0

Поделиться600Вс, 24 Ноя 2019 15:58:29

Автор: Sportbar.mybb
Заслуженный
Зарегистрирован: Ср, 14 Сен 2011
Сообщений: 82
Уважение: +21
Позитив: +64
Пол: Мужской
Последний визит:
Чт, 14 Сен 2023 23:30:56

kolobdur74, установил. Получилось наполовину.
В вертикальном положении отображается без объявления. В горизонтальном - объявление есть.

0

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

Меню навигации

Пользовательские ссылки

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

Общие вопросы по оформлению (65)

Сообщений 581 страница 600 из 2001

Поделиться1Ср, 13 Фев 2019 13:52:59

Поделиться581Пт, 22 Ноя 2019 20:10:29

Поделиться582Сб, 23 Ноя 2019 10:45:02

Поделиться583Сб, 23 Ноя 2019 10:45:16

Поделиться584Сб, 23 Ноя 2019 10:46:05

Поделиться585Сб, 23 Ноя 2019 10:50:46

Поделиться586Сб, 23 Ноя 2019 10:56:49

Поделиться587Сб, 23 Ноя 2019 11:01:50

Поделиться588Сб, 23 Ноя 2019 11:08:21

Поделиться589Сб, 23 Ноя 2019 11:14:37

Поделиться590Сб, 23 Ноя 2019 11:17:13

Поделиться591Сб, 23 Ноя 2019 11:17:23

Поделиться592Сб, 23 Ноя 2019 11:19:07

Поделиться593Сб, 23 Ноя 2019 11:30:13

Поделиться594Сб, 23 Ноя 2019 11:33:15

Поделиться595Сб, 23 Ноя 2019 23:22:00

Поделиться596Сб, 23 Ноя 2019 23:26:54

Поделиться597Вс, 24 Ноя 2019 15:38:41

Поделиться598Вс, 24 Ноя 2019 15:46:12

Поделиться599Вс, 24 Ноя 2019 15:50:56

Поделиться600Вс, 24 Ноя 2019 15:58:29