Каков механизм, который предотвращает перемещение различных разделов на странице при изменении размера браузера? - PullRequest
Новая
       12

Каков механизм, который предотвращает перемещение различных разделов на странице при изменении размера браузера?

3 голосов
/ 16 апреля 2009

На этом веб-сайте, когда вы уменьшаете окно браузера, сначала пропадают пустое пространство слева и справа, после чего происходит сужение правой панели, а затем основной панели контейнера. Недавно я начал использовать ASP.NET MVC, и в моем тестовом случае мои контейнеры опускаются ниже других контейнеров, когда я изменяю размер окна браузера. Я использую страницу site.master с левой, центральной и правой частью как часть тела. Есть ли в css атрибут, который диктует поведение или элемент HTML? Я просмотрел исходный код главной страницы этого сайта и посмотрел на CSS, но ничего очевидного не показалось мне, как это контролируется.

Ответы [ 3 ]

3 голосов
/ 16 апреля 2009

Одна из замечательных особенностей веб-разработки заключается в том, что чаще всего, когда вы видите сайт и думаете «как они это сделали», очень легко посмотреть на код и выяснить его, а также проверить его - Такие инструменты, как Firebug для Firefox, Инструменты разработчика в IE 8 (F12) и Chrome будут отображать красиво отформатированный исходный код и CSS и позволят вам изменить его на месте.

В случае SO основная часть сайта содержится в div с классом «container», правила стиля для «container»: 

.container {
  margin: 0 auto;
  text-align: left;
  width: 950px;
}

Ключевым моментом, на который мы здесь обращаем внимание, является то, что этот класс имеет фиксированную ширину - 950 пикселей, а поля установлены (расширенно): 

margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;

Установка левого и правого полей на «auto» приводит к центрированию div по краям его контейнера и позволяет им расширяться до необходимой ширины после того, как контейнер занял требуемые 950px.

Внутри контейнера div у вас есть div с идентификатором «content» (без стилевых правил), а затем два div: «mainbar» и «sidebar» со стилями: 

#mainbar {
  float: left;
  margin-bottom: 40px;
  width: 715px;
}

#sidebar {
  float: right;
  width: 220px; /* this is also set in the "style" attribute *
}

Эти левый и правый плавающие элементы - это то, что позиционирует бары в нужных местах.

Другое удобное правило CSS: 

clear

это может быть установлено на "и то, и другое", "левое" или "правое", и в основном сбрасывает поплавки на контейнерах.

Однако, похоже, что вы после того, что часто называют « Святой Грааль CSS » (Рик указывает, что в этом есть ошибка с IE7, см. здесь для исправления ) по уважительной причине: три столбца, по крайней мере, один из них гибкий.

Другие примеры полностью гибких макетов:

1 голос
/ 16 апреля 2009

Это проблема с версткой HTML. Вероятно, макет asp.net mvc не очень хорошо сделан. Поищите в сети « макет столбца css ». Существует множество примеров того, как добиться хорошего макета. См., Например, В поисках Святого Грааля от МЭТЬЮ ЛЕВИНА для хорошего обсуждения техники размещения трех колонок.

1 голос
/ 16 апреля 2009

Это может быть комбинация с плавающей точкой, положением и полем и тем, как вы устанавливаете эти элементы. Без URL будет сложно точно сказать, в чем проблема или как ее исправить.

Для начала я бы посоветовал взглянуть на YUI CSS Grids или 960.gs (960 Grid System) и один из различных файлов reset.css, плавающих там. У YUI есть очень хороший. Файл reset.css заставляет ваш css выглядеть и работать одинаково во всех браузерах, а сеточные системы дают вам отправную точку для разработки вашего сайта. Они также дают вам уверенность, что то, что вы разрабатываете, будет выглядеть и работать одинаково во всех браузерах.

http://developer.yahoo.com/yui/grids/ http://960.gs/

...