[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Need help making a survey more visually appealing and helpful...

Posted on 2011-09-08
6
Medium Priority
?
196 Views
Last Modified: 2012-05-12
My group wants a survey with the questions posed just like this:

 One of the questions
I'd like to provide some sort of gradient background or some sort of style that would visually show how as you move from left to right your feelings turn more positive (for lack of a better way of saying it). Any suggestions?

The code right now is very simple:
 
<li>How would you rate your proposal manager's <b>responsiveness</b> on this proposal? 
                <div> 
                    <input type="radio" name="q1" value="-5" <cfif q1 EQ "-5">checked</cfif>/>-5&nbsp;
                    <input type="radio" name="q1" value="-4" <cfif q1 EQ "-4">checked</cfif>/>-4&nbsp; 
                    <input type="radio" name="q1" value="-3" <cfif q1 EQ "-3">checked</cfif>/>-3&nbsp;
                    <input type="radio" name="q1" value="-2" <cfif q1 EQ "-2">checked</cfif>/>-2&nbsp;
                    <input type="radio" name="q1" value="-1" <cfif q1 EQ "-1">checked</cfif>/>-1&nbsp;
                    <input type="radio" name="q1" value="0" <cfif q1 EQ "0">checked</cfif>/>0&nbsp;                   
                    <input type="radio" name="q1" value="+1" <cfif q1 EQ "+1">checked</cfif>/>+1&nbsp;
                    <input type="radio" name="q1" value="+2" <cfif q1 EQ "+2">checked</cfif>/>+2&nbsp;
                    <input type="radio" name="q1" value="+3" <cfif q1 EQ "+3">checked</cfif>/>+3&nbsp;
                    <input type="radio" name="q1" value="+4" <cfif q1 EQ "+4">checked</cfif>/>+4&nbsp;
                    <input type="radio" name="q1" value="+5" <cfif q1 EQ "+5">checked</cfif>/>+5&nbsp;
                    
                </div>
            </li>

Open in new window

0
Comment
Question by:traport
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 4

Expert Comment

by:SafetyFish
ID: 36502532
There are some great explanations for putting backgrounds and images onto pages using CSS at this website. I think this page, in particular, might help a lot:

http://www.w3schools.com/CSS/css_image_transparency.asp

If you look along the left side, however, there are many more parts (especially in the advanced section) that may be helpful.

Enjoy!
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36502571
check this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<style>
		ul
		{
			list-style-type:none;
		}
		ul li div span
		{
			margin-left:5px;
		}
		ul li div 
		{
			background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
			width:550px;
		}
	</style>
</HEAD>

<BODY>
	<ul>
		<li>How would you rate your proposal manager's <b>responsiveness</b> on this proposal? 
			<div> 
				<span><input type="radio" name="q1" value="-5"/> -5</span>
                <span><input type="radio" name="q1" value="-4"/> -4</span>
                <span><input type="radio" name="q1" value="-3"/> -3</span>
                <span><input type="radio" name="q1" value="-2"/> -2</span>
                <span><input type="radio" name="q1" value="-1"/> -1</span>
                <span><input type="radio" name="q1" value="0"/> 0</span>
                <span><input type="radio" name="q1" value="+1"/> +1</span>
                <span><input type="radio" name="q1" value="+2"/> +2</span>
                <span><input type="radio" name="q1" value="+3"/> +3</span>
                <span><input type="radio" name="q1" value="+4"/> +4</span>
                <span><input type="radio" name="q1" value="+5"/> +5</span>
			</div>
		</li>
	</ul>
</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:traport
ID: 36503609
Thanks for the link!

gurvinder372: I didn't get any styling in page when I tried what you provided. I wonder why? I just copied and pasted it... ?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36503655
which browser did you tried my code with?

I tried on Chrome6 and safari4 and it worked
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 1500 total points
ID: 36503731
@gurvinder372 - It sounded interesting so I tried it with FF and IE, but no gradient.  This site says there's no standards for the gradient stuff yet:

http://www.htmlcenter.com/blog/cross-browser-gradient-backgrounds/
Chrome and Safari (and, as far as I know, all other modern Webkit-based browsers) currently utilize the proprietary method -webkit-gradient(), while Firefox uses the proprietary method -moz-[type]-gradient(). No versions of Internet Explorer (except possibly the IE9 platform preview) support CSS3 gradients, but IE does support a proprietary filter() method that is capable of implementing native gradients. Unfortunately, Opera still has no native support for gradients, but using a background color, you can allow your page to degrade gracefully in that browser.
0
 

Author Comment

by:traport
ID: 36503917
Yes, IE8 doesn't support it. Thanks.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question