i have this fiddle: http://jsfiddle.net/xVgun/
As soon as i resize my browser in width, the images get smaller (that's what i actually want) but the tablecells wont. I would like that the tablecells also get smaller in width AND height so the cells where the buttons are in are actually the size of the pictures. I don't know how i should fix this problem and could really use some help with it.
CSS:
body, html {
font-family:"HelveticaNeue-Bold", sans-serif;
background-color: black;
max-width:640px;
margin-left: auto;
margin-right: auto;
}
.button1 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
max-width: 100%;
height:100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button2 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
height:100%;
cursor:pointer;
max-width: 100%;
border:none;
font-size: 0.1px;
}
.button3 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
height:100%;
max-width: 100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button4 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
height:100%;
max-width: 100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button5 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
max-width: 100%;
height:100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button6 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
max-width: 100%;
height:100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.header {
width: 100%;
}
.header img {
width: 100%;
}
.formClass {
width: 100%;
height:100%;
}
.sixButtons {
width: 100%;
height:100%;
}
table.sixButtons tr {
width:100%;
height:200px;
}
table.sixButtons td {
width:50%;
height:200px;
}
HTML:
<body>
<div class="header">
<img src="images/headerbefore.jpg" />
</div>
<form action="vote.php" method="post" class="formClass" name="buttonForm">
<table class="sixButtons">
<tr>
<td>
<button type="image" onclick="setavalue(1)" enctype="multipart/form-data" id="votingvalue1" class="button1">
</td>
<td>
<button type="image" onclick="setavalue(2)" enctype="multipart/form-data" id="votingvalue2" class="button2">
</td>
</tr>
<tr>
<td>
<button type="image" onclick="setavalue(3)" enctype="multipart/form-data" id="votingvalue3" class="button3">
</td>
<td>
<button type="image" onclick="setavalue(4)" enctype="multipart/form-data" id="votingvalue4" class="button4">
</td>
</tr>
<tr>
<td>
<button type="image" onclick="setavalue(5)" enctype="multipart/form-data" id="votingvalue5" class="button5">
</td>
<td>
<button type="image" onclick="setavalue(6)" enctype="multipart/form-data" id="votingvalue6" class="button6">
</td>
</tr>
</table>
<input id="votingvalue" type="hidden" value="" name="votingvalue">
<input type="hidden" value="2" name="voteid">
</form>
</div>
</body>
</html>
JS:
function setavalue(value) {
value = parseInt(value);
if (value === 1) {
document.getElementById('votingvalue').value = '1';
} else if (value === 2) {
document.getElementById('votingvalue').value = '2';
} else if (value === 3) {
document.getElementById('votingvalue').value = '3';
} else if (value === 4) {
document.getElementById('votingvalue').value = '4';
} else if (value === 5) {
document.getElementById('votingvalue').value = '5';
} else if (value === 6) {
document.getElementById('votingvalue').value = '6';
}
document.forms["buttonForm"].submit();
}
Edit: Now i changed it so it would be all with percentages: http://jsfiddle.net/xVgun/2/
But now the behaviour is even weirder. My tablecells are way too small in height although i think it should display it like it would be 33% of the size of the table...
I really am in a dead end now and don't know what i'm doing wrong -.-
Greets Flo
