Вопросы по верстке

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

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

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

Вопросы по верстке (help)

Вопросы по верстке

Kosmo_m Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 16:11 | Сообщение # 1

Нарисовал макет и решил первый раз сверстать что-то .
Учусь так сказать .
Хочу сделать такой профиль в левом контейнере :

Проблемы :

1. Не могу сделать отступ текста от картинки
2. И хочу что бы любой аватар закруглялся , как ну yraaa ( верх сайта ) .

Профиль

AlinKo Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 16:15 | Сообщение # 2

для закругления пропиши

Код

border-radius: 250px;

Помог? Ставь

Профиль

brabus Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 16:16 | Сообщение # 3

Изображение помести в блок с border-radius:50%; или сделай его бэкграундом блока с тем же параметром.

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

futurage.ru - ты либо читаешь нас, либо мне не о чем с тобой говорить.

Профиль

AlinKo Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 16:17 | Сообщение # 4

Код

padding-left: 10px; /* Отступ слева */
padding-right: 10px; /* Отступ справа */
padding-top: 10px; /* Отступ сверху */
padding-bottom: 10px; /* Отступ снизу */

Помог? Ставь

Профиль

Kosmo_m Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 16:29 | Сообщение # 5

Уже сделал , нужно было

Код

float:left

добавить

Сообщение отредактировал Kosmo_m - Четверг, 2015-08-20, 16:47

Профиль

Kosmo_m Оффлайн

Проверенный

Дата: Четверг, 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 Оффлайн

Проверенный

Дата: Четверг, 2015-08-20, 19:24 | Сообщение # 7

Kosmo_m, аватарку лучше выводить как фон, она так растягиваться не будет.

Профиль

Вопросы по верстке (help)

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