24.08.2013 19:03:42 Масштабирование Сообщение #1
qlipoth
Новичок
Дата регистрации:
23.08.2013 23:00:10
Сообщений: 12
Добрый вечер, Михаил. Помогите пожалста разобраться. Есть страница
при изменении масштаба страницы в браузере содержимое блока начинает прыгать (рис.1)
http://i59.fastpic.ru/big/2013/0824/6e/679852a0e215af8fb1f30ad8455ca96e.jpg
Вопрос: Что изменить в коде чтобы при изменении масштаба содержимое блока не вылезало за границы? Если есть универсальный способ расскажите пожалуйста.
<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'>
<title>Loading</title>
<link rel = 'stylesheet' type = 'text/css' href = 'hosting.css'>
</head>
<body>
<div id = 'telo'>
<div class = 'left'>
<div class = 'pic'>
</div>
<h4> Виртуальный хостинг</h4>
<p> 3.94$ в месяц</p>
<a href = '#html'>Подробнее</a>
</div>
<div class = 'center'>
<div class = 'pic'>
</div>
<h4> Облачный хостинг</h4>
<p> 13.94$ в месяц</p>
<a href = '#html'>Подробнее</a>
</div>
<div class = 'right'>
<div class = 'pic'>
</div>
<h4> Выделенный сервер</h4>
<p> 217.94$ в месяц</p>
<a href = '#html'>Подробнее</a>
</div>
</div>
</body>
</html>
body {
background-color: #4E6379;
font-family: Arial,sans-serif;
}
#telo {
background-color: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 2px 2px 7px rgba(1, 1, 1, 0.2);
height: 189px;
margin: 0 auto;
padding-top: 10px;
position: relative;
width: 650px;
}
.center, .right, .left {
float: left;
padding-left: 24px;
padding-right: 24px;
text-align: center;
}
.left .pic {
background: url("images/hosting.png"
no-repeat scroll 0 0 transparent;
}
.center .pic {
background: url("images/hosting.png" no-repeat scroll 0 -42px transparent;
}
.right .pic {
background: url("images/hosting.png" no-repeat scroll 0 -84px transparent;
}
.center .pic, .right .pic, .left .pic {
height: 42px;
margin: 0 auto;
width: 61px;
}
.center {
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
#telo a {
background-color: #F56332;
border-radius: 2px 2px 2px 2px;
clear: left;
color: #FFFFFF;
display: inline-block;
padding: 6px;
text-decoration: none;
}
h4 {
color: #F56332;
}
при изменении масштаба страницы в браузере содержимое блока начинает прыгать (рис.1)
http://i59.fastpic.ru/big/2013/0824/6e/679852a0e215af8fb1f30ad8455ca96e.jpg
Вопрос: Что изменить в коде чтобы при изменении масштаба содержимое блока не вылезало за границы? Если есть универсальный способ расскажите пожалуйста.
