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

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

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

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

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

Страница:   1 2

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

1

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

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

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

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

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

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

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

0

21

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

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

Я примитивная амёба и совсем забыл, что так можно):

Пепельная
В итоге код будет выглядеть так и регулирование статуса будет именно таким, как указал Alex_63:

li.pa-title {
  font-weight: bold;
  background: url(http://sg.uploads.ru/eX0ES.png) 5px center no-repeat;
  height: 70px;
  width: 170px;
  margin-top: 7px;
  padding: 0 60px 0 60px;
  color: #цвет;
}

Отредактировано Deisy- (Вт, 5 Май 2015 19:37:56)

0

22

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11226
  • Уважение: +7630
  • Позитив: +5466
  • Пол: Мужской
  • Последний визит:
    Вчера 23:01:30

Deisy-
Только нун цветом выделить - что можно менять,
Т.к значения взял "с потолка", и для конкретного случая придется подгонять ;)

li.pa-title {
  font-weight: bold;
  background: url(http://sg.uploads.ru/eX0ES.png) 5px center no-repeat;
  height: 70px;
  width: 170px;
  margin-top: 7px;
  padding: 0 60px 0 60px;
  color: #цвет;
}

P.S. Ксать, мой форум на 0bb.ru тож не открывается, видать неполадки на каком-то сервере :(

+1

23

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

Deff, никак(
Deisy-
Alex_63
О супер!) У меня еще один тест-форум есть с этим дизом - сейчас протестирую на нем всё)

Отредактировано Пепельная (Ср, 6 Май 2015 04:59:06)

0

24

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

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

0

25

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51423
  • Уважение: +15371
  • Позитив: +11887
  • Последний визит:
    Сегодня 00:45:38

Пепельная

li.pa-title {
background: url("http://sg.uploads.ru/eX0ES.png") 50% 0px no-repeat transparent;
color: #DDBF6F;
font-weight: 700;
height: 70px;
margin-top: 10px;
line-height:7px;
padding: 0px 60px;
width: 170px;
}

+1

26

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

Deff
О!  :cool:  благодаря этому коду удалось наконец сместить картинку-фон относительно текста.) Но она по умолчанию будет обрезаться областью блока статуса, как сейчас, и ее невозможно будет состыковать с повторяющимся фоном под самим аватаром. (что забавно- во всех вариантах текст статуса буквально примкнут к верхней границе своего блока и никакими отступами его не сдвинуть вниз о.О)

Вот, смотрите, text-indent, например, смог сместить исключительно текст, не цепляя картинку, а есть что-то аналогичное для верхнего отступа текста?

Отредактировано Пепельная (Ср, 6 Май 2015 08:49:04)

0

27

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

а вообще…еще есть вариант сделать визуальный (извращенный) подгон в фш, чтобы вас не мучить,  итак уже достаточно помогли просто реально хотелось с этим разобраться  спасибо большое^^

Отредактировано Пепельная (Ср, 6 Май 2015 09:21:02)

0

28

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51423
  • Уважение: +15371
  • Позитив: +11887
  • Последний визит:
    Сегодня 00:45:38

Картинка смещается регулировкой  в
background: url("http://sg.uploads.ru/eX0ES.png") 50% 0px no-repeat transparent;
Выделено красным, значение может быть как отрицательным так и положительным в пределах высоты картинки. Отрицательное смещает вверх
Отступ текста смещается регулировкой line-height:7px;
Высота элемента под вклейку картинки  height: 70px;

0

29

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11226
  • Уважение: +7630
  • Позитив: +5466
  • Пол: Мужской
  • Последний визит:
    Вчера 23:01:30
Пепельная написал(а):

Но она по умолчанию будет обрезаться областью блока статуса,

Попробуйте покрутить эти значения:

li.pa-title {
  background: transparent url(http://sg.uploads.ru/eX0ES.png) no-repeat;
  background-position-x: center;
  background-position-y: 8px;  /* Позиция картинки по вертикали */
  color: #DDBF6F;
  font-weight: 700;
  height: 70px;
  margin-top: 5px;
  line-height: 7px;
  padding-top: 10px !important; /* Отступ от надписи сверху */
  padding-bottom: 9px !important; /* Отступ от надписи снизу */
  padding-left: 60px;
  padding-right: 60px;
  width: 170px;
}

0

30

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

Alex_63
Deisy-
Deff
Ураа, всё чётко!)) Ребята, вы гениальны ^^ Спасибо большое, через все браузеры одинаково хорошо смотрится) Так что проблема решена.

0

Страница:   1 2

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