Jump to content
  • 0

Проблемища при масштабировании

monsterr

Asked by monsterr,

 Share

Question

monsterr Explorer

monsterr

Posted
Posted (edited)

При масштабировании ("ctrl"+"-") блоки съезжают друг под друга. Это такой баг браузеров и стоит забить, или же нужно делать как-то по-другому?

При смене же разрешения ничего не смещается. Ну не переношу, когда вёрстка разваливается при масштабировании :) Это не первый момент с float в моих работах, раньше забивал, теперь хочется понять, почему так происходит? спасибо заранее

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style>
		html,body, div,ul,li {
			margin: 0;
			padding: 0;
		}
		.content {
			margin: 0 auto;
			width: 644px;
			overflow: hidden;
			background-color: #CCC;
		}
		.list {
			list-style-type: none;
		}
		.list li {
			float: left;
			width: 320px;
			border: 1px solid #aaa;
			background-color: #FFF;
		}
	</style>
</head>
<body>
	<div class="content">
		<ul class="list">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</body>
</html>

Edited by monsterr
Link to comment
Share on other sites

21 answers to this question

Recommended Posts

  • 0
monsterr Explorer

monsterr

Posted
  • Author
Posted

n1Fdp77k.png

Самое интересное, что чем больше пикселей убираешь, тем под большее разрешение перестаёт появляться смещение. Пару пикселей убрать - для 1280x1024 становится нормально, и так далее.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  On 5/4/2011 at 1:44 PM, monsterr said:

Нет, это не помогает(. У тебя, как я понял, всё нормально везде? без косяков?

Как у других? проверьте кто-нибудь пожалуйста

У меня тоже так же как и у тебя. Я прописал ширину в em (главного контейнера) и всё стало отлично.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.

Link to comment
Share on other sites
  • 0
Temiks Explorer

Temiks

Posted
Posted

а нужно вообще заботится о том что когда масштаб меняешь все расползается? ведь все должно хорошо смотреться при 100%, а если пользователь ставит масштаб больше или меньше и у него все расползается, то это его проблемы, пусть не уменьшает и не увеличивает масштаб, а если у него со зрением плохо, то для этого есть спец программы, например та же лупа

Link to comment
Share on other sites
  • 0
monsterr Explorer

monsterr

Posted
  • Author
Posted
  On 5/4/2011 at 2:34 PM, psywalker said:

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.

Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.

Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.

В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём :)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  On 5/4/2011 at 3:33 PM, monsterr said:
  On 5/4/2011 at 2:34 PM, psywalker said:

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.

Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.

Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.

В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём :)

Попробуй отказаться от бордера, засунь в ЛИ дивы и им уже повесь бордер и отступы.

Link to comment
Share on other sites
  • 0
monsterr Explorer

monsterr

Posted
  • Author
Posted
  On 5/4/2011 at 4:44 PM, psywalker said:
  On 5/4/2011 at 3:33 PM, monsterr said:
  On 5/4/2011 at 2:34 PM, psywalker said:

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.

Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.

Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.

В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём :)

Попробуй отказаться от бордера, засунь в ЛИ дивы и им уже повесь бордер и отступы.

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

А ты с таким в своей практике не встречался? Просто это обычный каталог, как товары в интернет-магазине, странно, что до меня никто не сталкивался с этим.

А в общем спасибо за помощь!

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  On 5/4/2011 at 5:03 PM, monsterr said:
  On 5/4/2011 at 4:44 PM, psywalker said:
  On 5/4/2011 at 3:33 PM, monsterr said:
  On 5/4/2011 at 2:34 PM, psywalker said:

Проблема в отступах, убери марджины ещё + сделай все измерения на em. И вообще как ты их рассчитываешь, от чего пляшешь, непонятно, если у тебя в боди не стоит вообще шрифта.

Отступы здесь не при чём, разные ситуации рассматривал. Но для наглядности, упростил и заменил код в первом посте.

Насчёт размера шрифта, брал по умолчанию 16. Но если указать вручную, то погоды это не сделает.

В общем, я нашёл причину: виноват border. Без него всё отлично (ширину разумеется дополнял), с ним же - не правильно масштабируется страница. Отказаться от него никак нельзя, да уж, придётся мне помозговать над обходным путём :)

Попробуй отказаться от бордера, засунь в ЛИ дивы и им уже повесь бордер и отступы.

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

А ты с таким в своей практике не встречался? Просто это обычный каталог, как товары в интернет-магазине, странно, что до меня никто не сталкивался с этим.

А в общем спасибо за помощь!

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

Если принципиально важно для тебя, то сделай любой ценой.

Link to comment
Share on other sites
  • 0
Serlutin Explorer

Serlutin

Posted
Posted (edited)
  On 5/4/2011 at 2:46 PM, Temiks said:

а нужно вообще заботится о том что когда масштаб меняешь все расползается?

Нужно. Может быть не обязательно для всех размеров, но хотя бы 80%-120% должны выглядеть нормально.

А проблема вот в чём. При масштабировании, у FF иногда почему-то случается глюк с border ( а может и не глюк) и он превращается из 1px в 2px. Причём в FireBug'е это не показывается. Поэтому у вас при масштабировании появляется лишних 4px, и всё расползается.

Edited by Serlutin
Link to comment
Share on other sites
  • 0
amuller Explorer

amuller

Posted
Posted

У меня похожая проблема. При уменьшении масштаба появляется белая горизонтальная полоса, не понятно, откуда она берется...у меня бордеров горизонтальных вообще нет. Может, кто-нибудь что-то посоветует? Вот страница http://www.amuller.500mb.net/verstka2/index.html Вообще можно подложить под низ темный фон, но не хочется создавать для этого лишний див. По вертикали тоже при уменьшении съезжал блок, я просто уменьшила ширину на 1 пиксель. Вообще странно..если б это был какой-то глюк FF, то можно было бы так и оставить. Но так показывает везде(FF, Safari, Опера).Только в IE нормально.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  On 6/1/2011 at 1:14 PM, amuller said:

У меня похожая проблема. При уменьшении масштаба появляется белая горизонтальная полоса, не понятно, откуда она берется...у меня бордеров горизонтальных вообще нет. Может, кто-нибудь что-то посоветует? Вот страница http://www.amuller.500mb.net/verstka2/index.html Вообще можно подложить под низ темный фон, но не хочется создавать для этого лишний див. По вертикали тоже при уменьшении съезжал блок, я просто уменьшила ширину на 1 пиксель. Вообще странно..если б это был какой-то глюк FF, то можно было бы так и оставить. Но так показывает везде(FF, Safari, Опера).Только в IE нормально.

Ну тогда лови решение подруга:

div.header {
    background: url("../i/logo.png") no-repeat scroll 0 0 transparent;
    font: 13px 'Trebuchet MS',Arial,sans-serif;
    height: 194px;
    overflow: hidden;

Link to comment
Share on other sites
  • 0
amuller Explorer

amuller

Posted
Posted (edited)
  On 6/1/2011 at 1:18 PM, psywalker said:
  On 6/1/2011 at 1:14 PM, amuller said:

У меня похожая проблема. При уменьшении масштаба появляется белая горизонтальная полоса, не понятно, откуда она берется...у меня бордеров горизонтальных вообще нет. Может, кто-нибудь что-то посоветует? Вот страница http://www.amuller.500mb.net/verstka2/index.html Вообще можно подложить под низ темный фон, но не хочется создавать для этого лишний див. По вертикали тоже при уменьшении съезжал блок, я просто уменьшила ширину на 1 пиксель. Вообще странно..если б это был какой-то глюк FF, то можно было бы так и оставить. Но так показывает везде(FF, Safari, Опера).Только в IE нормально.

Ну тогда лови решение подруга:

div.header {
    background: url("../i/logo.png") no-repeat scroll 0 0 transparent;
    font: 13px 'Trebuchet MS',Arial,sans-serif;
    height: 194px;
    overflow: hidden;

Спасибо!Теперь все как надо)А можешь хотя бы в двух словах объяснить, почему оно так? При чем тут overflow:hidden и хэдер..проблема ж по-моему не с хэдером, а ниже в блоке content. Я знаю, что overflow:hidden задает новый контекст форматирования, наверно с этим как-то связано? но все равно не понятно(

Edited by amuller
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept