Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Problem I have had for ages please help!

Problem I have had for ages please help!

Views: 656

Results 1 to 2 of 2
7 Feb 2014, 11:25 AM
#1
dannyvarley avatar

dannyvarley

Zen Follower

Join Date:
Dec 2011
Posts:
287
Plugin Contributions:
0

Problem I have had for ages please help!

Okay so here it goes, I have a list of products all one one page, e.g http://kitchenwarehouseltd.com/complete-kitchen-units/high-gloss/cream

The problem I have is that I want the "add to cart" button to stay on the page at all times, My idea would be to have it stick to the bottom of the page once you get a certain way down and then it stays at the bottom of the page until you get to the end of the form. I hope this makes sense!

The only problem is I don't know how I would go about this at all!

Many thanks,
Dan

7 Feb 2014, 2:18 PM
#2
twitchtoo avatar

twitchtoo

Totally Zenned

Join Date:
Apr 2007
Location:
Ontario, Canada
Posts:
1,733
Plugin Contributions:
14

Re: Problem I have had for ages please help!

Your current CSS:

.button, input[type="submit"], input[type="reset"], input[type="button"], .readmore, button {
background:-moz-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-webkit-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-ms-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-0-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
border: 1px solid #4B5668;
background-color:#4B5668;
text-transform:uppercase;
}.button, input[type="submit"], input[type="reset"], input[type="button"], .readmore, button {
background:-moz-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-webkit-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-ms-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-0-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
border: 1px solid #4B5668;
background-color:#4B5668;
text-transform:uppercase;
}

Your new CSS:
.button, input[type="submit"], input[type="reset"], input[type="button"], .readmore, button {
background:-moz-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-webkit-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-ms-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
background:-0-linear-gradient(#4B5668, #7A889F) repeat scroll 0 0 #4B5668;
border: 1px solid #4B5668;
background-color:#4B5668;
text-transform:uppercase;
** position: fixed;
top: 2em;
z-index: 1;
**}

Look at the top left of your page, the add products to cart button should be floating.