...

View Full Version : Advice on how to implement this poll box design?



dcloud
07-11-2008, 10:38 PM
Hello everyone. I signed up to make a poll with PollDaddy and after trying out their widgets I decided to make my own. Here is the poll box design I made for myself in Photoshop ...

http://dougcloud.net/show/mypollbox.gif

I have no clue how to implement this using code, because I am not a coder. I was wondering if anyone here could let me know how I could do this? I would want it to appear exactly as it looks above because its size and color scheme match that of my blog and the other elements that are already in my sidebar.

Thank you.

jcdevelopment
07-11-2008, 11:07 PM
slice the images to where you have the top (the one with the brown, all the way down to the point) and take out the text.

Then take a slice out of the middle. A small one, the exact width and maybe 5px high.

Then slice the bottom portion.

Now the code.


*{
margin:0px;
padding:0px;
}

.topPiece {
width:/*size of image*/;
height:/*size of image*/;
background-image:url(imagename.gif);
background-repeat:no-repeat;
}

.topPiece h2 {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
}

.middlePiece {
width:/*image width*/;
background-image:url(imagename.gif);
background-repeat:repeat;
overflow:hidden;
color:#fff;
}

.middlePiece p {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
color:brown;
}

.bottomPiece {
width:/*size of image*/;
height:/*size of image*/;
background-image:url(imagename.gif);
background-repeat:no-repeat;
}

then the html


<div class="topPiece">
<h2>content...the question</h2>
</div>
<div class="middlePiece">
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
</div>
<div class="bottomPiece"></div>

so it will look like this



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>survey</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}

.topPiece {
width:/*size of image*/;
height:/*size of image*/;
background-image:url(imagename.gif);
background-repeat:no-repeat;
}

.topPiece h2 {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
}

.middlePiece {
width:/*image width*/;
background-image:url(imagename.gif);
background-repeat:repeat;
overflow:hidden;
color:#fff;
}

.middlePiece p {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
color:brown;
}

.bottomPiece {
width:/*size of image*/;
height:/*size of image*/;
background-image:url(imagename.gif);
background-repeat:no-repeat;
}
</style>
</head>

<body>
]<div class="topPiece">
<h2>content...the question</h2>
</div>
<div class="middlePiece">
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
<p><input name="item" type="radio" value="thing1" /> content</p>
</div>
<div class="bottomPiece"></div>
</body>
</html>


hope it helps!

dcloud
07-11-2008, 11:35 PM
Wow. JC, that is stellar. Thank you :)

Now my next question (which I should have mentioned in my first post) is how would I install the poll code from PollDaddy to get the poll elements to work in this? Or did you already enter that in the code above? My apologies, I'm not a coder so I'm unsure.

Also, I would need to add padding and margins to get everything to look like it does in the design? I would also need to have the "Vote" button I made and it would need to link with the PollDaddy page for this poll.

Thanks again. You're a big help.

dcloud
07-11-2008, 11:59 PM
Ok, I sliced the images and made the changes to the code, but viewing it in FF and IE I notice white spaces near the top and at the bottom and on the right side it is not aligned (or the border seems thicker, for some reason).

Here is the code with the images:


<style type="text/css">
<!--
*{
margin:2px;
padding:2px;
}

