Топ пользователей

Новые сообщения · Правила форума · Поиск

Оставить отзыв · Пожаловаться · RSS

Страница 1 из 1
1

Топ пользователей (Как можно изменить?)

Топ пользователей

Миха62 Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 15:58 | Сообщение # 1

Подскажите как сделать тоже самое но что бы были кружки? А не квадратики. На сайте все аватарки, круглые.

Код

<div class="top_user"><a href="$PROFILE_URL$"><span>$REPUTATION$</span></a><div class="top_user_black"></div><img src="$AVATAR_URL$" alt="$USERNAME$" /></div>

Код

<div class="top_use1s">$MYINF_1$</div>

Код

.top_use1s {width:300px;height:180px;background:#1d1d1d;font-family:Tahoma,sans-serif}
.top_user {width:75px;height:90px;overflow:hidden;float:left;background:#1d1d1d}
.top_user img {width:90px;margin-left:-7px}
.top_user a {width:75px;height:90px;position:absolute;z-index:2;text-decoration:none}
.top_user a:hover {background:rgba(255,255,255,0.1)}
.top_user a span {color:#FFF;padding-top:70px;text-align:center;display:block;font-size:11px}
.top_user_black {position:absolute;width:75px;height:24px;background:rgba(0,0,0,0.3);margin-top:66px}

Профиль

Frilanser Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 16:02 | Сообщение # 2

Добавь в css - border-radius:50%;

Напишем сайт, скрипт - любой тематики и сложности, в макс. быстрые сроки!.. Предоставляем SEO услуги для продвижения групп и сайтов!. За подробностями обращайтесь по Контактам: vk.com/frilanser | Skype: spammrac ...

Профиль

Миха62 Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 16:12 | Сообщение # 3

Цитата Frilanser (

)

border-radius:50%;

Код

.top_use1s {width:300px;height:180px;background:#fff;font-family:Tahoma,sans-serif;}
.top_user {width:75px;height:90px;overflow:hidden;float:left;background:#fff}
.top_user img {width:90px;margin-left:-7px;border-radius:50%;}
.top_user a {width:75px;height:90px;position:absolute;z-index:2;text-decoration:none}
.top_user a:hover {background:rgba(255,255,255,0.1);border-radius:50%;}
.top_user a span {color:#FFF;padding-top:70px;text-align:center;display:block;font-size:11px}
.top_user_black {position:absolute;width:75px;height:24px;background:rgba(70,0,0,0.3);margin-top:66px;border-radius:50%;}

нужно просто круги и поле для счётчика как-то странно получилось

Прикрепления: 9804936.jpg (21.5 Kb)

Профиль

Frilanser Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 16:27 | Сообщение # 4

Напишите по контактам ниже!...

Профиль

Миха62 Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 17:43 | Сообщение # 5

Frilanser, Я думал тут помогают, так администратор сайта сказал.

Профиль

admin Оффлайн

Проверенный

429

Дата: Пятница, 2016-02-12, 17:53 | Сообщение # 6

Миха62, так вы просите не просто помощи, а чтобы вам верстку сделали другую. Вот, серьезно, border-radius и есть ответ.

Вот, что получилось у меня:

Код

.top_use1s {
    width: 320px;
    height: 180px;
    background: none;
    font-family: Tahoma,sans-serif;
}
.top_user {
    width: 75px;
    height: 75px;
    overflow: hidden;
    float: left;
    background: none;
    border-radius: 50%;
    margin: 0px 5px;
    margin-bottom: 20px;
}

.top_user a {
    width: 75px;
    height: 90px;
    position: absolute;
    z-index: 2;
    text-decoration: none;
}

.top_user a span {
    color: #FFF;
    padding-top: 52px;
    text-align: center;
    display: block;
    font-size: 11px;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

.top_user_black {
    position: absolute;
    width: 75px;
    height: 24px;
    background: none;
    margin-top: 66px;
}

.top_user img {
    width: 90px;
    margin-left: -7px;
}

Прикрепления: 1576552.png (107.8 Kb)

Помог? Ставь или поддержи проект.

Профиль

Миха62 Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 20:58 | Сообщение # 7

admin, Вот что получилось. При наведении текст смещается немного в право, подскажите что изменить?

Код

.top_use1s {width: avto;height: 180px;background: none;font-family: Tahoma,sans-serif;}
.top_user {width: 65px;height: 65px;overflow: hidden;float: left;background: none;border-radius: 50%;margin: 0px 9px;margin-bottom: 20px;}
.top_user a {width: 55px;height: 70px;position: absolute;z-index: 2;text-decoration: none;}
.top_user a span {color: #FFF;padding-top: 40px;text-align: center;display: block;font-size: 14px;text-shadow: 3px 4px 5px rgba(0,0,0,0.9);}
.top_user_black {position: absolute;width: 85px;height: 24px;background: none;margin-top: 66px;}
.top_user img {width: 75px;margin-left: -7px;}
.top_user a:hover {background:rgba(0,0,0,0.3);width: 65px;height: 65px;border-radius: 50%;}

Добавлено (12.02.2016, 20:58)
---------------------------------------------
Когда нет аватарки как прописать правильно аватарку?

Код

<div class="top_user"><a href="$PROFILE_URL$"><span>$REPUTATION$</span></a><div class="top_user_black"></div>
<?if($_AVATAR_URL$)?>$_AVATAR_URL$<?else?><img src="/noavatar2.gif"><?endif?></div>

Прикрепления: 4427354.jpg (15.1 Kb)

Профиль

hesepu Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 21:02 | Сообщение # 8

Тема перенесена в "помощь по uCoz".

Сотрудничество и реклама - cooperation@yraaa.ru

Профиль

Миха62 Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 21:09 | Сообщение # 9

Спасибо решил все проблемы, кроме. При наведении число рейтинга немного уходит в права

вот ещё раз код :

Код

.top_use1s {width: avto;height: avto;background: none;font-family: Tahoma,sans-serif;}
.top_user {width: 65px;height: 65px;overflow: hidden;float: left;background: none;border-radius: 50%;margin: 0px 9px;margin-bottom: 20px;}
.top_user a {width: 55px;height: 70px;position: absolute;z-index: 2;text-decoration: none;}
.top_user a span {color: #FFF;padding-top: 40px;text-align: center;display: block;font-size: 14px;text-shadow: 3px 4px 5px rgba(0,0,0,0.9);}
.top_user_black {position: absolute;width: 85px;height: 24px;background: none;margin-top: 66px;}
.top_user img {width: 75px;margin-left: -7px;}
.top_user a:hover {background:rgba(0,0,0,0.3);width: 65px;height: 65px;border-radius: 50%;}

Профиль

LANIGIRO Оффлайн

Проверенный

Дата: Пятница, 2016-02-12, 21:57 | Сообщение # 10

Чувак, ты лучше font-family измени, а то шрифт не айс...
А чтоб вправо не шло, взгляни на "a" и на "a:hover", там разница в 10 пикселей!

Код

.top_user a {width: 55px;height: 70px;position: absolute;z-index: 2;text-decoration: none;}
.top_user a:hover {background:rgba(0,0,0,0.3);width: 65px;height: 65px;border-radius: 50%;}

А может и не в этом проблема, но всё же, попробуй...

Добавлено (12.02.2016, 21:57)
---------------------------------------------
А вообще: зачем на "a:hover" устанавливать border-radius??? Это ведь переменная ссылки, а не картинка...

Music is my life
https://soundcloud.com/lanigiromusic

Профиль

Миха62 Оффлайн

Проверенный

Дата: Суббота, 2016-02-13, 14:53 | Сообщение # 11

Цитата LANIGIRO (

)

А чтоб вправо не шло, взгляни на "a" и на "a:hover", там разница в 10 пикселей!

Спасибо. всё теперь ровно)))

Профиль

LANIGIRO Оффлайн

Проверенный

Дата: Суббота, 2016-02-13, 16:03 | Сообщение # 12

Цитата Миха62 (

)

Спасибо. всё теперь ровно)))

Не за что!)

Music is my life
https://soundcloud.com/lanigiromusic

Профиль

Топ пользователей (Как можно изменить?)

Страница 1 из 1
1