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

Поделиться1Вс, 3 Май 2015 23:39:54

Автор: Пепельная
Заслуженный
Зарегистрирован: Пт, 1 Май 2015
Сообщений: 78
Уважение: +15
Позитив: +29
Пол: Женский
Последний визит:
Ср, 8 Ноя 2017 08:04:46

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

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

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

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

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

0

Поделиться2Пн, 4 Май 2015 11:21:52

Автор: Deisy-
Заслуженный
Зарегистрирован: Пн, 8 Мар 2010
Сообщений: 127
Уважение: +15
Позитив: +24
Последний визит:
Вс, 9 Апр 2017 13:18:10

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

.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Пн, 4 Май 2015 15:29:00

Автор: Пепельная
Заслуженный
Зарегистрирован: Пт, 1 Май 2015
Сообщений: 78
Уважение: +15
Позитив: +29
Пол: Женский
Последний визит:
Ср, 8 Ноя 2017 08:04:46

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

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

наглядно

0

Поделиться4Пн, 4 Май 2015 15:53:59

Автор: Deisy-
Заслуженный
Зарегистрирован: Пн, 8 Мар 2010
Сообщений: 127
Уважение: +15
Позитив: +24
Последний визит:
Вс, 9 Апр 2017 13:18:10

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

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Пн, 4 Май 2015 16:15:40

Автор: Пепельная
Заслуженный
Зарегистрирован: Пт, 1 Май 2015
Сообщений: 78
Уважение: +15
Позитив: +29
Пол: Женский
Последний визит:
Ср, 8 Ноя 2017 08:04:46

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

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

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

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

0

Поделиться6Пн, 4 Май 2015 16:32:52

Автор: Deisy-
Заслуженный
Зарегистрирован: Пн, 8 Мар 2010
Сообщений: 127
Уважение: +15
Позитив: +24
Последний визит:
Вс, 9 Апр 2017 13:18:10

Пепельная
В .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Пн, 4 Май 2015 17:06:47

Автор: Пепельная
Заслуженный
Зарегистрирован: Пт, 1 Май 2015
Сообщений: 78
Уважение: +15
Позитив: +29
Пол: Женский
Последний визит:
Ср, 8 Ноя 2017 08:04:46

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

0

Поделиться8Пн, 4 Май 2015 17:16:54

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Вчера 20:11:25

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

0

Поделиться9Пн, 4 Май 2015 19:05:57

Автор: Deisy-
Заслуженный
Зарегистрирован: Пн, 8 Мар 2010
Сообщений: 127
Уважение: +15
Позитив: +24
Последний визит:
Вс, 9 Апр 2017 13:18:10

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

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

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

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

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

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

line-height: 30px;

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

0

Поделиться10Пн, 4 Май 2015 19:13:15

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Вчера 20:11:25

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

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

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

0

Поделиться11Пн, 4 Май 2015 21:04:05

Автор: Deisy-
Заслуженный
Зарегистрирован: Пн, 8 Мар 2010
Сообщений: 127
Уважение: +15
Позитив: +24
Последний визит:
Вс, 9 Апр 2017 13:18:10

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

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

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

0

Поделиться12Пн, 4 Май 2015 21:28:56

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Вчера 20:11:25

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Вт, 5 Май 2015 05:39:01

Автор: Пепельная
Заслуженный
Зарегистрирован: Пт, 1 Май 2015
Сообщений: 78
Уважение: +15
Позитив: +29
Пол: Женский
Последний визит:
Ср, 8 Ноя 2017 08:04:46

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

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

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

0

Поделиться14Вт, 5 Май 2015 11:34:02

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51119
Уважение: +15200
Позитив: +11602
Последний визит:
Вчера 20:11:25

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

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

0

Поделиться15Вт, 5 Май 2015 16:49:16

Автор: Пепельная
Заслуженный
Зарегистрирован: Пт, 1 Май 2015
Сообщений: 78
Уважение: +15
Позитив: +29
Пол: Женский
Последний визит:
Ср, 8 Ноя 2017 08:04:46

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

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

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

0