Здравствуйте!
С недавних пор изучаю html\css. Прошел несколько курсов и теперь решил знания теоретические подкреплять практикой. Уже есть опыт создания страниц (около 20).
Сколько статей я не читал, у меня в голове не укладывается, как работать со слоями. В теории звучит просто, а вот конкретно в полевых условиях я потерялся. В качестве практики я решил воссоздать блок профиля из твиттера (по фото ниже все поймете).
Если чисто визуально представлять этот блок то для меня он выглядит следующим образом - два див блок верхний (фото кавер) и нижний див блок в которым содержится фото, имя пользователя и ссылка и ниже список с тремя колонками. Верно?
Собственно, вопрос - как сделать чтобы фото было справа, а текст слева? Какими тегами осуществляется позиционирование контента внутри блока (дива).
Вот что у меня получилось.
Код:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>About me</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<a href="#"><div class="avatar"></div>
<div class="name"><h4>James Rodriguez</h4>
<a href="#"><h3>@james_10</h3></a>
</div>
<div class="footer"></div>
</body>
</html>
body {
margin: 20px auto;
width: 500px;
background-color: #eef1f4;
}
h3 {
font-size: 14px;
color: #66757f;
}
h4 {
color: #000000;
text-align: center;
font-size: 20px;
font-weight: 700;
}
.header {
height: 133px;
width: 100%;
background-color: ##0084b4;
background-position: center;
background-size: 100%;
border-radius: 4px 4px 0px 0px;
}
.content{
background-color: #FFFFFF;
width: 500px;
height: 100px;
border-radius: 0px 0px 5px 5px;
}
.avatar {
width: 100px;
height: 100px;
margin: -150px 0px 0px 25px;
border: 2px solid #FFFFFF;
border-radius: 5px;
background-color:#c7c7c7;
}
.name{
position: absolute;
width: 185px;
}
.footer {
height: 100px;
width: 100%;
background-color: #FFFFFF;
border-radius: 4px;
clear: both;
margin-top: 10px;
}
Прошу помочь разобраться, а также снабдить вспомогательно литературой. Заранее премного благодарен!
Простой
