• Страница 1 из 1
  • 1
Вопросы по верстке
Kosmo_m Оффлайн
Проверенный
0
Дата: Четверг, 2015-08-20, 16:11 | Сообщение # 1
Нарисовал макет и решил первый раз сверстать что-то .
Учусь так сказать .
Хочу сделать такой профиль в левом контейнере :


Проблемы :



1. Не могу сделать отступ текста от картинки
2. И хочу что бы любой аватар закруглялся , как ну yraaa ( верх сайта ) .
Профиль
AlinKo Оффлайн
Проверенный
1
Дата: Четверг, 2015-08-20, 16:15 | Сообщение # 2
для закругления пропиши
Код
border-radius: 250px;


Помог? Ставь
Профиль
brabus Оффлайн
Проверенный
7
Дата: Четверг, 2015-08-20, 16:16 | Сообщение # 3
Изображение помести в блок с border-radius:50%; или сделай его бэкграундом блока с тем же параметром.

Для текста: margin-left


futurage.ru - ты либо читаешь нас, либо мне не о чем с тобой говорить.
Профиль
AlinKo Оффлайн
Проверенный
1
Дата: Четверг, 2015-08-20, 16:17 | Сообщение # 4
Код
padding-left: 10px; /* Отступ слева */
padding-right: 10px; /* Отступ справа */
padding-top: 10px; /* Отступ сверху */
padding-bottom: 10px; /* Отступ снизу */


Помог? Ставь
Профиль
Kosmo_m Оффлайн
Проверенный
0
Дата: Четверг, 2015-08-20, 16:29 | Сообщение # 5
Уже сделал , нужно было
Код
float:left
добавить



Сообщение отредактировал Kosmo_m - Четверг, 2015-08-20, 16:47
Профиль
Kosmo_m Оффлайн
Проверенный
0
Дата: Четверг, 2015-08-20, 17:12 | Сообщение # 6
Правильно или что-то надо сменить ?

Сделал вот так :

Код
<div class="header_profile">
<div style="padding-left:20px; padding-top:10px" >
<div class="f_left"><img src="images/avatar.gif" width="62px" height="62px" class="hp_photo"></div>
<div class="profile_mini">
<ul>

<li><img src="images/profile.png" style="padding-right:5px" width="16px" height="16px" ><a href="#">Мой профиль </a></li>
<li><img src="images/ls.png" style="padding-right:5px" width="16px" height="16px" ><a href="#">Личные сообщения (0)</a></li>
</ul>
</div>
</div>
</div>


Код
.hp_photo {  
  border-radius:50%;
width:62px;
height:62px;
border: solid 2px #72cc29;
}

.header_profile {
   height:66px;
   width:312px;
   min-width:312px;
  }
.profile_mini {

  text-decoration: none ;
  padding-top:10px;
  padding-left:75px;

}
.profile_mini ul {
  list-style:none;
}
.profile_mini ul li {
    float:left;
    padding-top: 5px;
     
   }
.profile_mini ul li a:hover {
color: #72cc29;
  }


Прикрепления: 3808333.png (13.1 Kb)
Профиль
CbIPoK Оффлайн
Проверенный
37
Дата: Четверг, 2015-08-20, 19:24 | Сообщение # 7
Kosmo_m, аватарку лучше выводить как фон, она так растягиваться не будет.
Профиль
  • Страница 1 из 1
  • 1
Поиск: