Creating an up/down vote button with a counter using html/css?

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

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: 5 UpVote DownVote 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.

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.

I was working on this before @Thomas posted his answer, so I'll post it anyway. It also comes with a complimentary, free JSFiddle. In essence, use display: inline-block along with vertical-align: middle or line-height: 30px (or however many px) to position things.

1 for "complimentary, free JSFiddle" (and a good answer) :) – Thomas Shields Jul 5 at 18:50 Thanks :-) Looking at your JSFiddle, I'd recommend that over mine - it's cleaner and lighter, although mine works too. – JamWaffles Jul 5 at 18:56 Your fiddle is a little more polished, though. :) – Thomas Shields Jul 5 at 18:58 I'll let other people be the judge of that :-P I'm a perfectionist, so everything has to be right!

It's why I put the and on the same line to remove the spacing for inline-block. – JamWaffles Jul 5 at 19:02 @OP: Please note that you should add display: *inline; zoom: 1 to your CSS to get the inline-block elements to display in IE7- properly. I think IE8 and above support inline-block properly.

– JamWaffles Jul 5 at 19:03.

Follow these topics: CSS Positioning CSS Floats CSS box model that's almost all you need for this :).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.