#html #css
#HTML #css
Вопрос:
У меня есть раздел меню внутри другого раздела, и я хочу переместить его немного вверх, чтобы он был на одном уровне с остальной частью его раздела, но он не будет перемещаться. Я пробовал padding-bottom и margin-bottom. Я не уверен, что не так.
Я очень новичок в HTML и CSS, поэтому, пожалуйста, поделитесь со мной, если я не вижу чего-то очень очевидного…
Вот код. При предварительном просмотре вы заметите, что меню немного ниже, чем должно быть.
Надеюсь, кто-нибудь сможет помочь.
Большое спасибо.
html,
body {
background-image: url(img/roshi2.jpg);
background-size: cover;
font-family: "Bitstream Charter";
font-size: small;
}
#title {
font-size: 4em;
color: white;
padding: 100px 0px 0px 100px;
}
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
}
.section {
padding: 30px 30px 0px 60px;
color: rgba(0, 0, 0, 0.57);
}
.section h1 {
font-size: 4em;
border-bottom: dashed 1px black;
}
.section p {
font-size: 2em;
width: 1500px;
}
#menu {
text-align: right;
padding: 12px 150px 200px 0px;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
}
a {
text-decoration: none;
}
a:link {
color: rgba(0, 0, 0, 0.57);
}
a:visited {
color: rgba(255, 0, 0, 0.5);
}
a:hover {
color: rgba(255, 0, 0, 0.5);
} <body>
<header>
<div id="title">Shunryu Suzuki Roshi</div>
</header>
<div class="content">
<div class="section">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt
ut
</p>
</div>
<div id="menu">
<a href="about.html">About</a><br>
<a href="Contact.html">Contact</a><br>
<a href="Donate.html">Donate</a><br>
</div>
</div>
<div class="content">
<div class="section">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. adipisicing elit, sed do eiusmod tempor incididunt ut adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt
ut
</p>
</div>
</div>
</body> Комментарии:
1. Покажите скриншот результата, который вы хотите, пожалуйста
Ответ №1:
Заставьте .content использовать режим компоновки flexbox, затем удалите width из вашего p элемента
.content {
display: flex;
}
.section p {
font-size: 2em;
/*width: 1500px;*/
}
Ответ №2:
Всегда лучше поместить меню div в другой div, который контролирует его положение
Вот так:
<div id = "menu-area">
<div id="menu">
<a href="about.html">About</a><br>
<a href="Contact.html">Contact</a><br>
<a href="Donate.html">Donate</a><br>
</div>
</div>
И тогда вы сможете легче контролировать положение div:
#menu-area{
float:right;
margin-right:20px;
border:1px solid black;
}
#menu
{
text-align: right;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
}
Я не уверен, что вы пытаетесь здесь сделать.
Проблема в том, что вы не используете display
Здесь уже есть несколько ответов о том, как вы можете использовать свойство display
flex вероятно, это лучшее значение для вашего случая
Комментарии:
1. спасибо за совет о переносе раздела меню в другой div. Я буду помнить это впредь. Я думаю, мне придется прочитать о том, что на самом деле делает display, и я попытаюсь это реализовать. Спасибо.
Ответ №3:
Вы хотите, чтобы ваше меню было приведено в соответствие с вашим первым разделом? Я бы просто добавил flexbox. Смотрите ниже:
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
display:flex;
}
Или если вы просто хотите переместить свое меню вверх. Вы можете использовать отрицательное поле для своего меню. Смотрите ниже:
html, body {
background-image: url(img/roshi2.jpg);
background-size: cover;
font-family: "Bitstream Charter";
font-size: small;
}
#title
{ font-size: 4em;
color: white;
padding: 100px 0px 0px 100px;
}
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
}
.section {
padding: 30px 30px 0px 60px;
color: rgba(0, 0, 0, 0.57);
}
.section h1 {
font-size: 4em;
border-bottom: dashed 1px black;
}
.section p {
font-size: 2em;
width: 1500px;
}
#menu
{
text-align: right;
padding: 12px 150px 200px 0px;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
margin-top:-40px
}
a{
text-decoration: none;
}
a:link {
color: rgba(0, 0, 0, 0.57);
}
a:visited {
color: rgba(255, 0, 0, 0.5);
}
a:hover {
color: rgba(255, 0, 0, 0.5);
} <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Shunryu Suzuki Roshi</title>
</head><link rel="stylesheet" type="text/css" href="index.css">
<body>
<header>
<div id="title">Shunryu Suzuki Roshi</div>
</header>
<div class="content">
<div class="section">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
<div id="menu">
<a href="about.html">About</a><br>
<a href="Contact.html">Contact</a><br>
<a href="Donate.html">Donate</a><br>
</div>
</div>
<div class="content">
<div class="section">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>
</body>
</html> Ответ №4:
HTML-блоки автоматически выравниваются по вертикали, поэтому вам нужно стилизовать html-блоки так, чтобы они выравнивались по горизонтали, я использовал css-атрибут flex , вы можете узнать об этом на этом веб-сайте :https://css-tricks.com/snippets/css/a-guide-to-flexbox проверьте это, это очень полезно, сравните мой код с вашим, чтобы понять больше
html, body {
background-image: url(img/roshi2.jpg);
background-size: cover;
font-family: "Bitstream Charter";
font-size: small;
}
#title
{ font-size: 4em;
color: white;
padding: 100px 0px 0px 100px;
}
.content {
background-color: rgba(255, 255, 255, 0.67);
width: 100%;
height: 500px;
margin-top: 150px;
}
.section {
padding: 30px 30px 0px 60px;
color: rgba(0, 0, 0, 0.57);
}
.section-content {
display: flex;
}
.section h1 {
font-size: 4em;
border-bottom: dashed 1px black;
}
.section p {
font-size: 2em;
width: 1500px;
}
#menu
{
text-align: right;
padding: 12px 150px 200px 0px;
line-height: 2em;
font-size: 2em;
color: rgba(0, 0, 0, 0.57);
}
a{
text-decoration: none;
}
a:link {
color: rgba(0, 0, 0, 0.57);
}
a:visited {
color: rgba(255, 0, 0, 0.5);
}
a:hover {
color: rgba(255, 0, 0, 0.5);
} <header>
<div id="title">Shunryu Suzuki Roshi</div>
</header>
<div class="content">
<div class="section">
<h1>Section 1</h1>
<div class="section-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
<div id="menu">
<a href="about.html">About</a><br>
<a href="Contact.html">Contact</a><br>
<a href="Donate.html">Donate</a><br>
</div>
</div>
</div>
</div>
<div class="content">
<div class="section">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
adipisicing elit, sed do eiusmod tempor incididunt ut
adipisicing elit, sed do eiusmod tempor incididunt adipisicing elit, sed do eiusmod tempor incididunt ut
</p>
</div>
</div>