Results 1 to 1 of 1

Thread: Issue with menu animation

  1. #1
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default Issue with menu animation

    http://www.rezzurrectiontaxidermy.com

    All I did was add an image to the page and now the menu is acting goofy. The blocks that highlight each menu item have some how moved to the other side of the items. The code in red is what I added.

    Code:
    <body >
    
    <div id="pagewrap">
    		
    	<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>
    		
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item1"><a href="#">Gallery</a></li>
    				<li class="item2"><a href="#">Field Care</a></li>
    				<li class="item3"><a href="#">Braggin' Rights</a></li>
    				<li class="item4"><a href="#">Contact</a></li>
    				
    			</ul>
    			
    		</div>
    	</div>
    		<div id="logo"><a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png"></a></div>
    		<div id="FaceBook"><a href="./index.html"><img src="./Rez_Pics/camo-facebook-icon.png" /></a></div>
    </div>
    
    			<div id="slideshowholder">
    			<div id="fadeshow1"></div>
    			<div id="slideshowtoggler">
    				<a href="#" class="prev">		
    					<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
    						<span class="status" style="margin:0 50px; font-weight:bold"></span> 
    				<a href="#" class="next">
    					<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
    			</div>
    			</div>
    
    
    
    </body>
    </html>
    and in the css I added...

    Code:
    body {	
    	color: #ffffff;	
    	font-family: "Arial", Arial, sans-serif;	
    	font-size: 12px;
    	background: #000;
    	overflow:hidden;
    	
    }
    
    #FaceBook{
    	position:absolute;
    	width: 100%;
    	height: 100%;
    	top: 750px;
    	margin-left: -35px;
    	left: 5%;
    }
    
    #bg {
    	background: transparent;
    	position:fixed; 
    	overflow:hidden;
    	top:0px; 
    	left:-5%; 
    	width:105%;
    }
    
    a {
    	text-decoration: none;
    	color: #0066ff;
    }
    
    a:focus {
    	outline:0;
    }
    
    
    
    a :hover{
    	text-decoration: none;
    }	 
    
    #filter{ 
    	width:100%; 
    	height:100%; 
    	z-index:0;
    	position:absolute;
    	left:0;
    	top:0; 
    	background: url(../Rez_Pics/filter.png) repeat left top transparent;
    }
    
    
    #logo{
    	position:absolute;
    	width:100%;
    	height:100%;
    	top: 20px;
    	left: 50%;
    	margin-left: -250px;
    }
    
    
    #container{	
    	position: relative;		
    	width:900px;
    	left:50%;
    	margin-left:-450px;	
    	top:120px;
    	z-index:1;
    }
    
    #white_line{
    	height:1px;
    	width:100%;
    	position:absolute;
    	z-index:98;
    	background: #fff;
    	left:0;
    	top:79px;
    }
    
    
    #menu{
    	margin-left:50px;
    	padding-top:90px;
    	margin-top: 60px;
    	background: url(../Rez_Pics/menu.png) no-repeat 0px top;
    	width:164px;
    	overflow:visible;
    	position:absolute;
    	z-index:99;
    }
    
    #menu span{
    	width:200px;
    	height:50px;
    	display:block;
    	margin-top:-90px;
    	cursor: pointer;
    }
    
    
    #menu ul{
    	list-style: none;
    	display: block;
    	margin: 0;
    	padding: 0;
    	text-transform: uppercase;
    	font-size:13px;
    	width:auto;
    	height:auto;	
    }
    
    #menu ul li{
    	margin-left:-200px;
    	background: url(../Rez_Pics/li.png) repeat 150px top;
    	width:200px;
    	padding-left:10px;
    }
    
    #menu ul li a{
    	color: #000;
    	font-size:17px;
    	font-style:italic;
    }
    
    
    #content {
    	width:100%;
    	position:fixed;
    	top:70%;
    	height: 10%;
    	background: url(../Rez_Pics/transparentbg.png) repeat 150px top;
    	overflow:hidden;
    }
    
    #content p{
    	padding:30px;
    }
    Not understanding why that would affect anything.
    Last edited by jscheuer1; 08-20-2013 at 03:11 AM. Reason: Format

Similar Threads

  1. DDLevelsMenu - layering issue - display behind Flash animation in FireFox
    By westernaspect in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-05-2010, 08:06 PM
  2. Accordion Menu: Bottom of Menu Shifting During Animation
    By bschnitkey in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-12-2008, 07:32 PM
  3. Animation issue...
    By pcbrainbuster in forum JavaScript
    Replies: 13
    Last Post: 04-05-2007, 12:13 AM
  4. Mouse animation issue
    By pcbrainbuster in forum JavaScript
    Replies: 8
    Last Post: 02-19-2007, 11:31 PM
  5. Replies: 4
    Last Post: 12-17-2005, 04:26 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •