Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Editing CSS Template

    Hi all

    I have been working on a template for a site for a friend of mine, i have decided that the current template is a bit useless and have found another one which looks a lot better, however I want to incorporate some features from the old one into the new one.

    I have managed to do the majority of the work, but there is one last thing that i cannot get working for some reason.

    The problem i'm having is making an image scroll vertically (repeat-y).

    This is the css for the section i'm struggling with:

    Code:
    #site-nav ul
    		{
    			list-style: none;
    			overflow: hidden;
    		}
    		.activeH {
    			position: absolute;
    			top: -52px;
    			left: 14px;
    			z-index: 1;
    		}
    		.base {
    			background: url(../images/activeBg.png) center no-repeat;
    			width: 128px ;
    			height: 157px;
    			z-index: 1;
    		}
    
    		.midground {
    			background: url(../images/stars.png) repeat-y;
    			position: absolute;
    			top: 0;
    			left: 33px;
    			width: 68px;
    			height: 147px;
    		}
    
    		.foreground {
    			background: url(../images/starsBack.png) repeat-y;
    			position: absolute;
    			top: 0;
    			left: 34px;
    			width: 68px;
    			height: 147px;
    		}
    All that happens with this is that the images are static. The 2 stars images are supposed to scroll vertically, it works on the original site but i cannot get it to work on the new template.

  • #2
    New to the CF scene
    Join Date
    Feb 2013
    Location
    NY
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    If you want the star divs to move vertically up and down as the user moves the scroll bar simply set the position of the star divs to fixed instead of absolute. Setting a div to a fixed position causes the div to position itself relative to the browser window.

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, i wasn't very clear. The image scrolls in place not with the browser. The stars are used over the top of the links and are used to signify the selected link.

    This is the site template he was using:

    http://premiumcoding.com/starBlaze/

    See how the stars scroll over the link? It works perfectly in that template but then when i copy across the css and html for the stars into the new site the images are just static and i can't work out why.

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Location
    NY
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Without seeing your new site it's tough to tell... You said you copied the CSS & HTML to new site, I presume you also copied the javascript for the star menu too...?


  •  

    Posting Permissions

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