.topPiece {
width: 225px;
height: 64px;
background-image:url(http://dougcloud.net/show/pollheader.gif);
background-repeat:no-repeat;
}

.topPiece h2 {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
}

.middlePiece {
width: 225px;
background-image:url(http://dougcloud.net/show/pollheadermid.gif);
background-repeat:repeat;
overflow:hidden;
color:#FEF6D2;
}

.middlePiece p {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
color:brown;
}

.bottomPiece {
width: 225px;
height: 5px;
background-image:url(http://dougcloud.net/show/pollbottom.gif);
background-repeat:no-repeat;
}
-->
</style>

<div class="topPiece">
<h2>How many times have you had to delete your Photoshop Prefs file?</h2>
</div>
<div class="middlePiece">
<p><input name="item" type="radio" value="thing1" />Never. I'm perfect.</p>
<p><input name="item" type="radio" value="thing1" />Just once. God must like me.</p>
<p><input name="item" type="radio" value="thing1" />Two times a charm, eh?</p>
<p><input name="item" type="radio" value="thing1" />More than three times...hey Moe!</p>
<p><input name="item" type="radio" value="thing1" />Are you insane! It's all I ever do!!</p>
</div>
<div class="bottomPiece"></div>

I'm still going to need to have more space at the bottom and insert the "Vote" button and also somewhow get everything to link with the PollDaddy code.

Any additional input would be greatly appreciated. Thanks.

dcloud
07-12-2008, 12:09 AM
Ok, I got the white spaces to disappear, but now I'm having trouble getting the poll question to properly align in the center of the header.

jcdevelopment
07-12-2008, 12:43 AM
well post the code you have done and let me take a look at it. It takes a little trial and error to get things positioned how you want. Also if you can upload an image of how it looks now or even a link if its live.

dcloud
07-12-2008, 12:50 AM
JC, thanks for your help. Here is the code I have so far:


<style type="text/css">
<!--

p {
margin: 8px 5px 0px 10px;
}

h2 {
padding: 4px 15px;
font-weight: bold;
}

*{
margin:0px;
padding:0px;
}

.topPiece {
width: 225px;
height: 64px;
background-image:url(http://dougcloud.net/show/pollheader.gif);
background-repeat:no-repeat;
}

.topPiece h2 {
font-family:arial;
font-size:12px;
padding: 8px 8px 4px 15px;
color: #FEF6D2;
}

.middlePiece {
width: 225px;
background-image:url(http://dougcloud.net/show/pollheadermid.gif);
background-repeat:repeat;
overflow:hidden;
color:#FEF6D2;
}

.middlePiece p {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
color:brown;
}

.bottomPiece {
width: 225px;
height: 16px;
background-image:url(http://dougcloud.net/show/pollbottom.gif);
background-repeat:no-repeat;
}
-->
</style>

<div class="topPiece">
<h2>How many times have you had to delete your Photoshop Prefs file?</h2>
</div>
<div class="middlePiece">
<form method="get" name="formPoll" action="">
<p><input name="item" type="radio" value="thing1" />Never. I'm perfect.</p>
<p><input name="item" type="radio" value="thing1" />Just once. God must like me.</p>
<p><input name="item" type="radio" value="thing1" />Two times a charm, eh?</p>
<p><input name="item" type="radio" value="thing1" />More than three times...hey Moe!</p>
<p><input name="item" type="radio" value="thing1" />Are you insane! It's all I ever do!!</p>
</div>
<div class="bottomPiece">
</form>
</div>

I still need to figure out how to get it to work with the PollDaddy form. For now I just added a form code going by the code they have on one of their own forms on their site, but I'm just winging it. How would I make it live?

jcdevelopment
07-12-2008, 01:08 AM
works a little better here.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">


p {
margin: 8px 5px 0px 10px;
}

h2 {
padding: 4px 15px;
font-weight: bold;
}

*{
margin:0px;
padding:0px;
}

.topPiece {
width: 225px;
height: 64px;
background-image:url(http://dougcloud.net/show/pollheader.gif);
background-repeat:no-repeat;
}

.topPiece h2 {
font-family:arial;
font-size:12px;
padding: 8px 8px 4px 15px;
color: #FEF6D2;
}

.middlePiece {
width: 225px;
background-image:url(http://dougcloud.net/show/pollheadermid.gif);
background-repeat:repeat;
overflow:hidden;
color:#FEF6D2;
}

.middlePiece p {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
color:brown;
}

.bottomPiece {
width: 225px;
height: 16px;
background-image:url(http://dougcloud.net/show/pollbottom.gif);
background-repeat:no-repeat;
}

</style>
</head>

<body>
<div class="topPiece">
<h2>How many times have you had to delete your Photoshop Prefs file?</h2>
</div>
<div class="middlePiece">
<form method="get" name="formPoll" action="">
<p><input name="item" type="radio" value="thing1" />Never. I'm perfect.</p>
<p><input name="item" type="radio" value="thing1" />Just once. God must like me.</p>
<p><input name="item" type="radio" value="thing1" />Two times a charm, eh?</p>
<p><input name="item" type="radio" value="thing1" />More than three times...hey Moe!</p>
<p><input name="item" type="radio" value="thing1" />Are you insane! It's all I ever do!!</p>
</form>
</div>


<div class="bottomPiece">
</div>
</body>
</html>

dcloud
07-12-2008, 01:17 AM
It looks the same as mine (?). There is still no place for the "Vote" button and would you have any idea how I can implement the PollDaddy code into this so when people clicked they went to the PollDaddy page for this poll?

Sorry to ask so many questions. Thanks again.

jcdevelopment
07-12-2008, 01:26 AM
sorry, i forgot.. upload the code for the survey

and here



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">


p {
margin: 8px 5px 0px 10px;
}

h2 {
padding: 4px 15px;
font-weight: bold;
}

*{
margin:0px;
padding:0px;
}

.topPiece {
width: 225px;
height: 64px;
background-image:url(http://dougcloud.net/show/pollheader.gif);
background-repeat:no-repeat;
}

.topPiece h2 {
font-family:arial;
font-size:12px;
padding: 8px 8px 4px 15px;
color: #FEF6D2;
}

.middlePiece {
width: 225px;
background-image:url(http://dougcloud.net/show/pollheadermid.gif);
background-repeat:repeat;
overflow:hidden;
color:#FEF6D2;
}

.middlePiece p {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
color:brown;
}

.bottomPiece {
width: 225px;
height: 16px;
background-image:url(http://dougcloud.net/show/pollbottom.gif);
background-repeat:no-repeat;
}

.btn {
width:40px;
height:10px;
background-color:#996600;
float:right;
display:block;
margin-right:10px;
}

</style>
</head>

<body>
<div class="topPiece">
<h2>How many times have you had to delete your Photoshop Prefs file?</h2>
</div>
<div class="middlePiece">
<form method="get" name="formPoll" action="">
<p><input name="item" type="radio" value="thing1" />Never. I'm perfect.</p>
<p><input name="item" type="radio" value="thing1" />Just once. God must like me.</p>
<p><input name="item" type="radio" value="thing1" />Two times a charm, eh?</p>
<p><input name="item" type="radio" value="thing1" />More than three times...hey Moe!</p>
<p><input name="item" type="radio" value="thing1" />Are you insane! It's all I ever do!!</p>
<div class="btn"></div>
</form>
</div>


<div class="bottomPiece">
</div>
</body>
</html>

dcloud
07-12-2008, 01:29 AM
I added the button and also some padding, because everything is all bunched up together. Here is my updated code:


<style type="text/css">
<!--

.vote {
float: right;
margin: 20px 10px 10px 10px;
}

p {
margin: 8px 5px 0px 10px;
}

h2 {
padding: 4px 15px;
font-weight: bold;
}

*{
margin:0px;
padding:0px;
}

.topPiece {
width: 225px;
height: 64px;
background-image:url(http://dougcloud.net/show/pollheader.gif);
background-repeat:no-repeat;
}

.topPiece h2 {
font-family:arial;
font-size:12px;
padding: 8px 8px 4px 15px;
color: #FEF6D2;
}

.middlePiece {
width: 225px;
background-image:url(http://dougcloud.net/show/pollheadermid.gif);
background-repeat:repeat;
overflow:hidden;
color:#FEF6D2;
}

.middlePiece p {
font-family:arial;
font-size:12px;
padding-left:10px;
pading-top:5px;
color: #4F3314;
}

.bottomPiece {
width: 225px;
height: 16px;
background-image:url(http://dougcloud.net/show/pollbottom.gif);
background-repeat:no-repeat;
}

-->
</style>

<div class="topPiece">
<h2>How many times have you had to delete your Photoshop Prefs file?</h2>
</div>
<div class="middlePiece">
<form method="get" name="formPoll" action="">
<p><input name="item" type="radio" value="thing1" />Never. I'm perfect.</p>
<p><input name="item" type="radio" value="thing1" />Just once. God must like me.</p>
<p><input name="item" type="radio" value="thing1" />Two times a charm, eh?</p>
<p><input name="item" type="radio" value="thing1" />More than three times...hey Moe!</p>
<p><input name="item" type="radio" value="thing1" />Are you insane! It's all I ever do!!</p>
<div class="vote"><img src="http://dougcloud.net/show/votebutton.gif" width="52" height="16" alt="Vote"></div>
</div>
<div class="bottomPiece">
</form>
</div>

dcloud
07-12-2008, 01:35 AM
JC, I installed the PollDaddy poll on my blog (dcblog.net) so you can see how it is working. This not the code we are working on, but PollDaddy's generated code. I am trying to figure out how to add whatever is in their poll code into my poll code to get it to work. Hopefully you understand what I mean. If not let me know.

Thanks.

dcloud
07-12-2008, 01:55 AM
I notice there seems to be more padding and space in between the radio button and the answers in IE than there is in FF.

jcdevelopment
07-12-2008, 02:16 AM
yeh, as far as FF amd IE you will get that when it comes to form elements...

sorry, couldnt find the survey on your blog. just post the code for it and i will try and add it if you like?

dcloud
07-12-2008, 02:26 AM
I just want to get the code out of the PollDaddy code that I can insert into my own code to make the poll work. Here is an example of what I mean from one of PollDaddy's polls on their site:


<div class="input">
<input type="radio" name="PDI_answer" id="PDI_answer3900749" value="3900749">
</div>
<div class="label">Yes, I think we are already in it and it's just
going to get worse and worse.</div>

This code has a value for one of the answers, which of course I do not have. I will have to get the other codes as well to make the vote button take people to the right place and so people can view the poll and the results.

My problem is I don't know where to find these things in the PollDaddy code because all they give me is a chunk of Javascript.

jcdevelopment
07-12-2008, 02:28 AM
just use this. It has an ID to it. so when you submit the selection it knows.



<input type="radio" name="PDI_answer" id="PDI_answer3900749" value="3900749">

dcloud
07-12-2008, 02:32 AM
Yes, but that is their poll, not mine. Like I said I was just pasting it as an example. I will need the actual values for my own poll.

jcdevelopment
07-12-2008, 02:45 AM
that would be up to you to name it. Then you would have to create some PHP/cgi-bin to grab all of the answers... not sure though.

Sorry if this isnt what you are talking about.. i get lost especially on a friday..
:p

dcloud
07-12-2008, 03:28 AM
I wouldn't be able to do PHP or cgi-bin. What I want to do is just take the parts of the code I need from the one PollDaddy generates and insert those into the code you and me have been working on. The problem is all that PollDaddy gives me is a chunk of Javascript so I can't like "view source" and grab what I need.

I appreciate your help. Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum