Wed, 2012-10-03 05:50
am almost new to css and html, i usually search google for the code i needed and do some modification to work for me.
currently i want to implement a button in my blogger blog and here is how it works in example Original button example see original working button here
here is my test blog where i have implemented it but not working fine.
whose css code is as follow.
.button a { display: block; height: 50px; width: 200px; /*TYPE*/ color: white; font: 17px/50px Helvetica, Verdana, sans-serif; text-decoration: none; text-align: center; text-transform: uppercase; /*GRADIENT*/ background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button a, p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*TYPE*/ text-align: center; font: 12px/45px Helvetica, Verdana, sans-serif; color: #fff; /*POSITION*/ position: absolute; z-index: -1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease; } /*HOVER*/ .button:hover .bottom { margin: -10px 0 0 10px; } .button:hover .top { margin: -80px 0 0 10px; line-height: 35px; } /*ACTIVE*/ .button a:active { background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button:active .bottom { margin: -20px 0 0 10px; } .button:active .top { margin: -70px 0 0 10px; }
and here is html to use this css code.
<div class="button"> <a href="#">Download</a> <p class="top">click to begin</p> <p class="bottom">1.2MB .zip</p> </div>
Now problem is that it does not work exactly as it should, i think that is because of p tag, it might have already defined in my template, so how can i use this p tag styling specific to this class only? i hope you have got my point. Looking forward.
Wed, 2012-10-03 06:52
#1
Hi askfriends, Yes you are
Hi askfriends,
Yes you are having some conflicts.
Not really sure if it is the problem but well worth a try.
Try prefixing the everywhere you have 'p' with '.button' like:
.button a, .button p { line 1048
and
.button p { line 1056
Wed, 2012-10-03 09:16
#2
thank u so much for the
thank u so much for the reply;
actually i have already tried it but it didn't work at all...!
Wed, 2012-10-03 10:04
#3
Ok I have tracked it
Ok I have tracked it down.
The #wrapper div in the Outer Cover section on line 212 is causing the main problem.
You will have some other issues to sort out, like the BR after the download link.
Thu, 2012-10-04 03:40
#4
i'm still unable to make it
i'm still unable to make it work... 
Thu, 2012-10-04 04:12
#5
Did you try commenting out
Did you try commenting out the #wrapper declaration?
Also you should look at: Debugging CSS problems
Thu, 2012-10-04 06:01
#6
yes i also tried it.... i am
yes i also tried it....
i am not expert but i think its p tag which create problem, bcoz it's not specific in the code, so can u re-write this code with specific class name and p tag?
can't anybuddy help me..?
Thu, 2012-10-04 07:49
#7
Ok looks like you have taken
Ok looks like you have taken away the code at the moment.
Your site is quite complex.
If you comment out the #wrapper page and do what was suggested in comment #1 the button should work for you.
Here's your page http://tinyurl.com/cj5nonr
Thu, 2012-10-04 12:04
#8
i did exactly as u said, but
i did exactly as u said, but it vanished my layout, see screenshot above