He cambiado el codigo un poco porque me estoy volviendo loco
Código:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="styles/style.css" type="text/css" />
</head>
<body>
<div class="container trans">
<table class="menu_box">
<tr>
<td><img src="styles/images/new.png"></td>
<td><img src="styles/images/inbox.png"></td>
</tr>
<tr>
<td><img src="styles/images/profile.png"></td>
<td><img src="styles/images/contact.png"></td>
</tr>
</table>
</div>
</body>
</html>
y la hoja de estilos
Código:
html,body{
background: #d0d4d1 url('images/blue2.jpg') no-repeat;
width: 100%;
height:100%;
overflow-x: hidden;
overflow-y: hidden;
}
.container {
margin-top: 25px;
margin-left: 45px;
width: 90%;
height: 90%;
padding: 10px;
background:rgba(0,0,0,0.5); /*0.5 De Transparencia*/
}
.menu_box{
position:absolute;
top:30%;
left: 10%;
width:auto;
height: 34.5%;
background-color: blue;
border-spacing: 0;
border-width: 0px;
padding: 0px;
}
.menu_box td{ height: 50%;}
.menu_box img{height: 100%;}
El tema es que me ignora completamente, la idea es que poniendole de height a la tabla directamente (.menu_box) un 34.5% cuando ponga una resolucion mayor las imagenes deberian de hacerse mas pequeñas por que con
.menu_box img{height: 100%;}
hacen el alto de 100% de la celda que a su vez cada celda es el 50% de alto de la tabla.
A alguien se le ocurre que hago mal?
gracias y perdon por el tocho