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

Поделиться1Вс, 17 Июл 2016 14:05:59

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11225
Уважение: +7628
Позитив: +5463
Пол: Мужской
Последний визит:
Сегодня 01:08:20

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


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

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

0

ВКонтакте alex__63

Поделиться521Сб, 13 Авг 2016 20:11:55

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

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

Иса
Наверно как-то так: (Две Панельки вместо текущего кода:
Выделить код


<style>
#html-header{
position:absolute;overflow:hidden;
display:block;margin-left:-16px;
width:824px;height:450px;
}
#JampPanel:hover{
margin-right:-20px;
}
#JampPanel_L:hover{
margin-left:-20px;
}
#JampPanel,#JampPanel .container,#JampPanel_L,#JampPanel_L .container{
border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border:1px solid #FE2323;
background-color:#F0F0F0;
box-shadow: 0px 5px 5px #626262;
-webkit-box-shadow:0px 5px 5px #626262;
-khtml-box-shadow:0px 5px 5px #626262;
-moz-box-shadow:0px 5px 5px #626262;
}
#JampPanel,#JampPanel_L{
opacity:0.86;
position:absolute;z-index:1200;
height:190px;top:8px;
transition-duration: 0.33s;
-webkit-transition-duration: 0.33s;
-moz-transition-duration: 0.33s;
-o-transition-duration: 0.33s;
width:230px;
}
#JampPanel {right:0;margin-right:-202px;
background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 4px 2px no-repeat;
}
#JampPanel_L {left:0;margin-left:-202px;
background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 4px 2px no-repeat;

}
#JampPanel .container{padding:12px;height:300px;width:100%;margin:-1px 0 0 30px;}
#JampPanel_L .container{padding:12px;height:300px;width:100%;margin:-1px 30px 0 0}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
position:absolute;
height:190px;width:14px;
background-color:#F0F0F0;
margin:-12px 0 0 -18px;
}
#Zaslonyalka.L{margin:-12px -18px 0 0}
</style>
<div id=JampPanel_L>
<div class=container>
<div id=Zaslonyalka class=L></div>
Ваш контент(слева)
</div>
</div>
<div id=JampPanel>
<div class=container>
<div id=Zaslonyalka class=R></div>
Ваш контент(справа)
</div>
</div>


(*картинки меняете на свои

привет! вернулась дорабатывать. http://themost.rolka.su/
левое ухо не пристыковывается и текст в нем обрезан.
Вообще настройки что-то ничего не двигаются, отступы меняю нигде ничего не меняется.

0

Поделиться522Сб, 13 Авг 2016 20:54:35

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11882
Последний визит:
Вчера 18:39:22

Иса

Код:

        <!-- JampPanel-->
    <style>
    #html-header{
      position:absolute;overflow:hidden;
      display:block;margin-left:-16px;
      width:848px;height:450px;
    }
    #JampPanel:hover{
    margin-right:-20px;
    }
    #JampPanel_L:hover{
      margin-left:-20px;
    }
    #JampPanel,#JampPanel .container,#JampPanel_L,#JampPanel_L .container{
    border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border:1px solid #FE2323;
    background-color:#F0F0F0;
    box-shadow: 0px 5px 5px #626262;
    -webkit-box-shadow:0px 5px 5px #626262;
    -khtml-box-shadow:0px 5px 5px #626262;
    -moz-box-shadow:0px 5px 5px #626262;
    }
    #JampPanel,#JampPanel_L{
      opacity:0.86;
      position:absolute;z-index:1200;
      height:190px;top:8px;
       transition-duration: 0.33s;
      -webkit-transition-duration: 0.33s;
      -moz-transition-duration: 0.33s;
      -o-transition-duration: 0.33s;
      width:230px;max-width:230px;
    }
    #JampPanel {right:0;margin-right:-202px;
      background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 4px 2px no-repeat;
    }
    #JampPanel_L {left:0;padding:0;margin-left: -269px;padding-right:66px;
      background:#F0F0F0 url(http://uploads.ru/i/S/z/t/Sztn3.png) 100% 2px no-repeat!important;
    }
    #JampPanel .container{padding:12px;height:300px;width:100%;margin:-1px 0 0 30px;}
    #JampPanel_L .container{padding:12px;height:300px;width:100%;margin:-1px auto 0 12px}
    #Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
    position:absolute;
    height:190px;width:14px;
    background-color:#F0F0F0;
    margin:-12px 0 0 -18px;
    }
    #Zaslonyalka.L{margin:-10px 0 0 232px}
    </style>
    <div id=JampPanel_L>
      <div class=container>
        <div id=Zaslonyalka class=L></div>
    Ваш контент(слева)
      </div>
    </div>
    <div id=JampPanel>
      <div class=container>
        <div id=Zaslonyalka class=R></div>
    Ваш контент(справа)
      </div>
    </div>
    <!--End//JampPanel-->

+1

Поделиться523Вс, 14 Авг 2016 13:20:38

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Deff
спасибо!
Вроде все установила, но не могу пофиксить.
Не получается менять ширину панелек с информацией. Правую надо сделать шире, левую уже.
И слева кнопка вплотную к панельке стоит, а справа есть то, что в коде зовется заслонялкой. Пододвинуть бы, чтоб как справа было. Не выходит(
http://themost.rolka.su/
хелп

0

Поделиться524Вс, 14 Авг 2016 14:04:54

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11225
Уважение: +7628
Позитив: +5463
Пол: Мужской
Последний визит:
Сегодня 01:08:20

Иса
Поправьте цифру красным в коде:

<style>
#html-header{
position:absolute;overflow:hidden;
display:block;margin-left:-16px;
width:848px;height:450px;
}
#JampPanel:hover{
margin-right:44px;
}

0

ВКонтакте alex__63

Поделиться525Вс, 14 Авг 2016 15:58:57

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Alex_63
спасибо! а с шириной выползающих блоков как быть?

0

Поделиться526Вс, 14 Авг 2016 18:22:44

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11225
Уважение: +7628
Позитив: +5463
Пол: Мужской
Последний визит:
Сегодня 01:08:20

Иса
Вродь у мну визуально они при такой настройке равны - поясните, в какую сторону изменить ширину ?

0

ВКонтакте alex__63

Поделиться527Вс, 14 Авг 2016 18:24:01

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Alex_63
хм-хм, а вроде и правда ровно.
Но мне правую пошире надо сделать

upd
А теперь у левой кнопка отстала.

Отредактировано Иса (Вс, 14 Авг 2016 18:28:13)

0

Поделиться528Вс, 14 Авг 2016 18:30:35

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11225
Уважение: +7628
Позитив: +5463
Пол: Мужской
Последний визит:
Сегодня 01:08:20

Иса
Замените код всплывалок

Код:

<!-- JampPanel-->
<style>
#html-header{
  position:absolute;overflow:hidden;
  display:block;margin-left: -36px;
  width:877px;height:450px;
}
#JampPanel:hover{
margin-right:44px;
}
#JampPanel_L:hover{
  margin-left:-12px;
}
#JampPanel .container,#JampPanel_L .container{
  background: url(http://forumstatic.ru/files/0014/d0/61/27369.jpg);
box-shadow: 0px 2px 2px #090e15;
-webkit-box-shadow:0px 2px 2px #090e15;
-khtml-box-shadow:0px 2px 2px #090e15;
-moz-box-shadow:0px 2px 2px #090e15;
}
#JampPanel,#JampPanel_L{
  position:absolute;z-index:1200;
  height:254px;top:-1px;
   transition-duration: 0.33s;
  -webkit-transition-duration: 0.33s;
  -moz-transition-duration: 0.33s;
  -o-transition-duration: 0.33s;
  width:230px;max-width:230px;
}
#JampPanel {right:0;margin-right:-203px;
  background: url(http://forumstatic.ru/files/0014/d0/61/64705.png) -2px -2px no-repeat;
}
#JampPanel_L {left:0;padding:0;margin-left:-256px;padding-right: 54px;
  background:url(http://forumstatic.ru/files/0014/d0/61/96327.png) 100% -1px no-repeat!important;
}
#JampPanel .container{padding:12px;height:300px;width:100%;margin:-1px 0 0 30px;}
#JampPanel_L .container{padding:6px;height:300px;width:100%;margin:-1px auto 0 12px}
#Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
position:absolute;
height:250px;width:5px;
   background: url(http://forumstatic.ru/files/0014/d0/61/27369.jpg);
margin:-11px 0 0 -15px;
}


 #Zaslonyalka.L{margin:-10px 0 0 232px}
</style>
<div id=JampPanel_L>
  <div class=container>
    <div id=Zaslonyalka class=L></div>
         </div>
</div>
<div id=JampPanel>
  <div class=container>
    <div id=Zaslonyalka class=R></div>
      Доппельгангер - таинственное, обладающее свойствами полиморфизма существо, способное абсолютно точно скопировать человека и заменить его, лишив воли либо убив оригинал. Встречается во множестве мифологий и, конечно, представляет собой персонификацию сильных и самых первичных фобий: опасности потерять собственное Я и боязни врага, способного под видом близкого человека обойти стражу и нанести предательский удар. <br>
<a href=http://supernaturalbrothers.rolka.su/viewtopic.php?id=1823#p170777>читать больше в [Нечисть: Оборотни]</a>
  </div>
