How do I position a radio button correctly? - css

Question

http://jsfiddle.net/BD8j2/
I am trying to put a radio button to the right of the arrow picture, but it always keeps going someplace else for some reason. I want it between the arrow and the word Masculino.
I also don't want this button to really record anything, it's just there for aesthetic purposes. But I want when someone click on this box for the radio button to fill and then to link to another page.
Is this possible to do? For the whole box to be the link? I was thinking of wrappign the whole div in a <a href> which I think would work.

Answer 1

Try this: http://jsfiddle.net/BD8j2/8/.
(The HTML in the first version of this post is invalid (input inside a), and it is not cross-browser compatible, so I have replaced it with a JavaScript example.)
HTML:
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="male" />
Masculino
</label>
</form>
</div>
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="female" />
Femenino
</label>
</form>
</div>
JavaScript:
function init() {
var link_elems = getElementsByClass('links');
for(var i = 0; i < link_elems.length; i++) {
addEvent(link_elems[i], 'click', goToLink);
}
}
function goToLink(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else if(typeof e.cancelBubble != 'undefined') {
e.cancelBubble();
}
e.currentTarget.children[0].checked = true;
window.location = e.currentTarget.children[1].href;
}
function addEvent(elem, event, handler) {
if(elem.addEventListener) {
elem.addEventListener(event, handler, false);
} else if(elem.attachEvent) {
elem.attachEvent('on' + event, handler);
} else {
elem['on' + event] = handler;
}
}
function getElementsByClass(className) {
if(document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else if(document.all) {
var everything = document.all;
var all_length = everything.length;
var matches = [];
for (var i = 0; i < all_length; i++) {
if(everything[i].className == className) {
matches[matches.length] = everything[i];
}
}
return matches;
}
return false;
}
addEvent(window, 'load', init);
CSS:
.answers {
width: 220px;
height: 50px;
margin-top: 20px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: #ddd;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-repeat: no-repeat;
background-position: 0 50%;
}
.answers label {
float: left;
margin-left: 75px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold
}
.answers input {
margin-right: 5px
}
In the previous version, the JavaScript required putting the link names and targets in two arrays, now I have made it automatic.

Answer 2

Something like http://jsfiddle.net/XEk5d/2/, the clicking part to go to another page would require JavaScript.
CSS
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
display:inline-block;
vertical-align:middle;
}
#answerstext {
background-position:0 50%;
display:inline-block;
vertical-align:middle;
}
form{
display:inline-block;
}
input{
vertical-align:middle;
}
HTML
<div id="answers">
<div id="arrowcenter"></div>
<form>
<input type="radio" name="sex" value="male" />
<div id="answerstext">Masculino</div>
</form>
</div><!-- end grayAnswer -->?