#html #css
#HTML #css
Вопрос:
Мне поручено создать предупреждение в отчетах «Бета: пустые простыни» и «Бета: список залов с пустыми кроватями». Я должен поместить предупреждение в верхней части страницы. Я хочу, чтобы он был центрирован и не занимал всю ширину страницы.
Ввод встроенных стилей работает, но я не уверен, читает ли он файл CSS. Учитывая, что это для работы, я не могу перемещать сам файл, и я на 99% уверен, что он находится в хорошем расположении файла, поскольку он уже есть у моих коллег / босса.
HTML-код:
{% extends 'reports_templates/base.html' %}
{% load static from staticfiles %}
{% block extra-head %}
<link rel="stylesheet" type="text/css" href="{% static 'datatables/media/css/jquery.dataTables.min.css' %}">
<link rel='stylesheet' type='text/css' href="{% static 'css/empty_bedspaces.css' %}">
{% endblock %}
{% block title %}
<title>Empty Bed Spaces</title>
{% endblock %}
{% block content %}
<div class="alert alert-danger" id="alert">
<strong>Note:</strong> Some of the rooms below may not be available for assignment.
</div>
Код CSS:
.container div {
margin: 1%;
}
#specific-table tr th {
border-bottom: 1px solid #111;
}
th.title {
text-align: center !important;
}
.alert-danger {
font-size: 72px;
}
Если я сделаю:
<div class="alert alert-danger" style="margin: 45%" >
<strong>Note:</strong> Some of the rooms below may not be available for assignment.
</div>
Это заставляет его занимать достаточное количество места на странице. Кроме того, имейте в виду, что это далеко не весь код. Я не хотел вставлять огромный файл.
Вот изображение того, как это выглядит до сих пор, только с предупреждением div.
Комментарии:
1. Попробуйте очистить кеш, а затем перезагрузите страницу и посмотрите, вступит ли это в силу
2. Щелкните правой кнопкой мыши «проверить страницу» в вашем браузере и посмотрите в разделе «сеть», загружен ли файл css.
3. @nologin похоже, что это там
4. @GrumpyCrouton idk как именно это сделать
5. @HelanaBrock Поиск в Google «[вставить браузер здесь] очистить кэш»
Ответ №1:
Попробуйте очистить кеш в большинстве браузеров: CTRL SHIFT R. Во время разработки я бы также рекомендовал отключить локальное кэширование на вашей панели разработки. В Chrome это будет F12> Вкладка Сеть> Флажок Отключить кэш. Возможно, вам также потребуется перезапустить браузер, чтобы принудительно внести изменения.
Ответ №2:
Если вы используете Bootstrap, вы могли бы предоставить его class="col-md-8 col-md-push-2 text-center".