#python #html #css #django
#python #HTML #css #django
Вопрос:
В настоящее время я пишу свой первый веб-сайт, и у меня возникла проблема, которую я не знаю, как решить. У меня есть домашняя страница с панелью навигации, и когда я помещаю текст на страницу, он выглядит вырезанным, потому что текст начинается за панелью навигации. Как я могу сделать так, чтобы текст отображался под панелью навигации?
Вот код.
body {
background-attachment: fixed;
background-color: rosybrown;
} {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<title>DNA TRANSLATOR</title>
<meta charset= "UTF-8"/>
<meta name= "viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href= '{% static
"css/style.css" %}'>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style='background-color: snow;'>
<div class = 'container'>
<a class="navbar-brand" href="#">DNA Translator</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Translator</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" >Process</a>
</li>
</ul>
</div>
</div>
</nav>
<div class = "container">
{% block content%}
{% endblock content%}
</div>
</body>
</html> Комментарии:
1. В основном вам нужно добавить в ваш основной контейнер padding-top, равный высоте навигации.
Ответ №1:
Вероятно, это дублирующий вопрос. Но я все равно отвечаю на него.
В основном, когда вы устанавливаете nav как position: fixed; , вы должны добавить padding-top или margin-top в свой основной контейнер или тело, чтобы начать с самого низа панели навигации.
Итак, в основном я добавил padding-top в body (рекомендуемая практика):
body{
padding-top: 56px;
}
ИЛИ margin-top или padding-top , чтобы .main.container
.main.container{
margin-top: 56px;
}
body {
background-attachment: fixed;
background-color: rosybrown;
padding-top: 56px;
} {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<title>DNA TRANSLATOR</title>
<meta charset= "UTF-8"/>
<meta name= "viewport"
content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href= '{% static
"css/style.css" %}'>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style='background-color: snow;'>
<div class = 'container'>
<a class="navbar-brand" href="#">DNA Translator</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Translator</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" >Process</a>
</li>
</ul>
</div>
</div>
</nav>
<div class = "main container">
{% block content%}
{% endblock content%}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus id nulla eu imperdiet. Fusce imperdiet tellus eu sem hendrerit, eu consequat leo rhoncus. Nullam vehicula nunc id leo consequat, et bibendum magna fringilla. Proin rhoncus aliquam odio, sed euismod lectus efficitur ut. Nam faucibus nisi ullamcorper, luctus quam id, rutrum nisi. Sed ac interdum ante, ultrices aliquam eros. Nulla arcu urna, lacinia eu accumsan sed, consectetur et dui. Vivamus mi nisl, dapibus vel justo vitae, dignissim ornare nisl. Maecenas condimentum ex id erat consequat porttitor. Duis auctor sed nisl at blandit. Phasellus maximus purus vel efficitur consequat. Donec tempus justo in metus pellentesque dignissim. Nulla facilisi. Aenean vulputate dictum turpis id mattis. Integer turpis metus, fermentum eget blandit elementum, ultrices hendrerit arcu.
</div>
</body>
</html> Ответ №2:
Текст находится за панелью навигации, потому что вы присвоили ему фиксированную позицию с помощью класса «fixed-top». Если вы не хотите иметь фиксированную панель навигации, я думаю, вы можете просто удалить это classname.
Если вы хотите иметь фиксированную панель навигации, вы можете переместить свой контейнер вниз с помощью css, используйте для этого «margin-top» с высотой вашей панели навигации, и ваш контент будет виден прямо под панелью навигации.