Search code examples
jqueryhtmlcsstagswidth

Code error: body not closing and menu going over 100% width

I have 2 problems with a website I'm working on. The /body tag appears to have an error in Web Expression 4 and I can't seem to find why. Plus the menu's width goes over the rest of the page which is not supposed to scroll horizontally. All divs look like they're closed so as it's making me crazy I hope you'll be able to help me! Here is the html:

<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>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a>   
          <input type="text"class="datepicker"></p>
          <p></p>
          <p>Departure:&nbsp&nbsp <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 activities around, </p>
<p>experience the very best of South Africa and relax in our 
cosy  rooms</p>   </span></center></p>
</div>                      
<div class=map>
/* There's a IFRAME tag here with Google map styled width 100% border:0 and frameborder:0 but I can't add the four spaces before it so I deleted it from here */

   <div class="parallax"></div>
   </body>

And here is the 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: /body problem looks to be fixed now but I still have the problem with menu width: This is the problem I'm trying to fix

Solution

  • Try this corrected html as you missing two closing divs:

    Updated bellow style for menu issue:

    .textcontainer {
    width:94%;
    padding:3%;
    overflow:hidden;
}

    Updated fiddle jsfiddle.net/bharatsing/9k093ufy/1/

    <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>   
<input type="text"class="datepicker"></p>
<p></p>
<p>Departure:&nbsp;&nbsp; <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>
   </div>   
   </div>
   </body>