[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-09-08
6
Medium Priority
?
199 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
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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 how to create an extensible mechanism for linked drop downs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

865 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