масштабирование страницы под тел и ПК

масштабирование страницы под тел и ПК

Старожил

Сообщения: 270
Благодарности: 5

Всем привет!
Вручайте пож
веб программирование не особо знаю (точнее не знаю )

Вообщем написал страницу авторизации, будет использоваться для запуска на тел и ПК при подключении к WIfi
Фоновая картинка + 4 кнопки (картинки) для перехода в соц сети

black-face.jpg - должно быть на заднем плане по центру страницы
4 кнопки - должны равняться по левой стороне black-face.jpg с отступом от верха 30%

(и если не сложно еще текст по центру сверху равняясь по black-face.jpg)

Вот что я написал, экспериментировал по разному но ничего не выходит ((( т.к знаний не хватает (( То кнопки съезжают то фон вниз бежит, а если на ПК все норм то на тел 2 кнопки проподают и левой части фона не видно (((

HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NET Access &gt; Login...</title>
<style type="text/css">

  body { background: url(img/black-face.jpg) no-repeat;
  	background-color: #808082;  background-position: center;
    margin-top: 55%}

.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000333;}

</style></head>

<body>
<td width="7" height="0" rowspan="2" valign="top" background="img/black-face.jpg">&nbsp;</td>
<table width="10%" height="50" border="0" align="left bottom"=10% cellpadding="0" cellspacing="0">

  <a href="$(link-login-only)?dst=https://www.google.ru/=T-$(mac-esc)"><img src="img/VK.png"></a>
  <a href="$(link-login-only)?dst=https://www.google.ru=T-$(mac-esc)"><img src="img/ok.png"></a>
  <a href="$(link-login-only)?dst=https://www.google.ru=T-$(mac-esc)"><img src="img/VK.png"></a>
  <a href="$(link-login-only)?dst=https://www.google.ru=T-$(mac-esc)"><img src="img/sit.png"></a>

  <tr>
    <td height="20" colspan="2"><span class="style11">Copyright &copy; 2015 Cipta Media Informatika. All right reserved. </span></td>
  </tr>
</table>
</body>
</html>