Обложка + макет профиля

Question

Обложка + макет профиля

0

Я пытаюсь создать facebook, как Profile/Cover Layout, но я борюсь с правильным макетом.

Что я до сих пор:

<div class="user_profile_cap">

      <div class="user_profile_cover">
        <img src="jpgfile" alt=""/>
      </div>

      <div class="user_profile_headline">
        Pull Right Text
      </div>

    </div>

CSS

.user_profile_cap {
  width: 970;
  height: auto 9;
  border: 1px solid #DDD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.user_profile_cover {
  img {
    width: 970px;
    height: 115px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

}

.user_profile_headline {
  padding: 10px;
  font-size: 16px;
}

http://jsfiddle.net/kvEBF/

Желаемая компоновка

Я пытаюсь правильно разместить изображение профиля, название страницы и правый текст в этом макете.

Может кто-нибудь мне помочь?

The Mini John 21 окт. 2013, в 09:50

Источник

Теги:

html

css

layout

1 ответ

Ещё вопросы

Falguni Panchal · Accepted Answer · 2013-10-21T04-50-00.000Z

Как это

рабочая демонстрация

CSS

    .user_profile_cap {
  width: 970;
  height: auto 13;
  border: 1px solid #DDD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    overflow:hidden;
}

.user_profile_cover {
  img {
    width: 970px;
    height: 115px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
        }

}

.user_profile_headline {
  padding: 10px;
  font-size: 16px;
}
.user_profile_headline img{
    border:1px solid #EEEEEE;
    width:124px;
    height:124px;
    float:left;
    margin:-90px 10px 0  0;
    position:relative;
    z-index:111;

    background-color:white;
}
.user_profile_headline h2{

    margin:0;
    padding:0;
    font-size:12px;
    font-weight:bold;
    display:block;   
}
.user_profile_headline span{
    font-size:10px;
    font-family:verdana;
    color:gray;

}

О боже .. Большое спасибо, буду изучать это!