Question

I am fairly new to html/css and need to create something like the following:

-----------------
|   |        UP |
| # | foobar    |
|   |        DN |
-----------------

Where UP and DN are some images indicating and upvote and downvote. The # is the net result of the UP and DN votes. So I am fairly well versed in javascript to handle the ajax/server-side. My skills primarily lack in the html/css – the actual UI design of these kinds of buttons.

Does anyone have advice on CSS topics I should look into or some good tutorials on the web that can teach me how to make this step by step? Even a high level idea of how I should proceed to make this or break this into pieces would be great.

Answer 1

For the actual up and downvote arrows, either do some serious scaling with the ↑↓ characters or use images. (You could technically get really fancy with z-index and CSS3 rotating and make it with pure CSS, but let’s not go there. 🙂

There’s a few ways to get that basic layout you want. You’ll need two blocks: a number block and a up/down block. Those blocks can be laid out with CSS’s display:inline-block, where the elements behave like block level elements (which means you can set width/height, etc.) but display on the same line as each other. Keep in mind inline-block is not supported by IE7 and lower, though you can hack it with display:inline; zoom:1 set just for IE7 lower.
Or you could float the two elements left/right. This often has some odd side effects though.

Some actual markup might look like:

<div class="votesBox">
    <div class="votes">5</div>
    <div class="vote">
        <div class="voteUp">UpVote</div>
        <div class="voteDown">DownVote</div>
    </div>
</div>

CSS:

.votes, .vote {
 display:inline-block;
}
.vote {
 vertical-align:middle;   
}

You could replace .voteUp and .voteDown with images and wire click events to JS, then update the .votes’s content accordingly.

http://jsfiddle.net/WpxAm/1/

https://developer.mozilla.org/en/CSS/display

https://developer.mozilla.org/en/CSS/float

https://developer.mozilla.org/en/CSS/box_model