Взломанный котопрофайл. 18/18.

Курсы §16. Наследование и каскадирование
1

Плиииз, помогите разобрать, каким образом можно убрать верхнюю горизонтальную линию и отменить смещение профиля. Просмотрела другие работы на форуме, вроде все так же, где ошибка не понимаю.

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

div .profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.info h2,
.profile,
#info-title {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e !important;
border-radius: 4px;
}

.profile div.fact {
padding: 10px;
background: white;
}

.profile .fact:nth-child(odd) {
background: #ecf0f1;
}

.profile .fact::after {
content: “”;
display: table;
clear: both;
}

.profile .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.profile .fact .value {
margin-left: 140px;
color: #34495e;
}

.profile .info h2 {
margin-top: 5px !important;
}

.albums {
margin-top: 5px !important;
}

.albums #miska {
margin-right: 5px !important;
}

.albums img {
float: left;
margin-right: 5px !important;
}

.profile .albums img:last-child {
margin-right: 0 !important;
}

.profile .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.profile .stroke {
background: #3498db;
}

.profile .feed {
background: #2ecc71;
}

.profile .startle {
background: #e74c3c;
}

2

В этом селекторе вы упомянули профиль.

1 лайк
3

Ранее применяла и с профилем, и без него - результат отрицательный. В итоге оставила профиль и отправила в том варианте, в котором и сохранила. Может где-либо в другом месте допущена ошибка (полагаю, где селекторы относятся к профилю в общем формате)?

4

Ну, во-первых, @Ineska правильно подсказывает Вам: одна из ошибок - уберите из этого класса .profile и допишите #перед info-title:
.info h2,
.profile,
**#**info-title {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e !important;
border-radius: 4px;
}

1 лайк
5

Во-вторых, уберите в этом классе пробел между div и .profile - здесь неправильный синтаксис, поэтому данный класс просто не срабатывает и совмещает границы всего профиля и body:
div.profile {
padding: 5px 10px;
}

А лучше вообще уберите div здесь - он ни на что не влияет.

6

В-третьих, удалите этот класс, он как раз Вам и мешает в отступе между синим полем “Альбом” и информацией профиля:
.profile .info h2 {
margin-top: 5px !important;
}

1 лайк
7

А в четвёртых, когда сделаете всё, сами покомментируйте отдельно каждый класс и свойства, которым Вы придали приоритет - есть лишнее. :slight_smile:

1 лайк
8

Алексей, благодарю Вас за помощь и советы.

1 лайк
9

Испытание пройдено. Вопрос на заметку и для саморазвития: почему когда скопировала текст у себя в CSS и добавила на форум, info-title был отмечен жирным шрифтом и без знака #, хотя в CSS знак # в данном случае был в наличии. Это связано с особенностью написания текстов на форуме?

10

Да, Вы правы: в самом деле такое есть! Не знаю, никогда не сталкивался. Поэтому не могу ответить на этот вопрос:relaxed:

11

Понятно.))))
На данном этапе взялась за ум и решила серьезно заняться образованием. Здорово выручает наш сайт.)))) Без практики программирование невозможно. Подскажите, пожалуйста, как быть. Допустим, набрала текст в компиляторе в формате html и css, каковы должны быть дальнейшие шаги.

12

Знаю, вопрос не по теме. Помогите, пожалуйста. Как можно увидеть конечный результат html и css(как у нас на форуме, имею ввиду) ?

13

Я помогу) Это еще один язык разметки, Markdown называется. Знак # форматирует текст как заголовок, поэтому отображается жирным.
Познакомьтесь с ним, простой и интересный.

2 лайка
14

Не совсем понимаю, что вы имеете в виду здесь под словом “компилятор”. У вас на компьютере должен быть свой редактор кода, в отдельных файлах вы пишете код html и css, а потом открываете файл с расширением .html в браузере, чтобы посмотреть, что получилось.

1 лайк
15

Инеска, благодарствую. Пролили свет на одну из темных сторон программирования.

16

Прошу прощения, пока я начинающий практик. Сама не понимаю отличия между опрелелениями “компилятор” и “редактор кода”. Подразумевала под словом “компилятор” программу, позволяющую создать файл в формате html и/или css, а далее открыть его, чтобы посмотреть на результат (как будет видеть его подьзователь).
Инеска, вы мне здорово помогли.))) Многие, зная ответ, не хотели отвечать или объяснять что да как. От всей души благодарю Вас.)))

17

О, какая прелесть!!:grinning: Мне уже нравится - нашёл интерактивный tutorial! Спасибо Вам за Вашу помощь и то, что щедро делитесь своим опытом и знаниями!!

18

Ссылочкой поделитесь с сообществом)
Или здесь, или в теме полезных ссылок и материалов.

19

Компилятором в данном случае получается браузер)

1 лайк
20

http://www.markdowntutorial.com/

1 лайк