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

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

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


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Проблемы с обрамлением аватара


Проблемы с обрамлением аватара

Сообщений 1 страница 20 из 30

1

Опять к вам за помощью -_- и видимо, не последний раз х)

В фотошопе-то сварганить сварганила, а вот с версткой у меня пока туго(
Хотела сделать обрамление аватара - использовала ваш код Обрамление Профиля своими фоновыми картинками
Получилось вот что (все криво и не так т_т поскольку не смогла исправить размещение): ссылка на форум Но с помощью данного кода делается именно обрамление всего профиля полностью, а меня интересует оформление аватара. Хотелось бы, чтобы вышло, как здесь (это в фш макет):

для наглядности

http://i.imgur.com/dK6tyCL.png

Техническое воплощение того, что нужно -можно глянуть и тут: Ссылка на форум и тут
т.е. нужно как-то запозиционировать это все, как на скрине (и чтобы там, куда стрелка указывает - был статус) уже что только не пробовала - не получается(( ну и еще нужно, чтобы ник пользователя был по центру и без подчеркивания

Помогите, пожалуйста

0

2

Пепельная
Приблизительно так. На всякий пожарный нынешнюю версию сохраните, если при этой вы удалите что-то не то и разметка полетит в тартар.
Убрать: коды во втором окне после комментария /*Фон мини-профиля в Топике*/

.punbb .post .post-author > ul {
  background: url(http://sg.uploads.ru/8IV3s.png) 0 top no-repeat,url(http://sg.uploads.ru/eX0ES.png) 0 bottom no-repeat;
  margin: -12px 0 -12px 0!important;
  padding: 12px 17px!important;
}

.punbb .post .post-author {
  background: url(http://sg.uploads.ru/PwtE6.png) 0 0 repeat-y;
  overflow: visible!important;
  margin: 10px 0!important;
}

В первом окне стиля удалить выделенную строку:

.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0px 15px 15px 16px;
  line-height: 140%;
}


Теперь нормальное оформление. Всё эти значения ищите в первом окне стилей (F3 поиск по странице, если вдруг не).

.punbb .post .post-author {
  float: left;
  width: 290px;
  margin-top: -40px;
  margin-left: -55px !important;
  padding-top: 94px;
  background: url(http://sg.uploads.ru/8IV3s.png) top center no-repeat;
  text-align: center;
}

li.pa-title {
  font-weight: bold;
  background: url(http://sg.uploads.ru/eX0ES.png) bottom center no-repeat;
  height: 70px;
}

.pa-author {
  font-size: 1.1em;
  font-weight: bold;
  padding-bottom: 1em !important;
}

Вот это нужно дописать в первом окне стилей:

li.pa-avatar img {
  background: url(http://sg.uploads.ru/PwtE6.png) center y-repeat;
}

Отредактировано Deisy- (Пн, 4 Май 2015 11:23:26)

+1

3

Deisy-
ох вы ж золото)) Все теперь ровно! Спасибо.

Только одна проблема -_- не отображается центральная часть, хотя я, вроде, все верно вставила..

наглядно

http://i.imgur.com/GlhnJOw.png

0

4

Пепельная
Замените код

li.pa-avatar img {
  background: url(http://sg.uploads.ru/PwtE6.png) center y-repeat;
}

На

.post-author ul li.pa-avatar {
  background: url('http://sg.uploads.ru/PwtE6.png') center repeat-y;
}

Отредактировано Deisy- (Пн, 4 Май 2015 15:54:27)

0

5

Deisy-
отличнааа)) сработало
и последнее: я в инструментах разработчика подогнала, а в стиле поправить не получилось(

скрин браузера

http://i.imgur.com/rCawWyO.png

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

Отредактировано Пепельная (Пн, 4 Май 2015 16:16:14)

0

6

Пепельная
В .post-author ul li.pa-avatar добавьте выделенные строки:

.post-author ul li.pa-avatar {
  background: url('http://sg.uploads.ru/PwtE6.png') center repeat-y;
  padding-left: 2px;
  margin-bottom: -3px;

}

А чтобы статус нормально стоял, можете попробовать вот этот код (предыдущий код li.pa-title сохраните, ибо не факт, что результат вам понравится):

li.pa-title {
  background: url(http://sg.uploads.ru/eX0ES.png) bottom center no-repeat;
  height: 75px;
  line-height: 30px;
  width: 170px;
  padding: 0 60px 0 60px;
  color: #fff
}

Выделенное жирным - это цвет текста статуса, ибо нынешний сливается.

0

7

Deisy-
так, однозначно, лучше)
но тогда всплывает вопрос: а возможно ли теперь текст цитаты двигать отдельно от картинки-подложки? О.о
(хочется понять, как это менять, чтобы больше не дергать вас/тех.поддержку по этому поводу в будущем)

0

8

Какой-то вариант через одно место, вот так не проще: Вариант растягивающейся рамки на Аватар

0

9

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

Вариант растягивающейся рамки на Аватар

Вот это и будет одним местом. Т.к. растягивание будет портить качество рамки и очень сильно, ибо она узорчатая.

Пепельная написал(а):

возможно ли теперь текст цитаты двигать отдельно от картинки-подложки? О.о

Deisy- написал(а):

line-height: 30px;

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

0

10

Deisy- написал(а):

Вот это и будет одним местом. Т.к. растягивание будет портить качество рамки и очень сильно, ибо она узорчатая.

Название мало говорит об исполнении.
1. Очевидно Что для без пробелов на данном форуме Аватары должны быть нормированы
2. Есть Вариант проще - http://htmlbook.ru/css/border-image

0

11

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

1. Очевидно Что для без пробелов на данном форуме Аватары должны быть нормированы

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

0

12

Deisy- написал(а):

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

:glasses:

<style type="text/css">
.pa-avatar img[alt]{
   border:solid transparent;
   border-width:118px 50px 76px  54px;
   width: 188px;
   min-width:188px;
   max-width:188px;
   height:auto!important;
    -moz-border-image: url(http://savepic.org/7233695.png) 118 50 76  54 round stretch;
    -webkit-border-image: url(http://savepic.org/7233695.png) 118 50 76  54 round stretch;
    -o-border-image: url(http://savepic.org/7233695.png)  118 50 76  54 round stretch;
    border-image: url(http://savepic.org/7233695.png) 3 118 50 76  54 round stretch;
   }
</style>

http://savepic.org/7272593.png

0

13

Deisy-
Про line-height я знаю, сразу попробовала с 30 убавить до 17, но ниже статус от этого не спустился, только расстояние до нижней строки убавилось..мне бы чуть ниже его передвинуть и все супер. но даже в браузере он ток вместе с подложкой двигается)

Deff (решила для сравнения попробовать и этот способ)
Но что-то с вашим вариантом у меня не вышло почему-то о.О пробовала вставлять в хтмл-верх, удалив перед этим все куски кода Deisy- (но, видимо, зря)
Пробовала вставлять в первое окно стиля без <style type="text/css"> и все равно ноль реакции.. где-то затупила я,  видно х)

Отредактировано Пепельная (Вт, 5 Май 2015 07:28:38)

0

14

Пепельная
Я чисто показал установку сложно картинки на Аватар для Deisy-

Вы же, - ставьте минимально-необходимую картинку обрамления аватара, изменим соответственно толщину бордеров,
На остальное ставите фон на сам профиль(кодом выше), на текст ниже аввы ставите отдельный фон на этот элемент

0

15

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

на текст ниже аввы ставите отдельный фон на этот элемент

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

0

16

Пепельная написал(а):

то могу ли я как-то отрегулировать расположение этого текста относительно подложки? есть такое свойство?

Ну
.pa-title{
     padding-top: XXpx;
     padding-bottom:ZZpx;
}

0

17

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

.pa-title

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

Пепельная
Я не могу зайти на ваш форум. Как-то встанет - вернёмся к вопросу.

0

18

я тоже не могу на него зайти, он просто упал О_о причем я за последнее время ничего в кодах не меняла такая ерунда длится уже часа полтора

0

19

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

0

20

Deisy- написал(а):

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


Почему бы не сделать так:

li.pa-title {
  font-weight: bold;
  background: url(http://sg.uploads.ru/eX0ES.png) 5px center no-repeat;
  height: 70px;
  margin-top: 7px;
}


Т.е. сначала отрегулировать верхний отступ строки Статус (красное), после чего подогнать вертикальную позицию картинки (синее) ?


Отредактировано Alex_63 (Вт, 5 Май 2015 19:15:20)

0


Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Проблемы с обрамлением аватара