html — Как правильно установить фон блока div?
Вопрос задан
Изменён 2 года 1 месяц назад
Просмотрен 60 раз
У меня есть html-код, который я обернул в один блок <div>. Я хотел сделать так, чтобы всё было серым, кроме самого блока container. Вот только его цвет выводится на экран очень странно, постоянно «отставая» от содержимого. Как это исправить? Вот сам код:
body {
margin: 0;
padding-top: 10px;
background-color: #F3F3F3;
}
.container {
width: 1000px;
height: 100%;
margin: 0 auto;
background-color: #fff;
padding: 20px 10px 20px 10px;
}
header {
height: 75px;
border-bottom: 2px solid #000;
}
h3 {
margin-top: 0;
}
a {
text-decoration: none;
color: #000;
}
.
child {
display: inline-block;
}
#links {
float: right;
margin-top: 3px;
}
#admin {
position: relative;
float: right;
margin-top: 25px;
margin-right: -190px;
}
main {
height: 300px;
padding-top: 3px;
}
aside {
float: left;
width: 100px;
font-size: 20px;
border-right: 2px solid black;
margin-right: 20px;
border-bottom: 2px solid black;
padding-left: 5px;
padding-top: 5px;
margin-top: -3px;
}
aside a {
display: block;
margin-bottom: 15px;
}
<div>
<header>
<div>
<h3>Ваше название</h3>
</div>
<div><a href="#">Администраторы</a> | <a href="#">Выход</a></div>
<div>
<p>Вы - <a href=#>Администратор</a></p>
</div>
</header>
<main>
<aside>
<a href="orders.php">Заказы</a>
<a href="#">Товары</a>
<a href="#">Отзывы</a>
<a href="#">Категории</a>
<a href="#">Клиенты</a>
<a href="#">Новости</a>
<a href="#">Сайт</a>
</aside>
</main>
</div>P.
S.: заранее спасибо за помощь! Я новичок во фронтенде,так что очень надеюсь, что мой вопрос не слишком глупый.
- css
2 момента с ошибками:
• Контент, как Вы выражаетесь «не успевает», потому что вы жестко указали высоту в 300px. Если нужно задавать минимальную — используйте min-width.
• Не используйте float, они устарели. Современный подход в построении сетки — FlexBox (flex и всё что с этим связано). В Вашем примере контент будет обтекать aside (как только aside кончается, контент смещается влево).
body {
margin: 0;
padding-top: 10px;
background-color: #F3F3F3;
}
.container {
width: 1000px;
height: 100%;
margin: 0 auto;
background-color: #fff;
padding: 20px 10px 20px 10px;
}
header {
height: 75px;
border-bottom: 2px solid #000;
}
h3 {
margin-top: 0;
}
a {
text-decoration: none;
color: #000;
}
. child {
display: inline-block;
}
#links {
float: right;
margin-top: 3px;
}
#admin {
position: relative;
float: right;
margin-top: 25px;
margin-right: -190px;
}
main {
/* Не ограничивайте принудительно высоту */
/* height: 300px; */
/* Если надо задать минимальную, используйте min-width */
min-width: 300px;
padding-top: 3px;
/* Используйте flex */
display: flex;
}
aside {
/* Не используйте float */
/* float: left; */
width: 100px;
font-size: 20px;
border-right: 2px solid black;
margin-right: 20px;
border-bottom: 2px solid black;
padding-left: 5px;
padding-top: 5px;
margin-top: -3px;
}
aside a {
display: block;
margin-bottom: 15px;
}
<div>
<header>
<div>
<h3>Ваше название</h3>
</div>
<div><a href="#">Администраторы</a> | <a href="#">Выход</a></div>
<div>
<p>Вы - <a href=#>Администратор</a></p>
</div>
</header>
<main>
<aside>
<a href="orders. php">Заказы</a>
<a href="#">Товары</a>
<a href="#">Отзывы</a>
<a href="#">Категории</a>
<a href="#">Клиенты</a>
<a href="#">Новости</a>
<a href="#">Сайт</a>
</aside>
<div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</div>
</main>
</div>
Зарегистрируйтесь или войдите
Регистрация через GoogleОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
[CSS] — Как заполнить div фоновым изображением с помощью CSS
👩💻 Технический вопрос
Спросил 3 месяца назад в CSS by Missy
фоновое изображение заполняет div
фоновое изображение CSS-свойства див высота
Дополнительные вопросы по кодированию о CSS👩💻 Технический вопрос
Спросил 1 день назад в CSS by D’Twa
как убрать подчеркивание в ссылке?
убрать подчеркивание связь CSS-класс текст-украшение
👩💻 Технический вопрос
Спросил 2 дня назад в CSS Сана
как добавить фон CSS (с линейным градиентом)?
УС фон линейный градиент
👩💻 Технический вопрос
Спросил 4 дня назад в CSS от Ogechukwu
Как изменить размер шрифта в css
размер шрифта КСС
👩💻 Технический вопрос
Спросил 4 дня назад в CSS Виктория
Как сделать шрифт h2 тонким в CSS
CSS вес шрифта тонкий h2
👩💻 Технический вопрос
Спросил 4 дня назад в CSS by Viktoriia
Как подчеркнуть h2 в CSS
CSS подчеркнуть h2 украшение текста HTML
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 4 дня назад в CSS от Омоладе
как скрыть html
HTML CSS отображать скрывать элемент
👩💻 Технический вопрос
Спросил 5 дней назад в CSS от Rebecca
как добавить градиентный фон в css
CSS фон градиент
👩💻 Технический вопрос
Спросил 5 дней назад в CSS Аиша
что такое z-индекс
z-индекс порядок укладки Свойство CSS значение позиции
👩💻 Технический вопрос
Спросил 6 дней назад в CSS от Claudia
box-shadow
CSS коробка-тень эффект тени элемент имущество
👩💻 Технический вопрос
Спросил 7 дней назад в CSS Мария
какой фон: прозрачный;
фон прозрачный Свойства CSS
👩💻 Технический вопрос
Спросил 8 дней назад в CSS Эми
как изменить цвет заголовка в CSS
CSS цвет рубрика
👩💻 Технический вопрос
Спросил 10 дней назад в CSS Аррон
как сделать h4 hover?
УС парить h4 элемент псевдокласс
👩💻 Технический вопрос
Спросил 10 дней назад в CSS от Tshiamo
фон с линейным градиентом в css означает
фон линейный градиент КСС
👩💻 Технический вопрос
Спросил 10 дней назад в CSS от Мэри
как изменить цвет кнопки
кнопка цвет CSS-код цвет фона
👩💻 Технический вопрос
Спросил 10 дней назад в CSS от Kiara
как центрировать элементы ul по горизонтали в css
center ул предметы горизонтально
👩💻 Технический вопрос
Спросил 10 дней назад в CSS по А
как удалить отступы на кнопке
кнопка набивка КСС
👩💻 Технический вопрос
Спросил 10 дней назад в CSS by Marta
как сдвинуть кнопку немного вправо
CSS позиционирование допуск слева
👩💻 Технический вопрос
Спросил 10 дней назад в CSS к кануну
что делает display: block?
дисплей блокировать в соответствии блочный уровень ширина высота набивка поля
👩💻 Технический вопрос
Спросил 11 дней назад в CSS by Eve
как увеличить межсимвольный интервал в css
межсимвольный интервал CSS межбуквенный интервал
👩💻 Технический вопрос
Спросил 11 дней назад в CSS по Arron
как навести ссылку?
УС связь парить псевдокласс
👩💻 Технический вопрос
Спросил 11 дней назад в CSS от Arron
как добавить тень к моей кнопке?
кнопка тень CSS коробка-тень
👩💻 Технический вопрос
Спросил 11 дней назад в CSS by Jana
Что означает курсор в CSS.
УС свойство курсора курсор мыши указатель по умолчанию помощь
👩💻 Технический вопрос
Спросил 11 дней назад в CSS Алисия
как стилизовать кнопку
стиль кнопка HTML CSS набивка граница курсор размер шрифта эффект наведения
👩💻 Технический вопрос
Спросил 11 дней назад в CSS by Thembekile
Как сделать переход при наведении кнопки?
кнопка переход при наведении КСС
👩💻 Технический вопрос
Спросил 11 дней назад в CSS Oswaldo
Как предотвратить подчеркивание ссылки после нажатия?
ссылка подчеркнуть CSS украшение текста посетил состояние
👩💻 Технический вопрос
Спросил 12 дней назад в CSS от Kiara
как настроить макет нескольких карт
пользовательский макет карты CSS флексбокс Сетка CSS
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Киара
как сделать перенос текста в css
CSS перенос текста перенос слова переполнение-обертка
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Ян
что делает переполнение в css
переполнение Свойство CSS вырезка содержимого полосы прокрутки
👩💻 Технический вопрос
Спросил 12 дней назад в CSS Вероника
как вставить изображение для фона в css
background-image фоновый повтор размер фона фоновая позиция
👩💻 Технический вопрос
Спросил 13 дней назад в CSS Сара
как убрать подчеркивание в кнопке
кнопка подчеркнуть CSS текст-украшение
👩💻 Технический вопрос
Спросил 13 дней назад в CSS Киара
как прокомментировать в css
комментарий
👩💻 Технический вопрос
Спросил 13 дней назад в CSS Киара
что такое сетка
сетка Веб-разработка адаптивные макеты CSS-фреймворки начальная загрузка
👩💻 Технический вопрос
Спросил 13 дней назад в CSS by Laurencia Wiah
как добавить тень к кнопке
кнопка коробка-тень КСС
👩💻 Технический вопрос
Спросил 13 дней назад в CSS автор Keitumetse Nirvana Akisa
Я борюсь со своим кодом.
Моя кнопка не работает, когда я нажимаю на нее, и я хочу выровнять свое изображение по центру код устранения неполадок кнопка прослушиватель событий выравнивание изображения Выравнивание по центру CSS
👩💻 Технический вопрос
Спросил 14 дней назад в CSS by Kiara
как убрать подчеркивание из ссылки
удалить подчеркивание связь украшение текста КСС
👩💻 Технический вопрос
Спросил 14 дней назад в CSS Киара
как убрать строку из ссылки
CSS связь украшение текста подчеркнуть удалить
👩💻 Технический вопрос
Спросил 14 дней назад в CSS Киара
как поставить теневую границу вокруг контейнера
CSS теневая граница контейнер
👩💻 Технический вопрос
Спросил 14 дней назад в CSS Кристрис
как создать наведение?
наведение CSS псевдокласс
👩💻 Технический вопрос
Спросил 14 дней назад в CSS Анастасия
как изменить размер шрифта с помощью @media
CSS размер шрифта @медиа
👩💻 Технический вопрос
Спросил 15 дней назад в CSS Ризвана
как подчеркнуть заголовок с помощью css
подчеркнуть заголовок текст-украшение
👩💻 Технический вопрос
Спросил 15 дней назад в CSS by Arianne
как сделать толщину шрифта тонкой
толщину шрифта тонкий Свойство CSS ценить пример кода
👩💻 Технический вопрос
Спросил 16 дней назад в CSS Кристрис
как сделать углы круглыми?
радиус границы Свойство CSS углы округлость CSS-трюки
👩💻 Технический вопрос
Спросил 16 дней назад в CSS Элизабет
Можете ли вы помочь мне понять высоту строки
высота строки Свойство CSS
👩💻 Технический вопрос
Спросил 16 дней назад в CSS Оливия
что такое заполнение
заполнение Веб-разработка CSS единицы измерения пикселей Эмс проценты
👩💻 Технический вопрос
Спросил 16 дней назад в CSS от christrice
как сделать шрифт h2 тонким?
h2 шрифт тонкий CSS вес шрифта
👩💻 Технический вопрос
Спросил 17 дней назад в CSS Жасмин
Могу ли я настроить атрибуты CSS для элемента
?
УС элемент часов css-атрибуты Селекторы CSS цвет высота ширина
👩💻 Технический вопрос
Спросил 17 дней назад в CSS Мишель
Как сделать так, чтобы курсор менялся на курсор щелчка при наведении курсора на кнопку
CSS курсор кнопка наведите
👩💻 Технический вопрос
Спросил 17 дней назад в CSS по christrice
как сделать мои слова большими?
УС размер шрифта
👩💻 Технический вопрос
Спросил 17 дней назад в CSS Ариэль
Что такое высота строки?
высота строки CSS текст космос имущество
👩💻 Технический вопрос
Спросил 17 дней назад в CSS Юлия
Как сделать
полужирным
CSS смелый вес шрифта р элемент сорт ID
Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС Питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.
js Рубин Идти .NET
Присоединяйтесь к беседе
Модераторы и ведущие участники
Горячие темы на этой неделе
|
Я явно устанавливаю все поля и отступы равными 0. Я ожидаю, что цвет фона диапазона заполнит всю высоту div, и это то, что происходит в IE7. Но в FF2 я получаю область в 1 пиксель выше и ниже диапазона, в котором виден цвет фона div. В результате я получаю заметное разделение между div и содержимым под этим div, вместо того, чтобы div упирался в содержимое, как хотелось бы. Я пробовал всевозможные варианты настройки выравнивания текста, добавления отступов, полей, границ, плавающих и не плавающих и так далее. Все напрасно — независимо от того, какие изменения я делаю, разница в том, как эти браузеры отображают это, все равно составляет 1 пиксель. Это просто одна из тех вещей, которые нужно взломать? И если да, то действительно ли IE7 ведет себя в этом случае правильно?
