Все сходиться кроме одной картинки у комментариев. Не понимаю почему она не меняется. Позиция задана. Может что-то не то до этого сделано.
html, body {
margin: 0;
padding: 0;
}
body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
font-family: "Arial", sans-serif;
line-height: 1.2;
color: #7f8c8d;
background: #ecf0f1;
}
.post {
position:relative;
}
.post .post-title {
font-size:20px;
font-weight:normal;
color:#2980b9;
padding-left:75px;
}
.post .post-date {
position:absolute;
width:55px;
line-height: 55px;
background-color:white;
vertical-align: middle;
top:0;
font-size:15px;
font-weight:bold;
color:#7f8c8d;
text-align:center;
border-bottom:5px solid #bdc3c7;
}
.post .post-author{
color:#7f8c8d;
padding-left:75px;
font-size:12px;
padding-top:5px;
}
.post .post-author a{
color:#2980b9;
text-decoration:none;
}
.post-stats {
font-size:12px;
display:inline-block;
position:relative;
left:65px;
padding-left:30px;
padding-top:5px; }
.post-stats .icon {
position:absolute;
left:10px;
width: 15px;
height: 15px;
background: url(/assets/course14/post-challenge.png) no-repeat 0 0;
}
.icon .icon-comments {
background-position:-20px 0;
}
.post-stats a{
color:#2980b9;
text-decoration:none;
}
.post-text {
position:relative;
left:75px;
top:20px;
padding:10px 15px;
font-size:12px;
width: 175px;
background-color:white;
border-bottom:5px solid #bdc3c7;
}
.post-type {
position:absolute;
width:55px;
height:55px;
top:70px;
border-bottom:5px solid #bdc3c7;
background:#7f8c8d url(/assets/course14/quotes.png) no-repeat 50% 50%;
}
Ineska
27.Ноябрь.2015 08:13:50
2
.icon .icon-comments {
background-position:-20px 0;
}
Замените здесь .icon .icon-comments на .post-stats . icon-comments.
О спасибо большое. Только не понимаю почему именно так?
Ineska
27.Ноябрь.2015 09:04:17
4
Это контекстный селектор. Применяется для элементов, последовательно вложенных друг в друга.
Получается div внутри div -а . Запись .icon .icon-comments является не правильной, потому что в html-коде эти два класса определены для одного и того же элемента. Они просто применяются последовательно.
1 лайк
Ineska:
контекстный селектор
да теперь разобралась спасибо
1 лайк
А у меня всего на процент меньше - 98 =(
Не может дата на место встать. Что с ней сделать?
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
width: 280px;
min-height: 250px;
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
font-size: 12px;
font-family: "Arial", sans-serif;
line-height: 1.2;
color: #7f8c8d;
background: #ecf0f1;
}
.post-stats .icon {
width: 15px;
height: 15px;
}
.post {
position: relative;
}
.post-title {
font-size:20px;
color: #2980b9;
margin-left: 75px;
}
.post-date {
position: absolute;
top: 0px;
width: 55px;
height: 40px;
background-color: #FFFFFF;
border-bottom: 5px solid #bdc3c7;
font-weight: bold;
font-size: 15px;
text-align: center;
padding-top: 15px;
}
.post-type {
position: absolute;
top: 70px;
width: 55px;
height: 55px;
border-bottom: 5px solid #bdc3c7;
background: #7f8c8d url(/assets/course14/quotes.png) no-repeat 50% 50%;
}
.post-author {
margin-top: 5px;
margin-left: 75px;
}
.post-author a {
text-decoration: none;
color: #2980b9;
}
.icon {
position: absolute;
left: -20px;
width: 15px;
height: 15px;
background: url(/assets/course14/post-challenge.png) no-repeat;
}
.icon-comments {
background-position: -20px 0;
}
.post-stats {
position: relative;
display: inline-block;
top: 5px;
left: 65px;
margin-left: 30px;
}
.post-stats a {
text-decoration: none;
color: #2980b9;
}
.post-text {
background-color: #FFFFFF;
padding: 10px 15px 10px;
float: right;
margin-top: 25px;
width: 175px;
border-bottom: 5px solid #bdc3c7;
}
Различия вот:
Ineska
08.Март.2016 09:50:34
7
Если я правильно помню, то дата выравнивается с помощью свойства line-height .
1 лайк
Хм. Попробую. Совсем не отложилось, что как-то проходили. А потом пересмотрел - действительно, касались line-height. Спасибо!
1 лайк