|
   |
| Форум » uCoz » Помощь по uCoz » Топ пользователей (Как можно изменить?) |
| Топ пользователей |
Дата: Пятница, 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} |
Дата: Пятница, 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)
|
Дата: Пятница, 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)
Помог? Ставь  или поддержи проект.
|
Дата: Пятница, 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)
|
| |||
| |||