1
У меня есть 2 проблемы с сайтом, над которым я работаю. Тег/body, похоже, имеет ошибку в Web Expression 4, и я не могу найти почему. Кроме того, ширина меню распространяется на оставшуюся часть страницы, которая не должна прокручиваться по горизонтали. Все divs выглядят так, как будто они закрыты, так что это делает меня сумасшедшим. Надеюсь, вы сможете мне помочь! Вот HTML:Ошибка кода: тело не закрывается, а меню переходит на 100% ширину
<body>
<div class="parallax">
<div id="menu">
<ul>
<script>
$('#menu li')
.mouseover(function() {
$(this).addClass('animated flash');})
.mouseout(function() {
$(this).removeClass('animated flash');
});
</script>
<li><a class="active" href="#home">Home</a></li>
<li><a id="newsmenu" href="#news">Rooms</a></li>
<li><a href="#news">Mariepskop</a></li>
<li><a href="#news">Hoedspruit</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<script>
$(function() {
$(".datepicker").datepicker();
});
</script>
<div class="date">
<p>Arrival:<a>      </a>
<input type="text"class="datepicker"></p>
<p></p>
<p>Departure:   <input type="text" class="datepicker"></p>
<p><button class="button1">CHECK AVAILABILITY</button></p>
<script> $('.button1')
.mouseover(function() {
$(this).addClass('animated pulse');})
.mouseout(function(){
$(this).removeClass('animated pulse');});
</script>
</div>
</div>
<div class="parallax2">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/10</div>
<img src="images/gallery/intro1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2/10</div>
<img src="images/gallery/intro2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3/10</div>
<img src="images/gallery/intro3.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">4/10</div>
<img src="images/gallery/intro4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">5/10</div>
<img src="images/gallery/intro5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">6/10</div>
<img src="images/gallery/intro6.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">7/10</div>
<img src="images/gallery/intro7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">8/10</div>
<img src="images/gallery/intro8.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">9/10</div>
<img src="images/gallery/intro9.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">10/10</div>
<img src="images/gallery/intro10.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br></br>
<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>
<span class="dot" onclick="currentSlide(8)"></span>
<span class="dot" onclick="currentSlide(9)"></span>
<span class="dot" onclick="currentSlide(10)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
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";
}
</script>
<div class="textcontainer">
<p>
<center>
<span class="hot">WELCOME TO MARIEPSKOP VIEW CHALETS</span>
</center> </p>`
<p><center><span class="basictext">Located between the famous
<span class="basiceffect">Blyde River Canyon</span> and the
<span class="basiceffect">Kruger National Park(Orpen Gate)</span>,
<p>our lodge offers the best situation in the region.
Halfway from all the activites around, </p>
<p>experience the very best of South Africa and relax in our
cosy rooms</p> </span></center></p>
</div>
<div class=map>
/* Theres a IFRAME tag here with google map styled width 100% border:0 and frameborder:0 but I cant add the four saces before it so I deleted it from here */
<div class="parallax"></div>
</body>
А вот CSS:
body, html {
max-width:100%;
height:100%;
margin:0%;
padding:0%;
}
.parallax {
/* The image used */
background-image: url('../images/background.jpg');
/* Full height */
height: 100%;
width:100%;
overflow:hidden;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
height:2000px;
background-color:#9f7f68;
z-index:2;
}
#menu {
max-width:100%;
text-align:center;
position:fixed;
left:0%;
margin:0%;
width:100%;
height:15%;
z-index:999;
overflow:hidden;
}
#menu ul {
max-width:100%;
list-style-type: none;
margin: 0;
padding: 0%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
}
#menu li {
display:inline-block;
}
#menu li a {
padding: 14px 16px;
display: block;
margin:2%;
text-decoration: none;
color:white;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#menu li a:hover {
background-color: #9f7f68;
color:#000;
}
.active {
font-size:25px;
color:#000;
background-color:#593620;
}
/* -------------------SLIDESHOW NOW--------------------------- */
/* Slideshow container */
.slideshow-container {
width:100%;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.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}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
/* ---------------------FORM-----------------------*/
.date {
color:white;
position: relative;
top: 20%;
left: 80%;
background-color: rgba(0, 0, 0, 0.5);
width:10%;
height:35%;
padding:2%;
}
.date:hover {
background-color: rgba(0, 0, 0, 0.9);
}
}
.button1 {
background-color: white;
color: black;
border: 2px solid #ccb8a0;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
padding: 3PX;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
}
.button1:hover {
background-color: #ccb8a0;
color: white;
}
/* ------------------------------------TEXT--------------------------------- */
.textcontainer {
width:100%;
padding:3%;
overflow:hidden;
}
.hot {
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:25px;
color:black;
text-align: center;
font-weight: bold;
}
.basictext {
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:20px;
color:black;
text-align: center;
}
.basiceffect
{
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:20px;
color:white;
text-align: center;
}
.map {
width:100%;
}
EDIT: проблема /тело выглядит быть исправлена, но я до сих пор проблема с шириной меню: This is the problem i'm trying to fix
Это выглядит, как она исправила/ошибка тега тела, даже если вы закрыли DIV «карта» в конце после второго " parallax "div, которого я не хотел, но я изменил его. Большое спасибо ! Просто нужно исправить ширину меню сейчас –
Можете ли вы сделать jsfiddle. поэтому я могу проверить это и исправить его –
Или дать любой живой URL, где я могу проверить его и предложить вам решение –