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

Поделиться1Вс, 16 Окт 2016 20:11:31

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 10871
Уважение: +7295
Позитив: +5313
Пол: Мужской
Последний визит:
Вчера 22:01:46

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


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

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

+3

ВКонтакте alex__63

Поделиться881Сб, 28 Янв 2017 19:41:39

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

Tusich
Ну, можно и сдвинуть вниз #pun-crumbs1, но тогда надо увеличивать отступ сверху у #pun-index .category... Чтобы было понятно что делаешь - правой клавишей по форуму - Посмотреть код...

0

Поделиться882Сб, 28 Янв 2017 19:51:26

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

kolobdur74
это-то я в курсе, я почти выровняла, там 1, 2 рх осталось, а вот строку моё настроение с главной, действительно, надо убрать и снизу тоже. бесполезные тексты.

0

Поделиться883Сб, 28 Янв 2017 20:14:20

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

это-то я в курсе, я почти выровняла, там 1, 2 рх осталось, а вот строку моё настроение с главной, действительно, надо убрать и снизу тоже. бесполезные тексты.

Ну, вместо:

#pun-index #pun-crumbs1 {
background: url(http://forumstatic.ru/files/0018/1d/15/42746.png) no-repeat;
margin: 43px 0px -74px 13px;
padding: 28px 0px 9px 5px;
}

Поставь это:

Код:

#pun-index #pun-crumbs1, #pun-index #pun-crumbs2 {display: none;}

+1

Поделиться884Сб, 28 Янв 2017 20:35:36

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

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

Ну, вместо:

Поставь это:

ладно, оставила как есть, там опять всё сначала надо подгонять тогда )))) не буду, потом как-нибудь ))))
теперь боковая панель.... надо, чтобы голубые полоски названий новостей стояли над белым фоном картинкой, чтобы у меня была возможность наложить картинки друг на друга.

0

Поделиться885Сб, 28 Янв 2017 20:40:57

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

ладно, оставила как есть, там опять всё сначала надо подгонять тогда )))) не буду, потом как-нибудь ))))

Ну, нижнюю можно убрать - там не ломается:

#pun-index #pun-crumbs2 {display: none;}

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

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

Не понял как надо...

0

Поделиться886Сб, 28 Янв 2017 20:48:05

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

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

Ну, нижнюю можно убрать - там не ломается:

Не понял как надо...

пасиб, поставила. вот смотри на скрин, белая основа снизу, а название с тенью

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

Отредактировано Tusich (Сб, 28 Янв 2017 20:49:03)

0

Поделиться887Сб, 28 Янв 2017 21:11:41

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

Tusich
Ну как то так:

Код:

