Испытание в курсе Знакомство с css

Ortega · 30.Май.2015 14:41:21

Привет всем
Не пойму как пройти

Пока сообразил только что для левой и правой колонок надо ставить флоат левт и флоат ригхт
а вот остальное…

Мне не ясно как проходить
где ошибка то?

Body{
Width:260px;
Margin:0;
padding:10px;
font-family:"Arial";
font-size:12px;
}

H1{
font-size:16px;
}

P{
font-size:12px;
}

.header{
height:40px;
margin-bottom:10px;
}

.logo{
Float:left;
Width:25%;
height:20px;
text-align:center;
font-size:16px;
}

.contacts{
Float:right;
Width:45%;
height:20px;
text-align:right;
}

.left-column{
Width:45%;
Float:left;
padding:10px 5px;
backround:#DFF0D8;
}

.right-column{
Width:45%;
Float:right;
padding:10px 5px;
backround:#468847;
}

Ortega · 01.Июнь.2015 10:16:15

Крикнул а в ответ тишина

juwain · 01.Июнь.2015 11:31:25

Для начала надо поправить синтаксические ошибки в коде, вроде backround. Не дурно было бы писать названия свойств и классов со строчной буквы.

Затем для фонового цвета нужно использовать цвета из теории. Потом подобрать нужные ширины и отступы.

Ortega · 02.Июнь.2015 09:37:29

Насчет строчных букв испрвлено
насчет backround не понятно…
что надо было backround-color: ;
по поводу цветов

Подсказки по использованным цветам:

{
}
:;
px
=" "
" "

body{
width:260px;
margin:0;
padding:10px;
font-family:“Arial”;
font-size:12px;
}

h1{
font-size:16px;
}

p{
font-size:12px;
}

.header{
height:40px;
margin-bottom:10px;
}

.logo{
float:left;
width:25%;
height:20px;
text-align:center;
font-size:16px;
}

.contacts{
float:right;
width:45%;
height:20px;
text-align:right;
}

.left-column{
width:45%;
float:left;
padding:10px 5px;
backround:#DFF0D8;
}

.right-column{
width:45%;
float:right;
padding:10px 5px;
backround:#468847;
}

juwain · 02.Июнь.2015 09:40:02

Что это — непонятно.

background!

Ortega · 02.Июнь.2015 11:51:04

Друг!
Вот исходник с которогог копировал для проверки

никакого восклицательного знака не было рядом с бекграунд

juwain · 02.Июнь.2015 13:08:01

Восклицательный знак я поставил для восклицания . Имею в виду, что ошибка в слове background. Пропущена буква g.

Ortega · 03.Июнь.2015 10:29:26

У-пс!!
Это называется слона-то и не заметил
не иначе как со слепу

Ortega · 03.Июнь.2015 11:32:21

Впрочем с “g” или без
а рез-т все равно всего лишь
"теплее" и не более того млин

juwain · 03.Июнь.2015 11:34:04

Смотрите вкладки «различия» и «наложение», чтоб увидеть, где расходится.

dron · 18.Июнь.2015 08:49:35

Здравствуйте!

Подскажите, что делаю не так в этом задании?

Вот скрин того что получается:

С образцом все сходится(вроде), а вот в Результате почему то - нет.

Мой CSS:

  body{
    width:260px;
    margin:0;
    padding:10px;
    font-family:"Arial";
    font-size:12px;
}
h1{
    font-size:16px;
}

/* Общие стили для блоков */ 
.logo,
.contacts,
.left-column,
.right-column{
    padding:10px 5%;
    background:#FCF8E3;
}

/* Собственные стили для каждого блока */
.header{
    height:40px;
    margin-bottom:10px;
}
.logo{
    float:left;
    width:25%;
    height:20px;
    text-align:center;
    font-weight: bold;
    font-size:16px;
   
}
.contacts{
    float:right;
    width:45%;
    height:20px;
    text-align:right;
    color:green;
    font-style:italic;
    padding-left:25px;
}
.left-column{
    width:48%;
    float:left;
   
}
.right-column{
    width:25%;
    float:right;
}

.right-column,
.logo {
    background:#DFF0D8;
}

juwain · 18.Июнь.2015 08:59:50

Попробуйте 50%.

Попробуйте другой зелёный цвет из теории.

dron · 18.Июнь.2015 09:05:59

Спасибо, Виталий.

Насчет color:green - Понял.

Помогите понять width:48%;, не угадал?
Или там так и надо было?

juwain · 18.Июнь.2015 09:09:58

48% не совсем точно, 50% точно
Старайтесь ориентироваться в решениях на целые числа кратные 5. Большинство испытаний следует этому правилу.

dron · 18.Июнь.2015 09:24:35

Ок. Понял.

Antonina_Kicha · 20.Июль.2015 17:53:18

Не сходится только в левой колонке:

в HTML, который не могу редактировать использованы маленькие буквы в HTML, CSS, а в примере html и ccs написаны большими. Может поэтому не удается пройти задание?

мой код:

.left-column{
    float:left;
    background:#FCF8E3;
    padding:10px 5%;
    width:50%;

juwain · 21.Июль.2015 07:25:10

Привет!

Мы обновили текст, так как там были ошибки. У вас закешировалась старая версия. Сохраните, пожалуйста, ваш CSS-код куда-то вне браузера, чтобы не потерять его, и нажмите кнопку «Сбросить код». После нажатия на кнопку HTML обновится, и можно вернуть сохранённый CSS.

Извините за неудобства.

EG11 · 27.Июль.2015 20:35:18

Добрый день,
удалось пройти задание “Знакомство с CSS” на 99%

Не удалось только уменьшить расстояние по горизонтали в div-header между logo и contacts - подскажите, как это сделать, чтобы тест был пройден на 100%

juwain · 28.Июль.2015 08:44:00

Запостите код сюда, чтобы понятно было, в чём проблема )

Nastya_Chermnih · 10.Август.2015 09:04:07

здравствуйте. правая нижняя колонка почему-то внизу. не подскажите как исправить?

body{
width:260px;
margin:0;
padding:10px;
font-family:“Arial”;
font-size:12px;
}
h1{
font-size:16px;
}

.logo,
.contacts,
.left-column,
.right-column{
padding:10px 5%;
background:#FCF8E3;
}

.header{
height:40px;
margin-bottom:10px;
}
.logo{
float:left;
width:25%;
height:20px;
text-align:center;
font-size:16px;
}
.contacts{
float:right;
width:45%;
height:20px;
text-align:right;
color:#468847;
}
.left-column{
width:50%;
}

.right-column{
width:25%;
float:right;
}
.right-column,
.logo {
background:#DFF0D8;
}