Panel użytkownika, jak wyśrodkować awatar?

**devciak** · (Ten post był ostatnio modyfikowany: 11.07.2014, 14:36 przez devciak.)

wersja skryptu MyBB: Najnowsza
adres forum: pride-fox.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Chciałbym żeby awatary były wyśrodkowywane, bądź zasłaniały całą powierzchnie kod, który posiadam:

<html>

<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>

{$headerinclude}

</head>

<body>

{$header}

<div><div class="thead">&nbsp;<span>{$lang->profile}</span></div>

    <div id="userprofile-maininfo">

<div id="userprofile-tabs">

    <div id="userprofile-tabs-nav">

    <div class="userprofile_avatar">{$avatar}</div>

    <li><a href="#generalinfo">Ogólne</a></li>

<li><a href="#more">Więcej ...</a></li>

    </div>

    <div class="tab" id="generalinfo">

<div class="tab_content">

<span class="profile_PW button2"></a>&nbsp;<a href="private.php?action=send&amp;uid={$memprofile['uid']}">PW</a></span>

{$sendemail}

<span class="profile_find button2"></a>&nbsp;<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a></span>

<div class="profile_info">

    <h1>{$formattedname}</h1>

{$groupimage}

    {$awaybit}<br />    

{$online_status} {$lang->lastvisit} {$memlastvisitdate} {$memlastvisittime}<br />

</div>    

<br />

<div class="member_box">

<ul>

<h3><strong>{$lang->users_forum_info}</strong></h3>

<li class="trow_member"><span class="trow_title"><strong>{$lang->joined}</strong></span><span class="trow_text">{$memregdate}</span></li>

<li class="trow_member"><span class="trow_title"><strong>{$lang->date_of_birth}</strong></span><span class="trow_text">{$membday} {$membdayage}</span></li>

<li class="trow_member"><span class="trow_title"><strong>{$lang->local_time}</strong></span><span class="trow_text">{$localtime}</span></li>

<li class="trow_member"><span class="trow_title"><strong>{$lang->lastvisit}</strong></span><span class="trow_text">{$memlastvisitdate} {$memlastvisittime}</span></li>

<li class="trow_member"><span class="trow_title"><strong>{$lang->total_posts}</strong></span><span class="trow_text">{$memprofile['postnum']}</span></li>

<li class="trow_member"><span class="trow_title" style="width:130px;"><strong>{$lang->timeonline}</strong></span><span class="trow_text">{$timeonline}</span></li>

<li class="trow_member">{$warning_level}</li>

<li class="trow_member"><span class="trow_text">{$memprofile['usernotes']}</span></li>

</ul>

</div>

<div class="member_box">

<ul>

<h3><strong>Sygnatura</strong></h3>

<li class="trow_member">{$signature}</li>

</ul>

</div>

<div class="float_right" style="width:30%;bottom:258px;position:relative;">

{$reputation}<div class="member_box2">

<ul>

<h3><strong>Opcje:</strong></h3>

<span class="box_text">

{$adminoptions}

{$modoptions}

</span></ul></div>

<div class="right">

{$referrals}</div>

</div>

</div>

</div>

<div class="tab" id="more">

<div class="tab_content">

<div class="member_box2">

<ul>

<h3><strong>{$lang->users_forum_info}</strong></h3>

<li class="trow_member" style="float:left;"><span class="trow_title" style="display:inline-block;"><strong>{$lang->icq_number}</strong></span><span class="trow_text">{$memprofile['icq']}</span></li>

<li class="trow_member" style="float:left;"><span class="trow_title" style="display:inline-block;"><strong>{$lang->homepage}</strong></span><span class="trow_text">{$website}</span></li>

</ul>

</div>

</div>

</div>

</div>

<script type="text/javascript">

var tabber1 = new Yetii({

id: 'userprofile-tabs'

});

</script>

</div><br class="clear">

{$footer}

</body>

</html>

PRzykładowy profil http://pride-fox.pl/member.php?action=profile&uid=1

**SLAVOO** · 11.07.2014, 15:34

W member.css znajdź .userprofile_avatar
i zamien całą klasę na tą:

.userprofile_avatar {
    margin: 0 auto;
    width: 140px;
} 

**devciak** · (Ten post był ostatnio modyfikowany: 11.07.2014, 16:06 przez devciak.)

(11.07.2014, 15:34)SLAVOO napisał(a): W member.css znajdź .userprofile_avatar
i zamien całą klasę na tą:

.userprofile_avatar { margin: 0 auto; width: 140px; }

Wgrałem nawet awatar z tłem i nic.
http://i.imgur.com/9ltXGOK.png

**Snake_** · 11.07.2014, 16:56

Dopisz jeszcze tam:

text-align: center;

**devciak** · 11.07.2014, 17:21

Wszystko działa elegancko, tylko w kodzie powinno znajdować się jeszcze coś co automatycznie reguluje wymiary awatara ponieważ przy większym rozmiarze dzieje się takie coś: http://pride-fox.pl/member.php?action=profile&uid=2

**Snake_** · 11.07.2014, 17:28

Dodaj za tym jeszcze coś takiego:

.userprofile_avatar img {
    height: 140px;
    width: 140px;
} 

**devciak** · 11.07.2014, 17:44

}

.userprofile_avatar {

    margin: 0 auto;

    width: 140px;

text-align: center;

.userprofile_avatar img {

    height: 140px;

    width: 140px;

}

efekt: http://pride-fox.pl/member.php?action=profile&uid=2

**Snake_** · 11.07.2014, 17:47

.userprofile_avatar {

    margin: 0 auto;

    width: 140px;

text-align: center;

}

.userprofile_avatar img {

    height: 140px;

    width: 140px;

}

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie

Panel użytkownika, jak wyśrodkować awatar?

Użytkownicy przeglądający ten wątek: