Nav menu plugin blocking slider and messing with other containers

jaydrones

New Member
Hello all. I just started messing with html, css, and js last week and I've run into a problem here with my nav menu plugin. It's blocking my slider which is right below it (the slider is 900x300 and I see a small sliver in the top about 900x30... still rotates but the rest of the space is just white). It is also messing with a few other containers, my social media links are cut in half, and the margins and padding on most of my text is screwed up.

I dont think the actual plugin is the problem because I've used 3-4 and had the same problem.. what could it be? The only troubleshooting I've tried is "clear:both;" on the nav menu div and the slider div.. neither did anything.

Any help would be appreciated!
 

jaydrones

New Member
Is there a way I can put my CSS and HTML in one post? It's saying it exceeds the maximum when I put both. Either way heres html, will put css in another reply

HTML

Code:
<!DOCTYPE HTML>
<html>

<head>
	
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/slider.js" type="text/javascript"></script>
    <script>
$(document).ready(function() {
   				$('#s3slider').s3Slider({
      				timeOut: 4000
   				});
			});
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
    </script>
    
    <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
    <link href="css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="css/slider.css" rel="stylesheet">
    
    <script src="js/navmenu.js" type="text/javascript"></script>
    
    <script>	$(document).ready(function(){
	// executed after the page has finished loading
	 
	    $('#navigationMenu li .normalMenu').each(function(){    // for each menu item
	 
	        // create a duplicate hyperlink and position it above the current one
	        $(this).before($(this).clone().removeClass().addClass('hoverMenu'));
	 
	    });
	 
	    $('#navigationMenu li').hover(function(){   // using the hover method..
	 
	        // we assign an action on mouse over
	        $(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
	        // the animate method provides countless possibilities
	 
	    },
 
	    function(){
	        // and an action on mouse out
	        $(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);
	 
	    });
	 
	}); </script>
    
    
    
    <link href="css/navmenu.css" rel="stylesheet">
    
    <meta http-equiv="content-Type" content="text/html; charset=utf-8 />
    <meta http-equiv="content-Type" content="cache" />
    <meta name="robots" content="INDEX,FOLLOW" />
    <meta name="keywords" content="Enter Keywords" />
    <meta name="description" content="Description Here" />
    <title>Guns For Less - Lowest Prices on Firearms, Guaranteed.</title>
 
    <! -- Google Analytics Code goes below here -->
    
    
    <! -- end google analytics code -->



</head>

<body onLoad="MM_preloadImages('images/gfl1.png','images/gfl2.png')">

<div id="outer">

	<div id="wrapper">

    <div id="logo">
 
    	
      <img src="images/logo2.png" width="350" height="100" alt="GFL Logo"></div>
    
    <div id="social-media-icons">
    <ul>
    	<li><a href="http://www.facebook.com"></a><img src="images/facebookcrack48.png" width="48" height="48" alt="facebook icon"></li>
        <li><a href="http://www.twitter.com"></a><img src="images/twittercrack48.png" width="48" height="48" alt="twitter icon"></li>
        <li><a href="http://www.facebook.com"></a><img src="images/rsscrack48.png" width="48" height="48" alt="RSS"></li>
        <li><a href="http://www.youtube.com"></a><img src="images/youtubecrack48.png" width="48" height="48" alt="Youtube Icon"></li>
      </ul>
    </div>
    
	<div id="menu-container">
	<ul id="navigationMenu">
	<li><a href="#" class="normalMenu">Home</a></li>
	<li><a href="#" class="normalMenu">Services</a></li>
	<li><a href="#" class="normalMenu">Our clients</a></li>
	<li><a href="#" class="normalMenu">The team</a></li>
	<li><a href="#" class="normalMenu">About us</a></li>
	<li><a href="#" class="normalMenu">Contact us</a></li>
	</ul>
	</div>
    
    </div>
    
        <div id="s3slider">
           <ul id="s3sliderContent">
              <li class="s3sliderImage">
                  
   
   
   <img src="images/banner8.png" width="900" height="300">
   <span>Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we are in a need for oral language; speaking and listening skills are acquired naturally by young children remarkably without the need for having to teach them. Language in its written form has become a process that is required in our oral language rules and must be clearly taught. There are many languages in our world that exist, but do not have a written form.</span>
              </li>
              <li class="s3sliderImage">
                  
   
   
   <img src="images/banner7.png" width="900" height="300">
   <span>Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we are in a need for oral language; speaking and listening skills are acquired naturally by young children remarkably without the need for having to teach them. Language in its written form has become a process that is required in our oral language rules and must be clearly taught. There are many languages in our world that exist, but do not have a written form.</span>
              </li>
              
                            <li class="s3sliderImage">
                  
    
  
  
  <img src="images/banner9.png" width="900" height="300">
  <span>Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we are in a need for oral language; speaking and listening skills are acquired naturally by young children remarkably without the need for having to teach them. Language in its written form has become a process that is required in our oral language rules and must be clearly taught. There are many languages in our world that exist, but do not have a written form.</span>
              </li>
                            <li class="s3sliderImage">
                  
   
   
   
   <img src="images/banner10.png" width="900" height="300">
   <span>Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we are in a need for oral language; speaking and listening skills are acquired naturally by young children remarkably without the need for having to teach them. Language in its written form has become a process that is required in our oral language rules and must be clearly taught. There are many languages in our world that exist, but do not have a written form.</span>
              </li>
              
                            <li class="s3sliderImage">
                 
  
  
  <img src="images/banner6.png" width="900" height="300">
  <span> </span>
              </li>
              <div class="clear s3sliderImage"></div>
           </ul>
        </div> 
    
    <div id="content">
      <h1> Welcome to Guns for less - Lowest Prices on Firearms, Guaranteed.</h1>
      <p> Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we are in a need for oral language; speaking and listening skills are acquired naturally by young children remarkably without the need for having to teach them. Language in its written form has become a process that is required in our oral language rules and must be clearly taught. There are many languages in our world that exist, but do not have a written form. </p>

      	<img src="images/gfl1bw.png" width="280" height="180" class="image-frame" id="Image1" onMouseOver="MM_swapImage('Image1','','images/gfl1.png',1)" onMouseOut="MM_swapImgRestore()">
    	<img src="images/gfl2bw.png" width="280" height="180" class="image-frame" id="Image2" onMouseOver="MM_swapImage('Image2','','images/gfl2.png',1)" onMouseOut="MM_swapImgRestore()">
        
      <p> Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we are in a need for oral language; speaking and listening skills are acquired naturally by young children remarkably without the need for having to teach them. Language in its written form has become a process that is required in our oral language rules and must be clearly taught. There are many languages in our world that exist, but do not have a written form. </p>
    </div>
     
    
   
    <div id="rightside">
      <h2>Lastest News</h2>
      <p class="date">March 22, 2012</p>
      <h3>Sample Headline</h3>
      <p> Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we </p>
      <p class="date">March 21, 2012</p>
      <h3>Another  Headline</h3>
      <p> Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we </p>
      <p class="date">March 20, 2012</p>
      <h3>Cool Headline</h3>
      <p> Written Language refers to communication in its written form - most commonly in the forms of reading and writing. However we </p>
    </div>
    
    <div id="footer">
    
   	  <p class="footer-text">Copyright 2012 - Guns For Less </p>
        
    </div>

</div>

</div>

</body>
</html>
 

jaydrones

New Member
CSS

Code:
 /* RESET */




html, body {margin: 0; padding: 0; border: 0; background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
img 	{ margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
table { border-collapse: collapse; border-spacing: 0; }

input, select, textarea, form, fieldset {
	margin: 0; padding: 0: border: 0;
	}
	
article, aside, dialog, figure, footer, header, hgroup, nav, section {
	display:block; }
	
h1, h2, h3, h4, h5, h6, p, li, blockqyote, td, th, a, caption, em, strong, strike {
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%;
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}

ol, ul {list-style: none; }





/* GLOBAL */





html	{	}
body	{ background-color:#000;	}





/* HEADINGS */





h2, h3, h4, h5, h6 { font-weight: bold; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }

h1 {font-size:24px; color:#880003; font-weight:bolder; font-size: 17px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; padding-bottom:15px; border-bottom:3px #ccc solid; margin-bottom:15px; }
h2 {font-size:20px; }
h3 {font-size:16px; margin-bottom:5px; }
h4 {font-size:14px; }
h5 {font-size:14px; }
h6 {font-size:14px; }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }




/* TEXT ELEMENTS */



	
P 				{ color: #000; font-size:13px; line-height:150%; 
					margin:15px 0; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }

a				{	}
a:link			{ color: #00f; }
a:visisted		{ color: #0f0; }
a:active		{ color: #000; }
a:focus			{ color: #666; }
a:hover			{ color: #f00; }

blockquote		{ color: #000; font-size:12px; }

strong 			{ font-weight: bold; }
em				{ font-style: italic; }





/* IMAGES */

.image-frame	{ padding:10px; border:1px #ccc solid; margin:10px; }




/* LISTS */





ul				{	}
ol				{list-style: font-size:12px; }

ul li			{ color:#000; font-size:12px; }
ol li			{ color:#000; font-size:12px; }

dl				{	}
dt				{	}
dd				{	}




/* TABLES */




table			{ width:100%; }

tr				{	}
.odd			{ background-color:#eee; }
.even			{ background-color:#fff; }

th				{ font-weight: bold; }
thead, th		{ background: #ccc; }

tbody			{	}

th,td,caption	{	}
caption			{	}

tfoot			{	}
.tfooter		{ background-color:#ccc; text-align:center; font-style:italic; }

caption			{ background: #efefef; }




/* MISCELLANEOUS */




sup, sub		{ line-height: 0; }

abbr, acronym	{ border-bottom: 1px dotten #666; }
address			{	}
del				{ background:#EFCECE; color:#f00; }

code, pre		{ background-color:#EF9; padding:2px 0px; margin:4px 25px;
					font-family:"Courier New", Courier, monospace; font-size:12px; font-weight: }
					


/* CONTAINERS */



#outer				{ width:960px; margin:0 auto; background-color:#FFF; }

#wrapper			{ width:900px; margin:0 auto; background-color:#FFF; }

#logo				{ margin:30px 0; float:left;	}

#social-media-icons 		{ float:right;	}
#social-media-icons ul li	{ display:inline; }
#social-media-icons ul		{ margin-top:40px; }

#topnav				{ clear:both; }
#topnav ui 			{ border-top:3px #000 solid; border-bottom:3px #000 solid;	
						margin:20px 0; padding:10px 0; }
						
#topnav ul li		{ display:inline; }
#topnav ul li a 	{ padding:0 15px; }



#topnav	a:link			{ color:#700; font-weight:bold; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#topnav	a:visited		{ color:#700; font-weight:bold; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#topnav	a:active		{ color:#000; font-weight:bold; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#topnav	a:focus			{ color:#666; font-weight:bold; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#topnav	a:hover			{ color:#666; font-weight:bold; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }

#s3slider 				{ margin-bottom:30px; }


#content			{ width:650px; float:left;	}
#content-fullwidth 	{ width:100%; }
#content-m-b		{ margin:30px 0;}

#rightside			{ width:200px; float:right;	}

#footer				{ clear:both; margin-top:20px; padding-bottom:20px;
						 border-top:3px #ccc solid; 
						 }


#box1	{ width:260px; float:left; margin:20px; border-top:13px #6C0000 solid;
			background-color:#eee;  }

#box2	{ width:260px; float:left; margin:20px; border-top:13px #999 solid;
			background-color:#eee;  }

#box3	{ width:260px; float:left; margin:20px; border-top:13px #000053 solid; 
			background-color:#eee; }
			
#box1 h3, p, a	{ padding:4px}
#box2 h3, p, a	{ padding:4px}
#box3 h3, p, a	{ padding:4px}

#box1 h3, #box2 h3, #box3 h3 { text-align:center; padding:15px; border-bottom:2px solid #999; }

#box4	{	}

#box5	{	}

#box6	{	}

/* LAYOUT EXTRA */




/* NAVIGATION EXTRA */




/* FORMS */



form { text-align:left; margin:20px; }

label, submit, input, textarea {
	border:0; padding:0; margin:0; background:none;
	}
	
label {
	float: left; width: 150px;
	text-align:right; display:block;
	}
	
input, textarea {
	border:1px #333 solid; margin-left:10px; 
	}
	
input {
	width: 280px; margin-left:16px;
	}
	
textarea {
	width: 280px; height: 150px; 
	margrin-bottom: 16px; 
	}
	
select	{	}
.submit	{
	width:90px; height:25px;
	margin-left:150px;
	font-size:12px;
	}
	
br { clear: left; }

/* MISCELLANEOUS */

.popup-link 	{ font-size:15; margin:4px; display:block; }

.date			{ font-weight:bold; color:#620000; margin-bottom:3px; }

.copyright-text	{ font-size: 80%; font-style:italic; color:#333	}
.footer-text	{ font-size: 13px; font-style:normal; color:#000; text-align:center;	}

.title			{ font-size: 18px; font-weight:bold; color:#333	}
.subtitle		{ font-size: 14px; font-style:italic; color:#333 }

.artist			{ font-size: 16px; font-weight:bold; color:#333	}
.author			{ font-size: 14px; font-weight:bold; color:#555	}
.editor			{ font-size: 14px; font-style:italic; color:#555 }

.pub-date		{ font-size: 10px; font-style:italic; color:#555 }
.article-date	{ font-size: 10px; font-style:italic; color:#555 }
.location		{ font-size: 10px; font-style:italic; color:#555 }

.float-right	{ float:right; }
.float-left		{ float:left; }
.clear			{ clear:both; }

.hide			{ display:none; }
.block			{ display:block; }
.inline			{ display:inline; }

.first			{ font-weight:bold; }
.last			{ font-weight:bold; }
.left 			{ font-weight:bold; text-align:left; }
.right			{ font-weight:bold; text-align:right; }

.added			{background:#D8D8FF; }
.removed		{background:#EFCECE; color:#f00; }
.changed		{background:#FFB; }



/* SUCCESS, INFO, NOTICE AND ERROR/ALERT BOXES - FROM BLUEPRINT CSS FRAMEWORK */



.error, .alert, .notice, .success, .info {
	padding: 0.8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error, .alert	{ background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }

.notice			{ background: #fff6bf; color: #514721; border-color: #ffd324; }

.success		{ background: #e6efc2; color: #264409; border-color: #c6d880; }

.info			{ background: #d5edf8; color: #205791; border-color: #92cae4; }

.error a		{ color:#8a1f11; }
.alart a		{ color:#8a1f11; }

.notice a		{ color:#514721; }
.success a		{ color:#264409; }
.info a			{ color:#205791; }

/* JAVASCRIPT */

#s3slider {
   width: 900px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
	width: 900px; /* important to be same as image width or wider */
	position: absolute; /* important */
	top: 311px; /* important */
	margin-left: 0; /* important */
	left: 7px;
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}
 
Top