Почему не отображаются элементы в header?
body { background-color: #ffffff; height: 100vh; position: relative; } header { display: flex; justify-content: space-between; align-items: center; height: 64px; margin: 0 auto; width: 100%; } .header_block1 { background-color: #3344ff; width: 45%; height: 64px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 50px; display: flex; justify-content: center; align-items: center; margin-left: 2%; } .header_block2 { background-color: #ffffff; width: 30%; height: 64px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 50px; display: flex; justify-content: center; align-items: center; margin-right: 6.7%; } .block1 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: url(/assets/images/background1.png); background-size: cover; background-repeat: no-repeat; } .background-image2 { position: relative; top: 100%; height: 100vh; width: 100%; background: url('/assets/images/background2.png') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; z-index: -2; } nav ul li a { color: #ffffff; text-decoration: none; font-family: Calibri; font-size: 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; width: 100%; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; font-family: Calibri } nav ul li { margin-right: 20px; } nav ul li a { text-decoration: none; } .header-text1 { color: #ffffff; text-decoration: none; } .header-text1:hover { color: #d1d1d1; cursor: pointer; text-decoration: none; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);; } .header-text2 { color: #3344ff; text-decoration: none; } .header-text2:hover { color: #242fa8; cursor: pointer; text-decoration: none; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);; } .main { display: flex; justify-content: center; align-items: center; margin-top: 50px; } .logo img { width: 440px; position: absolute; left: 12%; top: 26.5%; } .site-info { position: absolute; right: 4%; width: 40%; font-family: Calibri; top: 40%; color:white; } .site-info h1 { font-size: 52px; } .site-info p { font-size: 28px; line-height: 4%; } |
body { background-color: #ffffff; height: 100vh; position: relative; } header { display: flex; justify-content: space-between; align-items: center; height: 64px; margin: 0 auto; width: 100%; } .header_block1 { background-color: #3344ff; width: 45%; height: 64px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 50px; display: flex; justify-content: center; align-items: center; margin-left: 2%; } .header_block2 { background-color: #ffffff; width: 30%; height: 64px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 50px; display: flex; justify-content: center; align-items: center; margin-right: 6.7%; } .block1 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: url(/assets/images/background1.png); background-size: cover; background-repeat: no-repeat; } .background-image2 { position: relative; top: 100%; height: 100vh; width: 100%; background: url('/assets/images/background2.png') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; z-index: -2; } nav ul li a { color: #ffffff; text-decoration: none; font-family: Calibri; font-size: 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: space-around; width: 100%; } nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; font-family: Calibri } nav ul li { margin-right: 20px; } nav ul li a { text-decoration: none; } .header-text1 { color: #ffffff; text-decoration: none; } .header-text1:hover { color: #d1d1d1; cursor: pointer; text-decoration: none; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);; } .header-text2 { color: #3344ff; text-decoration: none; } .header-text2:hover { color: #242fa8; cursor: pointer; text-decoration: none; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);; } .main { display: flex; justify-content: center; align-items: center; margin-top: 50px; } .logo img { width: 440px; position: absolute; left: 12%; top: 26.5%; } .site-info { position: absolute; right: 4%; width: 40%; font-family: Calibri; top: 40%; color:white; } .site-info h1 { font-size: 52px; } .site-info p { font-size: 28px; line-height: 4%; }
<html> <head> <meta charset="UTF-8"> <title>EduChart - Рейтинг учителей</title> <link rel="stylesheet" type="text/css" href="css/styles.css"> <link rel=”icon” href=”/assets/icons/icon.ico” type=”image/x-icon”> </head> <body> <header> <div class="header_block1"> <nav> <ul> <li><a class="header-text1">Главная</a></li> <li><a class="header-text1">Рейтинг</a></li> <li><a class="header-text1">Отзывы</a></li> <li><a class="header-text1">Контакты</a></li> </ul> </nav> </div> <div class="header_block2"> <nav> <ul> <li><a class="header-text2">ФИО</a></li> <li><a class="header-text2">Статус</a></li> <li><a class="header-text2">Аватарка</a></li> </ul> </nav> </div> </header> <main> <div class="block1"> <div class="logo"> <img src="/assets/images/icons/icon.png" alt="EduChart"> </div> <div class="site-info"> <h1>EduChart</h1> <p>Рейтинг учителей Школы №3 республики Татарстан</p> </div> </div> </main> </body> </html> |
<html> <head> <meta charset="UTF-8"> <title>EduChart - Рейтинг учителей</title> <link rel="stylesheet" type="text/css" href="css/styles.css"> <link rel=”icon” href=”/assets/icons/icon.ico” type=”image/x-icon”> </head> <body> <header> <div class="header_block1"> <nav> <ul> <li><a class="header-text1">Главная</a></li> <li><a class="header-text1">Рейтинг</a></li> <li><a class="header-text1">Отзывы</a></li> <li><a class="header-text1">Контакты</a></li> </ul> </nav> </div> <div class="header_block2"> <nav> <ul> <li><a class="header-text2">ФИО</a></li> <li><a class="header-text2">Статус</a></li> <li><a class="header-text2">Аватарка</a></li> </ul> </nav> </div> </header> <main> <div class="block1"> <div class="logo"> <img src="/assets/images/icons/icon.png" alt="EduChart"> </div> <div class="site-info"> <h1>EduChart</h1> <p>Рейтинг учителей Школы №3 республики Татарстан</p> </div> </div> </main> </body> </html>
Дополнительно:
Нормально отображаться должны, судя по разметке и стилям. Наверное еще какие-то сторонние стили есть, или скрипты, которые ломают нужное отображение.
Элементы появляются при загрузке страницы, а затем пропадают.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы выяснить, почему элементы не отображаются в заголовке (header) вашего веб-сайта, следует рассмотреть несколько возможных причин:
1. **Проверьте CSS стили**: Возможно, в ваших CSS стилях есть ошибки, которые могут привести к неправильному отображению элементов в заголовке. Убедитесь, что стили правильно применяются к элементам в header и не перекрывают другие стили.
2. **Проверьте HTML разметку**: Проверьте HTML код вашего заголовка и убедитесь, что все элементы (например, logo, меню навигации) находятся внутри тега `
3. **Проверьте JavaScript ошибки**: Иногда JavaScript ошибки могут привести к некорректному отображению элементов. Проверьте консоль браузера на наличие ошибок и исправьте их, если они есть.
4. **Проверьте медиа-запросы**: Если ваш сайт адаптивный и использует медиа-запросы для различных устройств, убедитесь, что стили для заголовка правильно настроены для каждого разрешения экрана.
5. **Проверьте кэширование браузера**: Иногда элементы могут не отображаться из-за кэширования браузера. Попробуйте очистить кэш браузера или отключить кэширование временно, чтобы увидеть изменения.
Если после выполнения всех этих шагов проблема не решена, вам может потребоваться более детальное изучение кода вашего сайта. При этом может потребоваться помощь специалиста веб-разработки для выявления и устранения причины неправильного отображения элементов в заголовке.