#javascript #html #css
Вопрос:
Вопрос может показаться немного сложным, но, к сожалению, это довольно простой вопрос, на который я не могу найти ответа. Ситуация выглядит так: я составил меню и исправил его. Это меню представляет собой неупорядоченный список с элементами списка в нем. Я поместил меню справа, установив » справа: 0;» в css. Теперь я хотел бы сделать меню настоящей панелью, потому что на данный момент это не более чем простой прямоугольник, который покрывает только угол экрана. То, что я хочу, чтобы он был полосой сверху, которая идет слева направо. Не поймите меня неправильно, элементы списка все равно должны быть в правом углу, но так как у него есть фон, я хочу, чтобы этот фон был виден как широкая полоса, чтобы он больше походил на строку меню. Возможно, есть настройка » отступ слева:», которая может это реализовать, так как мне нужно, чтобы отступ был таким же широким, как ширина экрана, чтобы он охватывал все слева направо.
Мой код (отредактированный до части меню) выглядит примерно так:
.html:
...
<body>
<section id="menu">
<ul>
<li>
<a href="#contactdetails">
Contact details
</a>
</li>
<li>
<a href="#rental">
Rental
</a>
</li>
<li>
<a href="#informations">
Informations
</a>
</li>
<li>
<a href="#home">
Home
</a>
</li>
</ul>
</section>
.css:
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: #222222;
position: fixed;
overflow: hidden;
right: 0;
}
#menu li {
float: right;
margin: 0;
}
#menu li a {
display: inline-block;
text-align: center;
color: #EAECEE;
font-size: 1.8em;
padding: 14px 14px;
text-decoration: none;
}
@media screen and (max-width: 1024px) {
#menu li a {
font-size: 0.9em;
padding: 12px 6px;
}
}
#menu li a:hover {
background-color: #111111;
}
Also, there is a second problem that maybe could be solved with a menu bar: On ‘home’, I put an image that somehow is prioritized to the menu bar which means it covers the menu bar partly which also isnt very nice. I havent done anything in particular to it other than a slider as there are multiple images you are able to slide. I would like to avoid putting the code here as that would mean I had to edit the whole source code into English but if its needed to solve this second problem just tell me and I will edit it into here. I am just hoping that there is a obvious complication I dont know about that somebody can tell me.
As Im pretty new to html I would also be glad if you would point out any other mistakes I made.
Thanks for reading this!
Xydru
EDIT:
Here is the code of the image:
.html:
<section id="home">
<h1>Name of the Website</h1>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 7</div>
<img src="img/home_1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 7</div>
<img src="img/home_2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 7</div>
<img src="img/home_3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 7</div>
<img src="img/home_4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 7</div>
<img src="img/home_5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 7</div>
<img src="img/home_6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7 / 7</div>
<img src="img/home_7.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">amp;#10094;</a>
<a class="next" onclick="plusSlides(1)">amp;#10095;</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
<span class="dot" onclick="currentSlide(7)"></span>
</div>
</section>
... (at the end of 'body')
<script src="slider.js"></script>
.css:
/* Slider */
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next amp; previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "prev button" to the left*/
.prev {
left: 5px;
}
/* Position the "next button" to the right */
.next {
right: 5px;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Number text (1/4 etc) */
.numbertext {
color: #424242;
font-size: 18px;
font-weight: bold;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
margin-bottom: 20px;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
slider.js:
// Normal Slide
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex = n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i ) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i ) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className = " active";
}
Комментарии:
1. вы пробовали ширину: 100%?
2. Спасибо, это сработало! К сожалению, все еще существует вторая проблема, которая позволяет моему изображению закрывать строку меню 🙁
3. можете ли вы добавить код ur с изображением здесь?
4. Я добавил его сейчас, надеюсь, этого будет достаточно
5. Добавьте z-индекс к обоим, более высокий номер для раздела навигации ur
Ответ №1:
Поскольку цель является владельцем списка, то position свойство должно сначала стилизовать, #menu а не список, поэтому мы перемещаем properties его из списка ul в список #menu .
Теперь фиксированные элементы позиционирования по умолчанию принимают ширину содержимого, поэтому мы добавляем другие свойства, такие как ( top , right и left ) со значениями 0 и width: 100%; , чтобы «растянуть» его в стороны.
#menu {
background-color: #222222;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
overflow: hidden;
}
#menu ul {
list-style-type: none;
}
Код:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#menu {
background-color: #222222;
position: fixed;
top: 0;
right: 0;
left: 0;
width: 100%;
overflow: hidden;
}
#menu ul {
list-style-type: none;
}
#menu li {
float: right;
}
#menu li a {
display: inline-block;
text-align: center;
color: #EAECEE;
font-size: 1.8em;
padding: 14px 14px;
text-decoration: none;
}
@media screen and (max-width: 1024px) {
#menu li a {
font-size: 0.9em;
padding: 12px 6px;
}
}
#menu li a:hover {
background-color: #111111;
} <section id="menu">
<ul>
<li>
<a href="#contactdetails">
Contact details
</a>
</li>
<li>
<a href="#rental">
Rental
</a>
</li>
<li>
<a href="#informations">
Informations
</a>
</li>
<li>
<a href="#home">
Home
</a>
</li>
</ul>
</section>