Как отображать изображения аватара пользователя в рамке эскиза?

Question

Все загруженные изображения на моем сайте имеют рамку вокруг миниатюры. Я настроил его так, чтобы было место для отображения имени пользователя и изображения аватара в кадре с их загруженным изображением. Надеемся, что эти два изображения дают лучшее понимание того, что я пытаюсь выполнить link to imgur

я использую это для имен пользователей и рисунков профиля:

<?php if($ib->user['id']) {?> 
div class="userInfo"> 
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib->user['avatar']; ?>"/> 
<div class="name"> 
    <strong> 
     <a href="<?php echo Config::$absolutePath.'user/'.$ib->user['name']; ?>"><?php echo $ib->user['name']; ?></a> 
    </strong> 
</div> 

И это для рамы вокруг загрузки

#imageGrid div { 
     position: absolute; 
     overflow: hidden; 
     border-radius: 0px; 
    border: 1px solid #FFFFFF; 
padding: 60px 10px 10px 10px; 
moz-box-shadow: 3px 3px 5px 6px #ccc; 
-webkit-box-shadow: 3px 3px 5px 6px #ccc; 
box-shadow:   3px 3px 5px 6px #a1a1a1; 
background-color: #dddddd; 

У меня не было ни малейшего представления о том, что я должен попробовать, поэтому я хотел посмотреть, могу ли я просто добавить/объединить divs, но это не сработает.

Если вам нужна дополнительная информация, лучшее описание или больше кода, дайте мне знать. Спасибо заранее, я довольно новичок в этом, и это единственное, что я застрял.

Answer 1

вы должны поместить их в контейнер элемента, который управляет макет того, что в нем, вы можете использовать USERINFO

<div class="userInfo"> 
<img class="avatar" width="40" height="40" src="<?php echo Config::$absolutePath.$ib-  >user['avatar']; ?>"/> 
<div class="name"> 
<strong> 
    <a href="<?php echo Config::$absolutePath.'user/'.$ib->user['name']; ?>"><?php echo $ib->user['name']; ?></a> 
</strong> 
</div> 
</div> 

.userInfo { 
width:50px; 
} 

.avatar { 
width:40px; 
} 

.name { 
width:40px; 
} 

за #imageGrid DIV я бы удалить большую часть из того, что у вас есть в наличии и примените его к конкретным классам CSS, которые я добавил выше.