Changing HTML code to CSS

Question

I understand css and have an external file, but I don't know how to move everything from this poll to the css file. The poll is under the div id "poll" so anything I change in css will affect the entire poll instead of specific parts. Can I split the question of the poll and the answers into separate divs or is there a better way to re-write the code?

I know that the poll still works but I like to be organized and the validator is showing many errors because of this.

<div id="poll">
<form method="post" action="http://poll.pollcode.com/t78ar8">
    <table>
        <tr>
            <th colspan="2">What game site do you visit most?</th>
        </tr>
        <tr>
            <td>
                <input type="radio" name="answer" value="1" id="t78ar8answer1">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer1">Ign</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="2" id="t78ar8answer2">
            </td>
            <td>&nbsp;
                <label for="t78ar8answer2">GameSpot</label>
            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="3" id="t78ar8answer3">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer3">GameFAQs</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="4" id="t78ar8answer4">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer4">GamerZone</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="5" id="t78ar8answer5">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer5">Mmohut</label></font>

            </td>
        </tr>
        <tr>
            <td colspan="2" height="10">
                <center>
                    <input type="submit" value=" Vote ">&nbsp;&nbsp;
                    <input type="submit" name="view" value=" View ">
                </center>
            </td>
        </tr>
        </a>&nbsp;</font>
        </td>
        </tr>
    </table>
</form>
</div>

Here's the jsfiddle http://jsfiddle.net/qX3Jp/ for a visual. Also, I know the code's format isnt right. I did that because it was all in one line and harder to read. If any additional information is needed, please ask before rejecting my question. Thanks

Decker W Brower · Accepted Answer · 2013-04-03 17:27:21Z

1

Here is a jsfiddle showing how i would do it. without a table because I hate tables and think that the only time they should be used is to display data and never for page layout.

also all of the styling has been separated from the markup.

for those too lazy to click the link... here is the code.

HTML:

<div id="poll">
    <form method="post" action="http://poll.pollcode.com/t78ar8">

        <h2 id="title">What game site do you visit most?</h2>

        <div id="radio_btns">
            <input type="radio" name="answer" value="1" id="t78ar8answer1">Ign<br />
            <input type="radio" name="answer" value="2" id="t78ar8answer2">GameSpot<br />
            <input type="radio" name="answer" value="3" id="t78ar8answer3">GameFAQs<br />
            <input type="radio" name="answer" value="4" id="t78ar8answer4">GamerZone<br />
            <input type="radio" name="answer" value="5" id="t78ar8answer5">Mmohut
        </div>
        <div id="submit_btns">
            <input type="submit" value=" Vote ">
            <input type="submit" name="view" value=" View ">
        </div>
    </form>
</div>

CSS:

#poll {
    margin: 30px 0px 0px 5px;
    font-family: Tahoma;
}
#radio_btns {
    margin-bottom: 5px;
    font-size: 13px;
}
#radio_btns input {
    margin: 5px 10px 5px 5px;
}
#title {
    margin-bottom: 3px;
    font-size: 13px;
}
#submit_btns {
     margin: 0px 0px 0px 60px;
}

notice that I broke the markup into sections and gave them ID's to make the CSS styling easier.

answered Apr 3, 2013 at 17:27

Decker W Brower

9416 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

TheUnCola Over a year ago

Thanks. The format is slightly different, but i'm not worried about it. Also, is /> necessary after <br ?

Decker W Brower Over a year ago

it is for strict XHTML which is just a habit for me. but just <br> works fine too.

TheUnCola Over a year ago

I'm using strict but i'm still very new to coding so I don't know a lot the specific rules. I got it all to work great. Again, thank you very much. This was really annoying me. lol

TheUnCola Over a year ago

How come you can't friend or message people on here? The inability to communicate with other people makes it a pain.

Decker W Brower Over a year ago

your not the first person to think so... meta.stackexchange.com/questions/886/…

Jason Lydon · Accepted Answer · 2013-04-03 17:30:16Z

1

I went full form and removed what I see as unnecessary elements: tables + more. I put the font information in the body tag. Everything else in the CSS is layout related.

CSS:

* {
    padding:0;
    margin:0;
}
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#000;
}
label {
    display:block;
}
fieldset {
    border:none;
    text-align:center;
}
legend {
    font-weight:bold;
}

HTML:

<form method="post" action="http://poll.pollcode.com/t78ar8" id="poll">
        <legend>What game site do you visit most?</legend>
        <label for="t78ar8answer1"><input type="radio" name="answer" value="1" id="t78ar8answer1"> Ign</label>
        <label for="t78ar8answer2"><input type="radio" name="answer" value="2" id="t78ar8answer2"> GameSpot</label>
        <label for="t78ar8answer3"><input type="radio" name="answer" value="3" id="t78ar8answer3"> GameFAQs</label>
        <label for="t78ar8answer4"><input type="radio" name="answer" value="4" id="t78ar8answer4"> GamerZone</label>
        <label for="t78ar8answer5"><input type="radio" name="answer" value="5" id="t78ar8answer5"> Mmohut</label>
        <fieldset>
          <input type="submit" value=" Vote ">
          <input type="submit" name="view" value=" View ">
        </fieldset>
    </form>

answered Apr 3, 2013 at 17:30

Jason Lydon

7,2102 gold badges38 silver badges44 bronze badges

1 Comment

Decker W Brower Over a year ago

nice use of the legend and fieldset tags! looks like we had basically the same idea.

Collectives™ on Stack Overflow

Changing HTML code to CSS

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related