</div>
<!--End//JampPanel-->

0

ВКонтакте alex__63

Поделиться529Вс, 14 Авг 2016 18:40:55

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Alex_63
спасибо!

0

Поделиться530Вс, 14 Авг 2016 20:19:33

Автор: Иса
Заслуженный
Зарегистрирован: Ср, 17 Ноя 2010
Сообщений: 801
Уважение: +70
Позитив: +71
Последний визит:
Пт, 1 Мар 2024 19:59:45

Alex_63
:blush: я опять.
Добавила текст в правое ухо.
Никак не изменю отступ от краев блока до текста. Надо меньше.

А еще вопрос.Почему эти панельки такие кривые? Одно значение изменю, не подойдет, верну как было, а косяк так и остается...

Отредактировано Иса (Вс, 14 Авг 2016 20:21:59)

0

Поделиться531Вс, 14 Авг 2016 21:14:45

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11882
Последний визит:
Вчера 18:39:22

Иса

Код:

	<!-- JampPanel-->
    <style>
    #html-header{
      position:absolute;overflow:hidden;
      display:block;margin-left: -22px;
      width:877px;height:450px;
    }
    #JampPanel:hover{
    margin-right:44px;
    }
    #JampPanel_L:hover{
      margin-left:-12px;
    }
    #JampPanel .container,#JampPanel_L .container{
      background: url(http://forumstatic.ru/files/0014/d0/61/27369.jpg);
    box-shadow: 0px 2px 2px #090e15;
    -webkit-box-shadow:0px 2px 2px #090e15;
    -khtml-box-shadow:0px 2px 2px #090e15;
    -moz-box-shadow:0px 2px 2px #090e15;
    }
    #JampPanel,#JampPanel_L{
      position:absolute;z-index:1200;
      height:254px;top:-1px;
       transition-duration: 0.33s;
      -webkit-transition-duration: 0.33s;
      -moz-transition-duration: 0.33s;
      -o-transition-duration: 0.33s;
      width:230px;max-width:230px;
    }
    #JampPanel {right:0;margin-right:-203px;
      background: url(http://forumstatic.ru/files/0014/d0/61/64705.png) -2px -2px no-repeat;
    }
    #JampPanel_L {left:0;padding:0;margin-left:-256px;padding-right: 54px;
      background:url(http://forumstatic.ru/files/0014/d0/61/96327.png) 100% -1px no-repeat!important;
    }
    #JampPanel .container{padding:12px 12px 12px 8px;height:300px;width:100%;margin:-1px 0 0 30px;}
    #JampPanel_L .container{padding:6px;height:300px;width:100%;margin:-1px auto 0 12px}
    #Zaslonyalka{ /*прикрывает область тени на стыке уха с container*/
    position:absolute;
    height:250px;width:5px;
       background: url(http://forumstatic.ru/files/0014/d0/61/27369.jpg);
    margin:-11px 0 0 -12px;
    }
     
     
     #Zaslonyalka.L{margin:-10px 0 0 232px}
    </style>
    <div id=JampPanel_L>
      <div class=container>
        <div id=Zaslonyalka class=L></div>
             </div>
    </div>
    <div id=JampPanel>
      <div class=container>
        <div id=Zaslonyalka class=R></div>
          Доппельгангер - таинственное, обладающее свойствами полиморфизма существо, способное абсолютно точно скопировать человека и заменить его, лишив воли либо убив оригинал. Встречается во множестве мифологий и, конечно, представляет собой персонификацию сильных и самых первичных фобий: опасности потерять собственное Я и боязни врага, способного под видом близкого человека обойти стражу и нанести предательский удар. <br>
    <a href=http://supernaturalbrothers.rolka.su/viewtopic.php?id=1823#p170777>читать больше в [Нечисть: Оборотни]</a>
      </div>
    </div>
    <!--End//JampPanel-->

0

Поделиться532Пн, 15 Авг 2016 11:02:51

Автор: lon_don_don
Заслуженный
Зарегистрирован: Пт, 8 Янв 2016
Сообщений: 87
Уважение: +13
Позитив: +52
Последний визит:
Сб, 29 Июл 2017 23:03:27

День добрый) помогите исправить расстояние, я что-то крутил/вертел, вроде становится ровно, но съезжают верхние пользовательские ссылки)

0

Поделиться533Пн, 15 Авг 2016 11:12:51

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11225
Уважение: +7628
Позитив: +5463
Пол: Мужской
Последний визит:
Сегодня 01:08:20

lon_don_don
Поправьте в Фш - как должно выглядеть в итоге

0

ВКонтакте alex__63

Поделиться534Пн, 15 Авг 2016 12:20:51

