Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-13-2013, 11:07 PM   PM User | #1
lemnbi2001
New to the CF scene

 
Join Date: Feb 2013
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
lemnbi2001 is an unknown quantity at this point
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.
lemnbi2001 is offline   Reply With Quote
Old 02-14-2013, 03:55 AM   PM User | #2
payling
New to the CF scene

 
Join Date: Feb 2013
Location: NY
Posts: 5
Thanks: 0
Thanked 1 Time in 1 Post
payling is an unknown quantity at this point
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.
payling is offline   Reply With Quote
Old 02-14-2013, 09:47 AM   PM User | #3
lemnbi2001
New to the CF scene

 
Join Date: Feb 2013
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
lemnbi2001 is an unknown quantity at this point
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.
lemnbi2001 is offline   Reply With Quote
Old 02-20-2013, 03:11 AM   PM User | #4
payling
New to the CF scene

 
Join Date: Feb 2013
Location: NY
Posts: 5
Thanks: 0
Thanked 1 Time in 1 Post
payling is an unknown quantity at this point
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...?
payling is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:38 AM.


Advertisement
Log in to turn off these ads.