<style>
#RightNews {padding-left: 20px;}
#RightNews .container {padding-bottom: 0px !important;}
#RightNews .container h2 {
    background: url(http://forumstatic.ru/files/0018/1d/15/94071.png) no-repeat center center;vertical-align:middle;
text-align:center;
height:38px;
padding: 0px;
}
#RightNews .block_text {
background: rgb(245,250,253); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,250,253,1) 0%, rgba(238,247,252,1) 27%, rgba(184,220,242,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,250,253,1)), color-stop(27%,rgba(238,247,252,1)), color-stop(100%,rgba(184,220,242,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5fafd', endColorstr='#b8dcf2',GradientType=0 ); /* IE6-9 */
max-height:120px;min-height:100px;
overflow-y: auto;
padding: 0px 20px 0px 20px;
box-shadow: 2px 2px 12px 0px #AFEEEE;
margin-top: -10px;
width: 60%;
text-align:left;
}
</style>

И скрипт:

Код:

<!-- Боковая панель -->
<div id=Inf_block_Right style="display:none">
<!--НАЧАЛО-->
<h2>НОВОСТЬ 1</h2>
<center><div class="block_text">Текст НОВОСТИ</div></center>
<h2>НОВОСТЬ 2</h2>
<center><div class="block_text">Текст НОВОСТИ</div></center>
<h2>НОВОСТЬ 3</h2>
<center><div class="block_text">Текст НОВОСТИ</div></center>
</div>
<div style="display:none"><script type="text/javascript">
var L=$("#Inf_block_Left").html();$("#Inf_block_Left").replaceWith("");
var R=$("#Inf_block_Right").html();$("#Inf_block_Right").replaceWith("");
if($(".punbb").attr("id")=="pun-index"){
  var LeftSUM='', RightSUM='',block1='<div class="container" style="padding:0px;" id=News_';
  var block2="</div>";
if(L!=null){ var c = L.split(/<h2>|<\/h2>/igm);
for(i=1; i<c.length; i+=2){
LeftSUM+=block1+'L'+(i+1)/2+' >'+'<h2><center>'+c[i]+'</center></h2>'+c[i+1]+block2;
}LeftSUM='<td id=LeftNews width=30% valign=top>'+LeftSUM+'</td>';/*alert(LeftSUM);*/}
if(R!=null){ var c = R.split(/<h2>|<\/h2>/igm);
for(i=1; i<c.length; i+=2){
RightSUM+=block1+'R'+(i+1)/2+' >'+'<h2><center>'+c[i]+'</center></h2>'+c[i+1]+block2;
}RightSUM='<td id=RightNews width=30% valign=top>'+RightSUM+'</td>';/*alert(RightSUM);*/}
  if(LeftSUM!='' || RightSUM!=''){	$("#pun-main").html('<table width=100% id="NEWS"><tr valign=top>'+LeftSUM+'<td>'+$("#pun-main").html()+'</td>'+RightSUM+'</tr></table>'); };}
</script></div>
<!-- Конец скрипта -->

Стиль только от боковой панели - старый от боковой надо удалить.. Скрипт я тоже несколько изменил..

В #RightNews .block_text с помощью width: 60%; и padding: 0px 20px 0px 20px; можно регулировать ширину для более точного подгона..

Отредактировано kolobdur74 (Сб, 28 Янв 2017 21:13:54)

0

Поделиться888Сб, 28 Янв 2017 21:24:23

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

kolobdur74
~~бл.~~ чё делать? дура я полностью удалила скрипт с фонами главной походу. есть ли возможность восстановить?

Отредактировано Tusich (Сб, 28 Янв 2017 21:26:20)

0

Поделиться889Сб, 28 Янв 2017 21:26:30

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

чё делать? дура я полностью удалила скрипт с фонами главной походу. есть ли возможность восстановить?

Попробуй несколько раз обратку в браузере нажать на странице настроек - браузер обычно кеширует, поэтому помнит предыдущие до изменений страницы...

Отредактировано kolobdur74 (Сб, 28 Янв 2017 21:26:52)

0

Поделиться890Сб, 28 Янв 2017 21:29:49

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

нет. не получилось.

0

Поделиться891Сб, 28 Янв 2017 21:37:57

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

нет. не получилось.

А что надо восстановить? У меня страница еще висит..

0

Поделиться892Сб, 28 Янв 2017 21:38:54

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

kolobdur74
восстановить главную полностью, что ты делал новую со скриптом панельки и фонами

0

Поделиться893Сб, 28 Янв 2017 21:42:44

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

восстановить главную полностью, что ты делал новую со скриптом панельки и фонами

Это:

Код:

<style>
#pun-index #pun-main {background:transparent;}
#pun-index .category {
border-radius:20px;
border-style: solid !important;
background: url(http://forumstatic.ru/files/0018/1d/15/43229.jpg) repeat center bottom !important;
margin-bottom:20px;
box-shadow: 10px 10px 38px 0px #AFEEEE;
}
#pun-index #pun-crumbs1 {background:none;}

#pun-index .category h2 {margin:20px !important;}

#RightNews {padding-left: 20px;}
#RightNews .container {padding-bottom: 0px !important;}
#RightNews .container h2 {
    background: url(http://forumstatic.ru/files/0018/1d/15/94071.png) no-repeat center center;vertical-align:middle;
text-align:center;
height:38px;
padding: 0px;
}
#RightNews .container h2 center {margin-top: -6px;}
#RightNews .block_text {
background: rgb(245,250,253); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,250,253,1) 0%, rgba(238,247,252,1) 27%, rgba(184,220,242,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,250,253,1)), color-stop(27%,rgba(238,247,252,1)), color-stop(100%,rgba(184,220,242,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,250,253,1) 0%,rgba(238,247,252,1) 27%,rgba(184,220,242,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5fafd', endColorstr='#b8dcf2',GradientType=0 ); /* IE6-9 */
max-height:120px;min-height:100px;
overflow-y: auto;
padding: 0px 20px 0px 20px;
box-shadow: 2px 2px 12px 0px #AFEEEE;
margin-top: -10px;
width: 60%;
text-align:left;
}
#pun-index #pun-crumbs2 {
    display: none;
}
</style>

Здесь вместе с стилем панельки..Скрипт выше дал..

+1

Поделиться894Сб, 28 Янв 2017 21:45:44

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

Tusich
А это чисто твоя:

<style>
#pun-index #pun-crumbs2 {display: none;}

#pun-category1 > h2 > span {position: absolute;
margin: 13px 0px 0px -81px;}

#pun-category2 > h2 > span {position: absolute;
margin: 13px 0px 0px -66px;}

#pun-stats > h2 > span {position: absolute;
padding: 20px 0px 0px 0px;}

#pun-index #pun-stats {margin-top: 0px!important;}

#pun-index #pun-crumbs1 {
background: url(http://forumstatic.ru/files/0018/1d/15/42746.png) no-repeat;
margin: 43px 0px -74px 13px;
padding: 28px 0px 9px 5px;
}

#pun-index #pun-stats h2 {background: url(http://forumstatic.ru/files/0018/1d/15/16987.jpg) no-repeat;
margin: 0px 0px 0px 0px;
height: 45px;}

#pun-index #pun-main {background:transparent;}

#pun-index .category {
border-style: solid !important;
background: url(http://forumstatic.ru/files/0018/1d/15/56290.png) repeat center bottom !important;
margin-bottom: -10px;
margin-top: 10px;}

#pun-index .category h2 {background: url(http://forumstatic.ru/files/0018/1d/15/79436.jpg) no-repeat;
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 30px 0px;}

#RightNews {padding: 0px 0px 0px 47px;}

#RightNews .container {padding-bottom: 0px !important;}

#RightNews .container h2 {background: url(http://forumstatic.ru/files/0018/1d/15/94071.png) no-repeat;}

#RightNews .block_text {background-color:#ffffff;max-height:120px;min-height:100px;overflow-y: auto;}
</style>

+1

Поделиться895Сб, 28 Янв 2017 21:55:46

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

kolobdur74
спасибо :blush: меня чуть инфаркт не хватил )))

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

0

Поделиться896Сб, 28 Янв 2017 22:00:50

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

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

Посмотреть в фотошопе цвета и с помощью генератора градиента сделать что надо: https://ilyakhasanov.ru/online-service/ … generator/ или вот еще генератор: https://broslavets.ru/gradients/

Отредактировано kolobdur74 (Сб, 28 Янв 2017 22:01:52)

+1

Поделиться897Сб, 28 Янв 2017 22:04:40

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

kolobdur74
хорошо, посмотрим, только завтра, а то у меня уже всё, голова пухнет от всех переживаний и правок
возможно ночью зайду, поэкспериментирую, а так, только завтра плотно займусь всем этим.

спасибо тебе огромное за помощь и восстановление наших трудов :surprise: а ведь классно смотрится :cool:

0

Поделиться898Сб, 28 Янв 2017 22:09:15

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

хорошо, посмотрим, только завтра, а то у меня уже всё, голова пухнет от всех переживаний и правок
возможно ночью зайду, поэкспериментирую, а так, только завтра плотно займусь всем этим.

Просто с фоновой картинкой там слишком много возни получится по подгону... Так намного проще и для форума легче...

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

спасибо тебе огромное за помощь и восстановление наших трудов а ведь классно смотрится

Нема за что)) :flirt:

0

Поделиться899Вс, 29 Янв 2017 01:25:12

Автор: Tusich
Заслуженный
Зарегистрирован: Ср, 23 Фев 2011
Сообщений: 997
Уважение: +112
Позитив: +248
Пол: Женский
Последний визит:
Сегодня 02:31:10

kolobdur74
посмотри, плиз на панельку, вроде сейчас уже сливается с фоном )))) единственное, я бы вторую тень добавила чёрную вниз и весь фон текста убрала бы под фон названия блоков, чтобы скрыть полностью в ненужных местах скругленные углы и показать тень фона названий блоков.

0

Поделиться900Вс, 29 Янв 2017 02:03:18

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5821
Позитив: +6441
Пол: Мужской
Последний визит:
Вчера 23:37:28

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

посмотри, плиз на панельку, вроде сейчас уже сливается с фоном ))))

Отлично выглядит, единственное, может имеет смысл перевернуть градиент, а может и нет)) Мне кажется стоит бордер радиус только на последнем блоке сделать..

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

единственное, я бы вторую тень добавила чёрную вниз и весь фон текста убрала бы под фон названия блоков, чтобы скрыть полностью в ненужных местах скругленные углы и показать тень фона названий блоков.

Это не понял, а радиус можно и так сделать только на последнем..Кстати, я вроде же добавлял на название поднять повыше - так слишком близко к тексту самого блока получается..

0

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

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

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

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

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

Сообщений 881 страница 900 из 1000

Поделиться1Вс, 16 Окт 2016 20:11:31

Поделиться881Сб, 28 Янв 2017 19:41:39

Поделиться882Сб, 28 Янв 2017 19:51:26

Поделиться883Сб, 28 Янв 2017 20:14:20

Поделиться884Сб, 28 Янв 2017 20:35:36

Поделиться885Сб, 28 Янв 2017 20:40:57

Поделиться886Сб, 28 Янв 2017 20:48:05

Поделиться887Сб, 28 Янв 2017 21:11:41

Поделиться888Сб, 28 Янв 2017 21:24:23

Поделиться889Сб, 28 Янв 2017 21:26:30

Поделиться890Сб, 28 Янв 2017 21:29:49

Поделиться891Сб, 28 Янв 2017 21:37:57

Поделиться892Сб, 28 Янв 2017 21:38:54

Поделиться893Сб, 28 Янв 2017 21:42:44

Поделиться894Сб, 28 Янв 2017 21:45:44

Поделиться895Сб, 28 Янв 2017 21:55:46

Поделиться896Сб, 28 Янв 2017 22:00:50

Поделиться897Сб, 28 Янв 2017 22:04:40

Поделиться898Сб, 28 Янв 2017 22:09:15

Поделиться899Вс, 29 Янв 2017 01:25:12

Поделиться900Вс, 29 Янв 2017 02:03:18