Автор: lon_don_don
Заслуженный
Зарегистрирован: Пт, 8 Янв 2016
Сообщений: 87
Уважение: +13
Позитив: +52
Последний визит:
Сб, 29 Июл 2017 23:03:27

Alex_63
~~мой постоянный спаситель в глупых вопросах XDDD~~
Вот если сейчас зайдете на фор, та часть что на предыдущем скрине стоит идеально, НО съехали пользовательские ссылки, вот так:

0

Поделиться535Пн, 15 Авг 2016 13:03:37

Автор: lon_don_don
Заслуженный
Зарегистрирован: Пт, 8 Янв 2016
Сообщений: 87
Уважение: +13
Позитив: +52
Последний визит:
Сб, 29 Июл 2017 23:03:27

Alex_63
разобраааался)) уфф) спасибо все равно :3

Отредактировано lon_don_don (Пн, 15 Авг 2016 13:06:50)

0

Поделиться536Вт, 16 Авг 2016 02:36:11

Автор: riviere
Заслуженный
Зарегистрирован: Пт, 30 Май 2014
Сообщений: 74
Уважение: +3
Позитив: +10
Последний визит:
Пн, 1 Июл 2019 02:31:07

Доброй ночи!
Помогите понять, в чем проблема.

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

0

Поделиться537Вт, 16 Авг 2016 03:08:17

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51422
Уважение: +15370
Позитив: +11882
Последний визит:
Вчера 18:39:22

riviere
Шрифты кроссбраузерно работают только при загрузке на свой форум(Уже как два года политика безопастности и webkit-браузерах и в Мозилле
Кросс Браузерная подгрузка Шрифтов на форум

+1

Поделиться538Вт, 16 Авг 2016 07:28:32

Автор: Ms. Juliet
Заслуженный
Зарегистрирован: Сб, 20 Фев 2016
Сообщений: 152
Уважение: +9
Позитив: +51
Пол: Женский
Последний визит:
Чт, 31 Дек 2020 14:18:40

Доброго времени суток :3 исправила скрипт пиар-входа на новый, но теперь как обратно пододвинуть кнопку PR, чтобы было наравне с основным меню?
http://smsc.rolka.su/

0

Поделиться539Вт, 16 Авг 2016 10:24:42

Автор: Alex_63
Администратор
Зарегистрирован: Чт, 11 Дек 2014
Сообщений: 11225
Уважение: +7628
Позитив: +5463
Пол: Мужской
Последний визит:
Сегодня 01:08:20

Ms. Juliet
Добавьте в Конец Второго Окна стилей

#navpr_1 img{
margin-bottom:-8px;
}

0

ВКонтакте alex__63

Поделиться540Вт, 16 Авг 2016 13:33:01

Автор: Mirra Bell
Модератор
Зарегистрирован: Чт, 3 Апр 2014
Сообщений: 2184
Уважение: +1880
Позитив: +2475
Пол: Женский
Последний визит:
Ср, 13 Ноя 2024 09:02:28

Как в стиле из этого поста сделать обрамление не скопом для для всех форумов категории, а для каждого форума отдельно? Оно будет одинаковое, просто чтобы форумы отделялись друг от друга

Отредактировано Mirra Bell (Вт, 16 Авг 2016 13:53:07)

0

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

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

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

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

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

Сообщений 521 страница 540 из 1001

Поделиться1Вс, 17 Июл 2016 14:05:59

Поделиться521Сб, 13 Авг 2016 20:11:55

Поделиться522Сб, 13 Авг 2016 20:54:35

Поделиться523Вс, 14 Авг 2016 13:20:38

Поделиться524Вс, 14 Авг 2016 14:04:54

Поделиться525Вс, 14 Авг 2016 15:58:57

Поделиться526Вс, 14 Авг 2016 18:22:44

Поделиться527Вс, 14 Авг 2016 18:24:01

Поделиться528Вс, 14 Авг 2016 18:30:35

Поделиться529Вс, 14 Авг 2016 18:40:55

Поделиться530Вс, 14 Авг 2016 20:19:33

Поделиться531Вс, 14 Авг 2016 21:14:45

Поделиться532Пн, 15 Авг 2016 11:02:51

Поделиться533Пн, 15 Авг 2016 11:12:51

Поделиться534Пн, 15 Авг 2016 12:20:51

Поделиться535Пн, 15 Авг 2016 13:03:37

Поделиться536Вт, 16 Авг 2016 02:36:11

Поделиться537Вт, 16 Авг 2016 03:08:17

Поделиться538Вт, 16 Авг 2016 07:28:32

Поделиться539Вт, 16 Авг 2016 10:24:42

Поделиться540Вт, 16 Авг 2016 13:33:01