Click here to Skip to main content
15,895,667 members
Search within:


Is My Menu Hiding Behind The Images? HTML CSS JQuery
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hey!
So I finished my project which was a full on webslider as my homepage & now I want to make things more "Fancy" by adding a nice menu to it all!

The thing is.. nothing is showing up.. Is it possibly hiding behind the images?
I know I could comment out the code and just check but I want to know how I should structure my code to make it work as good as possible. I admit that it is a little bit messy but work with me here I am kinda new to JQuery.

I wouldnt mind any pointers & tips on how to improve my code.
For example how to place my css menu so its on top of the images instead of behind.
Thanks!


HTML
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  <style type="text/css">
  html,body,img {padding: 0; margin: 0;height:100%;width:100%}
  body {font-family: Sans-Serif;}

  .container{

  	height:100%;
  	width:100%;
  	overflow: hidden;

  }

  .cycle-slideshow {
  	  height: 100%;
      width: 100%;
      display: block;
      position: relative;
      margin: 0 auto;

  }
  .cycle-prev, .cycle-next {
      font-size: 200;
      color: #FFF;
      display: block;
      position: absolute;
      top: 50%;
      margin-top: -16px;
      z-index: 9999;
      cursor: pointer;

  }

  .cycle-prev {left: 10%;}
  .cycle-next{right: 10%;}


  .cycle-pager{
      width: 100%;
      text-align: center;
      display: block;
      position: absolute;
      position: top;
      bottom: 20px;
      z-index: 9999;
  }

  .cycle-pager span {
      text-indent: 100%;
      white-space: nowrap;;
      width: 12px;
      height: 12px;
      display: inline-block;
      border: 1px solid #FFF;
      border-radius: 50%;
      margin: 0 10px;
      cursor: pointer;

  }
  .cycle-pager .cycle-pager-active {background: #FFF;}


/*Menu CSS*/


ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul li {
	float: left;
	width: 150px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color:  #ff0000;

}

ul li a{
	text-decoration: none;
	color: #fff;
}

/*Menu CSS*/

  </style>
</head>
<body>



<div class="container">

<!-- Full Width Responsive Slider -->

<!--   <div class="cycle-slideshow">
    <span class="cycle-prev">&#9001;</span>
    <span class="cycle-next">&#9002;</span>
    <span class="cycle-pager"></span>
    <img src="images/picOne.jpg">
    <img src="images/picTwo.jpg">
    <img src="images/picThree.jpg">
  </div> -->

<!-- Full Width Responsive Slider -->

<ul>
	<li><a href="Home"><a/></li>
	<ul>
		 	<li><a href="Link1"><a/></li>
		 	<li><a href="Link2"><a/></li>
		 	<li><a href="Link3"><a/></li>
		 	<li><a href="Link4"><a/></li>
		 	<li><a href="Link5"><a/></li>
	</ul>
	</li>
 	<li><a href="About"><a/></li>
 		<ul>
		 	<li><a href="Link1"><a/></li>
		 	<li><a href="Link2"><a/></li>
		 	<li><a href="Link3"><a/></li>
		 	<li><a href="Link4"><a/></li>
		 	<li><a href="Link5"><a/></li>
	</ul>
 	<li><a href="Services"><a/></li>
 		<ul>
		 	<li><a href="Link1"><a/></li>
		 	<li><a href="Link2"><a/></li>
		 	<li><a href="Link3"><a/></li>
		 	<li><a href="Link4"><a/></li>
		 	<li><a href="Link5"><a/></li>
	</ul>
 	<li><a href="Contact Me"><a/></li>
 		<ul>
		 	<li><a href="Link1"><a/></li>
		 	<li><a href="Link2"><a/></li>
		 	<li><a href="Link3"><a/></li>
		 	<li><a href="Link4"><a/></li>
		 	<li><a href="Link5"><a/></li>
	</ul>
 	<li><a href=""><a/></li>
</ul>

</body>

</html>
Posted
Updated 17-Dec-15 23:30pm
v5
Add a Solution

2 solutions

Have you tried adding
CSS
z-index
to the css menu?
 
Share this answer
 
Posted
Why nothing is showing up?

Nice menu you say; but you forgot to give texts for the anchors in the menu! All of it is empty and that is why you see nothing on the screen.

Just give some values for the menu items and check it. for example I have given some sample values in your code as below.


HTML
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
  <style type="text/css">
  html,body,img {padding: 0; margin: 0;height:100%;width:100%}
  body {font-family: Sans-Serif;}
 
  .container{
 
  	height:100%;
  	width:100%;
  	overflow: hidden;
 
  }
 
  .cycle-slideshow {
  	  height: 100%;
      width: 100%;
      display: block;
      position: relative;
      margin: 0 auto;
 
  }
  .cycle-prev, .cycle-next {
      font-size: 200;
      color: #FFF;
      display: block;
      position: absolute;
      top: 50%;
      margin-top: -16px;
      z-index: 9999;
      cursor: pointer;
 
  }
 
  .cycle-prev {left: 10%;}
  .cycle-next{right: 10%;}
 

  .cycle-pager{
      width: 100%;
      text-align: center;
      display: block;
      position: absolute;
      position: top;
      bottom: 20px;
      z-index: 9999;
  }
 
  .cycle-pager span {
      text-indent: 100%;
      white-space: nowrap;;
      width: 12px;
      height: 12px;
      display: inline-block;
      border: 1px solid #FFF;
      border-radius: 50%;
      margin: 0 10px;
      cursor: pointer;
 
  }
  .cycle-pager .cycle-pager-active {background: #FFF;}
 

/*Menu CSS*/
 

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
 
ul li {
	float: left;
	width: 150px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color:  #ff0000;
 
}
 
ul li a{
	text-decoration: none;
	color: #fff;
}
 
/*Menu CSS*/
 
  </style>
</head>
<body>
 

 
<div class="container">
 
<!-- Full Width Responsive Slider -->
 
<!--   <div class="cycle-slideshow">
    <span class="cycle-prev">〈</span>
    <span class="cycle-next">〉</span>
    <span class="cycle-pager"></span>
    <img src="images/picOne.jpg">
    <img src="images/picTwo.jpg">
    <img src="images/picThree.jpg">
  </div> -->
 
<!-- Full Width Responsive Slider -->
 
<ul>
	<li><a href="Home">Home<a/></li>
	<ul>
		 	<li><a href="Link1">Link1<a/></li>
		 	<li><a href="Link2">Link2<a/></li>
		 	<li><a href="Link3">Link3<a/></li>
		 	<li><a href="Link4">Link4<a/></li>
		 	<li><a href="Link5">Link5<a/></li>
	</ul>
	</li>
 	<li><a href="About">About<a/></li>
 		<ul>
		 	<li><a href="Link1">Link1<a/></li>
		 	<li><a href="Link2">Link2<a/></li>
		 	<li><a href="Link3">Link3<a/></li>
		 	<li><a href="Link4">Link4<a/></li>
		 	<li><a href="Link5">Link5<a/></li>
	</ul>
 	<li><a href="Services">Services<a/></li>
 		<ul>
		 	<li><a href="Link1">Link1<a/></li>
		 	<li><a href="Link2">Link2<a/></li>
		 	<li><a href="Link3">Link3<a/></li>
		 	<li><a href="Link4">Link4<a/></li>
		 	<li><a href="Link5">Link5<a/></li>
	</ul>
 	<li><a href="Contact Me">Contact Me<a/></li>
 		<ul>
		 	<li><a href="Link1">Link1<a/></li>
		 	<li><a href="Link2">Link2<a/></li>
		 	<li><a href="Link3">Link3<a/></li>
		 	<li><a href="Link4">Link4<a/></li>
		 	<li><a href="Link5">Link5<a/></li>
	</ul>
 	<li><a href=""><a/></li>
</ul>
 
</body>
 
</html>


Now your menu items will appear on your screen. Once you give the appropriate styles for the menu list, you will have the fancy menu you require!
 
Share this answer
 
Posted
Comments
BladeLogan 18-Dec-15 4:08am    
Thank you sir! Would you by any chance know why its hiding under the pictures of my
<!-- Full Width Responsive Slider -->
when its not commented out? How would I bring it up ontop of it? Would I have to use JQuery?
Ebenezar John Paul 18-Dec-15 4:59am    
The plugin you use has the functionality of full page image transitions.

See here,

.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}


It's height and width are occupying the whole page and the menu is actually pushed under it. If you want to check, just make the height as 50% and run the page.

To have images as backgrounds, there a many methods. Here's a sample of the latest and efficient way:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

If you want to use the same plugin but as background, just make some changes based on the sample and make it as background cover. Now you can build your controls on top of them. Cheers!
BladeLogan 18-Dec-15 5:15am    
I understand! & this is going to be embarrassing.. Thats not a plugin I made that, sure it took around 7 hours including research and alot of misstakes but I managed to do it!
Ebenezar John Paul 18-Dec-15 5:25am    
Well, you should consider that as a compliment ;) A plugin requires a lot of work no matter what size it is. Good work on that!
BladeLogan 18-Dec-15 5:30am    
Thank you so much sir!

Im sorry if im asking alot of questions and taking up your time but I have this script in my code which should allow me to use JQuery but for some reason it doesnt want to let me


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

What could be the issue? I've tried refeering my code to the file in my folder but it doesnt want to work o:
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
dropdown hide behind jquery silder
The webpage(HTML, CSS, jquery based) is not able to communicate with flask server
CSS menu goes behind in firefox
How to make form feild dropdown hide/show using jquery and javascript in HTML
jQuery: Slide show hiding sub menu
need a code to write drop down menu in css and html
My HTML is not updating with my CSS
vertical sub menu css help plz?
problem in asp.net menu : megamenu hide behind slideshow (javascript)
Adding a button to my website HTML & CSS

Advertise
Privacy
Cookies
Terms of Use
Last Updated 18 Dec 2015
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web03 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900