Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Advice on how to implement this poll box design?

    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 ...



    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.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.

    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

    Code:
    <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

    Code:
    <!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!

  • #3
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by dcloud; 07-11-2008 at 11:44 PM.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #4
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #5
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.

  • #7
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    JC, thanks for your help. Here is the code I have so far:

    Code:
    <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?
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    works a little better here.

    Code:
    <!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>

  • #9
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #10
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    sorry, i forgot.. upload the code for the survey

    and here

    Code:
    <!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>

  • #11
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I added the button and also some padding, because everything is all bunched up together. Here is my updated code:

    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>
    Last edited by dcloud; 07-12-2008 at 01:47 AM.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #12
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by dcloud; 07-12-2008 at 01:48 AM.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #13
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog

  • #14
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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?

  • #15
    New Coder
    Join Date
    Jun 2008
    Location
    Michigan
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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.
    - Doug Cloud: Graphic Designer | My Portfolio | My Blog


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •