При масштабировании съезжают блоки: Съезжает верстка при масштабировании, как исправить? — Хабр Q&A

html — «Ломается» верстка при масштабировании сайта в Chrome и FireFox

Добрый вечер, уважаемое сообщество. Возникла следующая проблема — есть горизонтальное меню (код ниже), а точнее два. Построены по одному принципу. Когда пытаюсь масштабировать сайт в Opera и (кто бы мог подумать) IE9 — все нормально, меню увеличивается\уменьшается без проблем вместе со всем сайтом. Но в Chrom’е и Firefox последний элемент перескакивает на новую строку, соответственно ломается структура, съезжает в сторону слайдер, что под меню. Помогите, пожалуйста советом. Буду очень признателен.

Вот, собственно, и код:

Стандартная структура меню:

<nav>
<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Портфолио</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
</nav>

И CSS разметка (не судите строго — учусь))

 #menu1 {
    background: url("images/menu/top_menu/tab. jpg") repeat-x;
    height: 60px;
    margin: 0px auto;
    min-width: 1020px;
    position: relative;
    right: 23px;
    top: 71px;
    width: 1020px;
}
#menu1 ul {
    list-style: none;
}
#menu1 li {
    background: url (images /menu /top_menu /tab.jpg) repeat-x;
    display: block;
    float: left;
    list-style: none;
}
#menu1 li a {
    border-right: 1px solid black;
    color: #fff;
    display: block;
    float: left;
    font-size: 18px;
    height: 40px;
    padding-top: 19px;
    text-align: center;
    text-decoration: none;
}
#menu1 li a:hover {
    background: url("images/menu/top_menu/hover_tab.jpg") repeat-x;
    color: #fff;
}
#menu1 li.current a {
    background: url("images/menu/top_menu/current_tab.jpg") repeat-x;
    display: block;
    float: left;
}
#menu1 li.current a:hover {
    background: url("images/menu/top_menu/hover_tab.jpg") repeat-x;
}
#menu1 li.w0 a,
#menu1 li.w1 a,
#menu1 li.w2 a,
#menu1 li.w3 a {
    width: 203px;
}

• google-chrome
• html
• firefox
• css

3

Очень странно, только что у себя скопировал и запустил, все нормально ресайзится. Можно немного больше данных? Какие версии Chrome и Firefox и какая ОС?

Вот скрин Chrome. В FF все так же.

1

1. Слишком много лишнего кода у вас.
2. Вы какой-нибудь resetter подключали?
3. Зачем всё время используете float: left;? Он может перебить вам весь стиль.
4. display: block; поставьте только для ссылки, а для li не нужно.

Мой совет вам — скачайте с интернета какую-нибудь готовую реализацию горизонтального меню и посмотрите её код.

Лично я для такого меню обычно назначаю тэгу li свойство display: inline-block;.

Доктайп какой? Если 4.01, попробуй 5.

Настало время полюбить

<div></div>

которые спасают от подобного и не только рода ситуаций.

а вы случайно не забыли прописать в head

<meta name="viewport" content="width=device-width, initial-scale=1">

когда то сам забыл.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — Слетает верстка при масштабировании

Вопрос задан 6 лет 1 месяц назад

Изменён 6 лет 1 месяц назад

Просмотрен 2k раз

При масштабе в x1. 1 все держится нормально, но если более:

Дело в том, что данная кнопка — простой фон на футере, каким образом делается оптимизация при изменении масштабирования я еще не представляю, буду рад советам и best practice.

Код:

footer {
  height:72px;
}

.footer{
  margin-left: 100px;
  width: 1120px;
  background: url(../images/вертолеты_футер_сплошной.png) no-repeat;
  background-size: 100%;
  height: 100%;
  text-align: right;

}

#btnText{
  text-align: left;
  position: absolute;
  top:15px;
  left:1020px;
  font-weight: 100;
  font: 13px 'Micra','Arial', serif;
  padding: 0px 0px 2px 0px;
  text-transform: uppercase;

}

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Песочница</title>
<link rel="stylesheet" href="../css/style.css"
<body>


<footer>
  <div class = "footer">

    <div class = "listMenu" >

        <ul>
          <li>ПРОБКИ</li>
          <li>КАРТЫ</li>
        </ul>


    </div>


    <span id = "btnText">список предприятий<br> корпорации</span>

  </div>

</footer>

</body>

</head>
</html>

• html
• css
• адаптивная-верстка
• масштабирование

4

попробуй fluid typography.

Трюк основан на такой формуле

12px + (24-12)*(100vw-240)/(1920-240)

Суть в том, что размер шрифта рассчитывается в зависимости от размера экрана и пересчитывается при reflow, которое происходит при ресайзе страницы. В данном случае шрифт 12px будет на экране шириной 240px и при увеличении ширины экрана размер шрифта будет масштабироваться пропорционально до 24px при ширине экрана в 1920. Тебе надо определиться, какие у тебя ширины экрана, а потом подобрать соответствующие размеры шрифта, чтобы текст не вылезал за фон. Я бы так попробовал.

PS а если юзер будет тупо увеличивать масштаб шрифта в браузере, то это не твоя проблема, а его — значит ему так удобнее.

8

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

блоков поступает в неправильном масштабе и проблемы с масштабом блока

Быстрое видео

Power Tip: работа с весами для заводских этикеток

Выпуск

Когда вы размещаете блок на чертеже, он появляется в неправильном масштабе.

 

У вас возникла эта проблема с масштабированием блока в чертеже, который включает внешние ссылки? Если это так, выполните наши действия по устранению неполадок и корректировке масштаба и единиц измерения на чертеже с помощью внешних ссылок.

Блок — это набор линий и других компонентов, составляющих объект на чертеже. Примеры объектов, состоящих из блока, включают в себя растение, этикетку, деталь и элемент ирригационного оборудования. При размещении одного из этих объектов вы можете иногда заметить, что их масштаб кажется неправильным. Например, растение, которое вы размещаете на своем рисунке, может казаться намного больше или меньше, чем аналогичные объекты, которые уже есть на вашем рисунке.

Вы можете предотвратить этот тип проблемы, ВСЕГДА устанавливая единицы измерения и масштаб перед началом работы над чертежом. Для получения дополнительной информации см. нашу страницу «Установка масштаба». Для получения дополнительной информации о правильном использовании масштаба в AutoCAD мы приглашаем вас посмотреть наш веб-семинар «Работа с масштабом».

Если у вас возникла эта проблема с блоком, в котором вы уверены, что ваш масштаб и единицы установлены правильно, вы можете перейти к разделу «Долговременные исправления» ниже.

 

Вот пример. На изображении ниже показан блок, отображаемый в неправильном масштабе. Крошечное дерево в правой части рисунка должно быть того же размера, что и три больших дерева в левой части. По какой-то причине он пришел в гораздо меньшем размере.

 

 

 

 

Решения

Блоки ирригационного оборудования поступают не в том масштабе?

Если символы орошения отображаются на ваших чертежах с неправильным масштабом, убедитесь, что вы используете правильный набор настроек и что ползунки масштаба в этом наборе настроек установлены правильно. Для получения информации и инструкций см. нашу документацию по масштабированию символов ирригации.

Все еще возникают проблемы с масштабом блоков вашего ирригационного оборудования после настройки масштабирования символов в вашем наборе настроек? Перейдите к шагам, перечисленным ниже.

 

Шаг 1: Удалите и очистите все неправильно масштабированные блоки

Прежде всего, вам нужно избавиться от блоков, которые появляются в неправильном масштабе.

 

В большинстве случаев только этот первый набор шагов решит проблему. Несмотря на это, вам все равно придется удалить и очистить чертеж от ошибочных блоков, выполнив следующие шаги:

 

1А. Выберите на чертеже все блоки с неправильным масштабом. Введите E (для стирания) в командной строке, затем нажмите Введите . Все выбранные блоки будут удалены.

 

1Б. Теперь, когда вы удалили ошибочные блоки, вам все равно нужно удалить их из чертежа с помощью команды AutoCAD Purge . Введите PRG в командную строку, затем нажмите Введите . Эта команда удалит все неиспользуемые элементы, включая ошибочные блоки, которые вы удалили, из вашего чертежа.

 

1С. Поместите объект на чертеж. Если он по-прежнему отображается в неправильном масштабе, вам нужно попробовать несколько дополнительных исправлений.

 

1Д. Прежде чем переходить к следующему потенциальному решению, обязательно удалите и очистите чертеж от любого ошибочного блока (например, только что размещенного тестового блока), выполнив шаги, описанные выше.

 

 

Шаг 2: Проверьте и исправьте свои единицы и масштабируйте

Если удаление и очистка ошибочных блоков, как описано выше, не решили вашу проблему, пришло время убедиться, что ваши единицы измерения и масштаб установлены правильно. См. разделы нашей документации:

• Проверка настройки единиц измерения
• Исправление единиц измерения и масштаба

 

Шаг 3.

Проверка аннотативного масштабирования

3А. Выберите блок с неправильным масштабированием.

 

3Б. Введите PROP в командной строке и нажмите Введите , чтобы открыть панель свойств .

 

 

Проверьте запись Annotative . В этой строке вы должны увидеть No .

 

 

Если в этой строке указано Да , для вашего чертежа задан аннотативный масштаб, который может помешать правильному масштабированию таких объектов, как блоки.

 

 

Если это так, см. наши шаги по отключению аннотативного масштаба.

Узнайте, почему мы не рекомендуем использовать аннотативную шкалу с нашим программным обеспечением.

 

 

 

 

Шаг 4. Исправьте единицы DWG

Если ваши блоки по-прежнему получаются слишком большими или слишком маленькими после того, как вы исправили единицы измерения и масштаб, вы, вероятно, столкнулись с относительно редкой ошибкой AutoCAD, которая влияет на масштаб вашего чертежа.

Чтобы устранить эту проблему, выполните наши действия по исправлению единиц измерения DWG.

 

 

 

Шаг 5: Убедитесь, что вы используете последние блоки Land F/X

Наконец, вы можете использовать устаревшие блоки Land F/X. Следуйте нашим инструкциям, чтобы получить последние блоки Land F/X.

 

 

Шаг 6. Устранение повреждений и долгосрочные исправления

Описанная выше ошибка единиц DWG должна возникать только в том случае, если ваш чертеж содержит прокси-объекты и отображение прокси в диалоговом окне Параметры , вкладка Открыть и сохранить имеет значение Обнаружение объекта и вызов команды , что Autodesk подтвердил как ошибку. Хотя шаги -DWGUNITS , описанные выше, обеспечивают эффективное краткосрочное исправление для одного чертежа, мы рекомендуем выполнить несколько дополнительных шагов, чтобы предотвратить эту проблему в будущем.

Также попробуйте выполнить следующие действия, если ни одно из предыдущих решений не сработало. Сначала проверьте копию чертежа с помощью команды «Сохранить как».

 

Измените настройки обнаружения объектов

Откройте диалоговое окно Параметры :

 

Управление лента, Параметры кнопка

 

 

 

 

введите параметры в командной строке

 

 

 

 

щелкните правой кнопкой мыши в командной строке и выберите Параметры 9.0080 из меню

Инструменты выпадающее меню

 

 

 

Когда откроется диалоговое окно Параметры , выберите вкладку Открыть и сохранить .

 

 

 

Упомянутая выше ошибка единиц измерения DWG возникает, когда для параметра Загрузка объектов ARX в этом поле установлено значение Обнаружение объекта и вызов команды .

 

Чтобы предотвратить подобные ошибки в будущем, мы рекомендуем следующие настройки в двух раскрывающихся меню под Object ARX Applications в этом диалоговом окне:

 

• В разделе Запрос загрузки приложения ObjectArx выберите Вызов команды .

 

 

• В разделе Прокси-изображения для пользовательских объектов выберите Не показывать прокси-графику .

 

 

 

Очистите свои чертежи и все внешние ссылки

Мы также рекомендуем вам выработать привычку очищать свои чертежи и все внешние ссылки, особенно те, которые вы получаете от коллег, консультантов и клиентов. Очистка ваших чертежей предотвратит повреждение чертежа и множество проблем с масштабированием, удалив прокси-объекты из ваших чертежей и файлов листов деталей.

 

 

Блоки деталей и прокси-объекты/повреждение чертежа

Особенно важно, чтобы ваши подробные листы содержали ZERO Proxy Objects (проблемные элементы, которые могут привести к повреждению чертежа). Каждый подробный лист должен быть чистым файлом DWG с титульным листом. Вот почему очень важно, чтобы вы выполнили наши шаги по очистке чертежа на всех ваших листах деталей. Очистка чертежей деталей таким образом значительно уменьшит вероятность повреждения и предотвратит появление блоков в неправильном масштабе.

 

Кроме того, поскольку детали выделены из других чертежей и могут включать в себя внешние ссылки, ваши детали могут содержать все эти бесполезные прокси-объекты. Так что, если вы открываете подробный лист и он полон прокси-объектов, пришло время почистить.

Узнайте больше о повреждении чертежей, его причинах и решениях:

• Объяснение повреждения чертежа
• Предотвращение повреждения чертежа
• Очистка чертежей и внешних ссылок

Использование действия масштабирования в динамическом блоке (концепция)

Использование действия масштабирования в динамическом блоке (концепция)

 

AutoCAD 2008 Пользовательский Руководство > Создать и изменить Объекты > Создать и использовать Блоки (символы) > Добавить динамическое поведение в блоки > Добавить динамические элементы в блоки > Использовать действия с Динамические блоки > 

Использование действия масштабирования в динамическом блоке

Концепция

location=’ws1a9193826455f5ffa23ce210c4a30acaf-6d9e-procedures.htm»> Процедура

Краткий справочник

 

 

 

В ссылке на динамический блок действие масштабирования ведет себя аналогично команде SCALE.

Шкала Действие аналогично команде SCALE. В динамическом блоке ссылка, действие масштабирования вызывает масштабирование набора выбора блока когда связанный параметр редактируется путем перемещения ручек или с помощью палитру свойств.

В динамике определение блока, вы связываете действие масштабирования со всем параметр, а не ключевой момент параметра. Вы можете связать действие масштабирования с любым из следующих параметров:

• Линейный
• Полярный
• XY

После связывая действие масштаба с параметром, вы связываете действие с набором выбора геометрии.

Укажите Тип базовой точки для действия весов

Весы действие имеет свойство под названием Базовый тип . С это свойство, вы указываете, является ли базовая точка для шкалы коэффициент зависит от или не зависит от .

Если основание тип зависит, объекты в наборе выбора масштабируются относительно к базовой точке параметра, с которым выполняется масштабирование связанные. В следующем примере действие масштабирования связано с параметром XY. Базовый тип действия масштаба зависит. базовая точка параметра XY расположена в левом нижнем углу прямоугольника. Когда пользовательская ручка используется для масштабирования блока, масштабируется относительно нижнего левого угла прямоугольника.

Если база тип независим (отображается в редакторе блоков в виде маркера X), вы указать базовую точку, независимую от параметра, с которым действие масштаба связано. Объекты в наборе выбора будут масштаб относительно этой независимой базовой точки, которую вы укажете. в В следующем примере действие масштабирования связано с XY параметр. Базовый тип масштабирования является независимым.