Ошибка панели навигации HTML и CSS

ProgramBox

Ошибка панели навигации HTML и CSS

Post author:admin
Запись опубликована:28 сентября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я делаю школьный проект, в котором мне нужно создать панель навигации в HTML и CSS. У меня есть следующий код, но он не такой отзывчивый, как хотелось бы.

Когда я уменьшаю экран, текст становится ближе друг к другу. Как мне добавить фиксированный пробел между p классами или использовать другой способ решения этой проблемы?

HTML:

 <!DOCTYPE html>
<html>
<head>
    <title>Header</title> <!-- This is the page title -->
    <link href="style.css" rel="stylesheet" type="text/css"> <!-- This adds the stylesheet so that "style.css" can edit this page -->
    <meta content="Hugh Chalmers" name="author"> 
</head>
<body>
    <div class="header"> <!-- This will be the Navigation Bar part of the page. Currently, it is invisible, but the CSS will change that. -->
        <p class="text" id="home">Home</p>
        <p class="text" id="about">About Us</p>
        <p class="text" id="contact">Contact Us</p>
        <p class="text" id="products">Products</p>
        <p class="text" id="forums">Forums</p>
    </div> 
</body>
</html>

CSS:

 .header {
    position: absolute;
    width: 100%;
    height: 10%;
    left: 0;
    top: 0;
    background-color: red;
}

.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    position: absolute;
}

#home {
    position: absolute;
    left: 5%;
}

#about {
    position: absolute;
    left: 15%;
}

#contact {
    position: absolute;
    left: 27%;
}

#products {
    position: absolute;
    left: 40%;
}

#forums {
    position: absolute;
    left: 53%;
}

1. Это ужасно много absolute позиционирования — станет настоящим испытанием для поддержания по мере роста вашей страницы. Я бы определенно посоветовал подумать о том, чтобы сделать что-то менее ручное, где страница может естественным образом отображать ваш контент в соответствии с некоторыми более мягкими правилами.

2. у вас очень грязные стили css

Ответ №1:

Если предполагается, что ваша панель навигации представляет список опций (что, на самом деле, и делает панель навигации), то семантически гораздо разумнее использовать, ну, список. Поскольку порядок на самом деле не имеет значения, мы бы использовали неупорядоченный список, <ul> :

 <div class="header">
    <ul>
        <li class="text" id="home">Home</li>
        <li class="text" id="about">About Us</li>
        <li class="text" id="contact">Contact Us</li>
        <li class="text" id="products">Products</li>
        <li class="text" id="forums">Forums</li>
    </ul>
</div>

Затем, чтобы отобразить их горизонтально, достаточно просто либо переместить их, либо изменить режим отображения. Я предпочитаю последнее:

 .header ul li
{
    display: inline-block;
}

Пример со слегка измененной версией вашего CSS: https://jsfiddle.net/L0pb47ms /

Ответ №2:

Вы не должны использовать position:absolute для этого, вы можете использовать display:inline-block для p элементов.

 .header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-color: red;
}

.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    text-align:center;
    padding: 5px;
}

Вам не нужно стилизовать каждого человека p .

JSFiddle

Ответ №3:

Замените ваши стили html и css на эти :

 ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: red;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    font-size: 30px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li.right {float: right;}

@media screen and (max-width: 400px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="topnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Ответ №4:

Замените ваши стили CSS на эти

CSS:

 .header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-color: red;
}
.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.header p {
    display: inline-block;
    padding: 0 5px;
}

@media (max-width: 480px) {
  .text {
    font-size: 1em;
    font-weight: 350;
  }
 .header p {
    display: inline-block;
    padding: 4px 0;
  }
}

1. Мне это нравится, однако по мере уменьшения размера экрана элементы списка исчезают. Как мне это исправить?

2. вам нужно узнать о медиа-запросе Я также отредактировал свой ответ с помощью медиа-запроса, чтобы решить вашу проблему @HughChalmers

3. Это хороший ресурс для конкретного определения того, какой размер вам нужно указать для каждого устройства. Тем не менее, я почти всегда обходился одним размером; это действительно зависит от того, как структурированы ваши html и css и какое расположение, единицы измерения и т. Д. вы используете.

Метки: Ошибка панели навигации HTML и CSS