Масштабирование div блоков

@whitehell1992 · Регистрация: 14.11.2015

Author24 — интернет-сервис помощи студентам

Здраствуйте столкнулся с проблемой при масштабировании страницы сьезжает div блок название .main вот код css

CSS

.style
{
 width: 935px;
 height: 890px;
 max-width: 1280px;
 min-width: 940px;
 border: 2px solid #056767;
 margin: auto;
 top: 20px;
 border-radius:12px;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 -o-border-radius: 12px;
 -khtml-border-radius: 12px;
 background-color: white;
 box-shadow:
 inset 0 0 20px black,
 1px 1px 70px black;
 position: relative;
 behavior: url(css/PIE.htc);
}
 
.main
{
 width: 450px;
 height: 30px;
 border: 1px solid #056767;
 border-top-right-radius: 12px;
 border-bottom-left-radius: 12px;
 margin: auto;
 bottom: 873px;
 left: 245px;
 position: relative;
 background-color: #1F8E8E;
 behavior: url(css/PIE.htc);
}

@Fedor92 · 14.11.2015, 12:43

whitehell1992, для блока main примените правило {float:right} или {position:absolute; right:0; top:0}(при этом ширина родительского блока должна быть 100%)... Правила bottom и left можно будет убрать...

@whitehell1992 · 14.11.2015, 12:57 **[ТС]**

Не помогло (

@Fedor92 · 14.11.2015, 13:14

Сообщение от whitehell1992

Не помогло (

Отвечу кодом...

Кликните здесь для просмотра всего текста

HTML5

<!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 charset="UTF-8">
  <style>
    body, html{width:100%; height:100%; margin:0; background:#1f8e8e}
    .main{width:60%; height:850px; border-radius:15px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); margin:50px auto; border:5px solid #ccc; background:#fff}
    .right{float:right; width:50%; height:40px; background:#1f8e8e; border-radius: 0 10px 0 10px; margin: -5px -5px 0 0;}
  </style>
 </head>
<body>
<div class="main">
    <div class="right"></div>
</div>
</body>
</html>

Добавлено через 3 минуты
Вариант 2...

Кликните здесь для просмотра всего текста

HTML5

<!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 charset="UTF-8">
  <style>
    body, html{width:100%; height:100%; margin:0; background:#1f8e8e}
    .main{position:relative; width:60%; height:850px; border-radius:15px; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5); margin:50px auto; border:5px solid #ccc; background:#fff}
    .right{position:absolute; right:-5px; top:-5px; width:50%; height:40px; background:#1f8e8e; border-radius: 0 10px 0 10px}
  </style>
 </head>
<body>
<div class="main">
    <div class="right"></div>
</div>
</body>
</html>

@whitehell1992 · 14.11.2015, 13:20 **[ТС]**

Спасибо помог! Удачи тебе

Новые блоги и статьи
Как проверить, что файл НЕ существует с помощью Bash bytestream 25.01.2025 В системном администрировании проверка существования файлов является фундаментальной операцией, особенно при написании скриптов на Bash. Правильная обработка ситуаций, когда файл отсутствует,. . .	Как проверить, что строка пустая, неопределена или null в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript разработчики регулярно сталкиваются с необходимостью проверки строковых значений на различные состояния. Валидация данных является критически важным. . .	Как проверить существование ключа в объекте или массиве в JavaScript bytestream 25.01.2025 При разработке веб-приложений на JavaScript программисты постоянно сталкиваются с необходимостью работать с объектами и массивами. Эти структуры данных являются фундаментальными элементами языка и. . .	Как создать ArrayList из массива (array) в Java bytestream 25.01.2025 При разработке программного обеспечения на языке Java программисты часто сталкиваются с необходимостью эффективного управления наборами данных. Массивы и ArrayList являются двумя фундаментальными. . .	Как сгенерировать случайные целые числа (int) в указанном диапазоне в Java bytestream 25.01.2025 В программировании генерация случайных чисел является важнейшим инструментом для решения множества практических задач. От создания игровых механик до реализации алгоритмов машинного обучения, от. . .	Как сделать, чтобы grep выводил строки до и после найденной hw_wired 25.01.2025 Утилита grep стала незаменимым инструментом для поиска и фильтрации информации в Unix-подобных операционных системах. Эта командная утилита позволяет осуществлять поиск строк, соответствующих. . .
Как клонировать определенную ветку в Git bytestream 24.01.2025 Одной из ключевых функций Git является возможность клонирования веток, что позволяет создавать локальные копии удаленных репозиториев и работать с определенными версиями проекта. Этот механизм. . .	Как в цикле обойти строки DataFrame в Pandas Python bytestream 24.01.2025 DataFrame представляет собой одну из основных структур данных в библиотеке Python Pandas, которая организует информацию в виде двумерной таблицы с строками и столбцами. Эта структура данных особенно. . .	Как получить имя текущей ветки в Git bytestream 24.01.2025 При работе с Git часто возникает необходимость определить имя текущей ветки, в которой ведется разработка. Знание текущей ветки является критически важным аспектом для эффективного управления. . .	Как отсортировать массив объектов по значению поля объекта в JavaScript bytestream 24.01.2025 При разработке веб-приложений на JavaScript разработчики часто сталкиваются с необходимостью работать с массивами объектов. Эти структуры данных представляют собой упорядоченные наборы элементов, где. . .	Ошибка "src refspec master does not match any" при пуше коммита в Git bytestream 24.01.2025 При работе с системой контроля версий Git разработчики нередко сталкиваются с различными ошибками, одной из которых является сообщение "src refspec master does not match any". Эта ошибка возникает. . .	Как округлить не более двух цифр после запятой в JavaScript bytestream 24.01.2025 При работе с числами в JavaScript разработчики часто сталкиваются с необходимостью округления десятичных значений до определенного количества знаков после запятой. Это особенно важно при работе с. . .

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	14.11.2015, 12:43	2
	whitehell1992, для блока main примените правило {float:right} или {position:absolute; right:0; top:0}(при этом ширина родительского блока должна быть 100%)... Правила bottom и left можно будет убрать... 0

@whitehell1992 0 / 0 / 0 Регистрация: 14.11.2015 Сообщений: 12
	14.11.2015, 12:57 [ТС]	3
	Не помогло ( 0

@whitehell1992 0 / 0 / 0 Регистрация: 14.11.2015 Сообщений: 12
	14.11.2015, 13:20 [ТС]	5
	Спасибо помог! Удачи тебе 0

Масштабирование div блоков

Решение