Помогите пожалуйста. Зашёл в редактирование своего сообщения. Нажал эту кнопку. Сохранил. Но ничего не произошло.
Свой код вы вставляете между двумя знаками ’ '. Сейчас там написано “впишите текст сюда; также, отключить форматирование текста можно, начав строку с четырех пробелов”
всё, разобрался) Посмотритепожалуйста мой код. Может у вас есть какие-то советы и замечания ?
Замечаний будет много, не ждите здесь. Через часик заходите, все будет разобрано.
Хорошо, спасибо большое)
Начнем с первого вашего вопроса про внутренние отступы. Вы обернули текст внутри блоков в параграфы. У тега p есть свои отступы по умолчанию, как внутренние, так и внешние.
Большая часть проблем решается добавлением следующего правила:
p {
padding: 5px;
margin: 0;
}
Таким образом, все записи типа padding-top: 1px; и padding-left: 5px; можно убирать и код становится короче. Но надо исправить размеры у блоков, везде добавить эти 5px по ширине.
Далее ваш вопрос по поводу отступа у header. Это вы уже должны были знать, в теории было в курсе “Блочная модель документа”. Эффект называется “Выпадание” внешних отступов". Перечитайте, если подзабыли.
А теперь замечания. И первое, это использование распорок. Вы использовали распорку один раз, хотя для блока .features ее тоже нужно применить. Тогда clear:both; и некрасивый margin-top:130px; для footer не понадобится.
Почитайте еще эту тему. Обратите внимание на примененный для центровки содержимого .layout-positioner. С его помощью можно будет убрать записи padding-left:55px; и margin-left:50px;
Переделайте свой вариант с учетом всех замечаний. Потом хотелось бы снова взглянуть на него. Если будут сложности или другие вопросы, то задавайте.
Благодарю за помощь. Только сейчас дотянулся до компа) Решать и разбираться уже времени нет. Надо спать ложиться. Попробую завтра поковыряться в коде. Чуть что, за советами к вам же можно ?) Для критики)
Можно)
Всем привет!
Написал код, Обошелся только float.
Сделайте замечания по коду, конструктивную критику:grinning:.
HTML
CSS
p {
padding: 5px;
margin: 0;
}
header {
width: 350;
height: 160px;
border: 0px solid white;
padding-top: 10px;
margin-bottom: 10px;
background-color: #34495e;
}
.header1 {
width: 350px;
height: 35px;
margin: 0 auto;
background-color: #c0392b;
}
.menu {
width: 400px;
height: 35px;
margin: 10px 0 10px 0;
padding-left: 50px;
background-color: #3498DB;
}
.promo1 {
float: left;
width: 170px;
height: 60px;
margin-left: 50px;
background-color: #c0392b;
}
.promo2 {
float: right;
width: 170px;
height: 60px;
margin-right: 50px;
background-color: #c0392b;
}
.left {
float: left;
width: 70px;
height: 110px;
margin: 0 10px 0 50px;
background-color: #3498DB;
}
.main {
float: left;
width: 190px;
height: 110px;
margin-right: 10px;
background-color: #3498DB;
}
.right {
float: right;
width: 70px;
height: 110px;
margin-right: 50px;
background-color: #3498DB;
}
.block {
margin-bottom: 10px;
}
.footer {
clear: both;
width: 350;
height: 35px;
padding-left: 50px;
background-color: #34495e;
}
Первое. HTML-код оценить не могу. Не вижу(
Подправил. HTML не хочет вставляться)
В целом не очень хорошо.
Начнете заполнять свою сетку текстом и она рассыплется из-за фиксированной высоты у блоков и фиксированного отступа слева 50px.
Записи типа width: 350; не работают. Надо обязательно указывать единицу измерения. В данном случае px.
Вместо добавления каждому блоку в main класса block с указанием отступа снизу, вы могли прописать этот отступ сразу для main.
1 лайк
На счет 350 ошибся, там 400px. Да, для main, спасибо. Также фон для left, main, right записать в .block.
Если высоту у блоков указать min-height?
min-height можно писать. Что насчет .layout-positioner вместо margin-left: 50px;?
Спасибо за критику и наводку на layout. Подумаю и напишу сюда. Да, а min-height прописывать во всех блоках?
1 лайк
Для вложенных. Если неправа, то пусть кто-нибудь поправит.
Прописал для тех, которые зафлоачены.
Очень хорошо)
1 лайк
Сейчас пробую layout-positioner вписать. Правильно я понимаю, что этот класс нужен, чтобы снять ограничения в зафлоаченных блоках по ширине при необходимости (длинный текст, например)?
Нет, это для центрирования блоков, вместо вашего margin(padding)-left: 50px;