CSS Layout, Vis Studio 2005 и AJAX Tab Taber

Question

В веб-приложении на C #, VS 2005 (я избегаю 2008 года, потому что считаю, что с IDE сложно иметь дело), ​​я попадаю в рагу макета.

Я перехожу от абсолютного позиционирования к относительному позиционированию CSS.

Я бы хотел разделить экран на четыре блока: верхний (полоса заголовка), средний левый (сложенное меню), средний правый (содержимое - здесь контейнер вкладок AJAX) и нижний (полоса нижнего колонтитула) со всеми 4 блока расположены относительно, но элементы управления в среднем правом (контентном) блоке расположены абсолютно относительно верхнего левого угла блока. Приятным побочным преимуществом было бы то, что в окне дизайна IDE все элементы управления отображались бы так, как они на самом деле будут отображаться, но я сомневаюсь, что это возможно. Среда IDE размещает все элементы управления внутри панелей вкладок относительно верхнего левого края окна дизайна; довольно беспорядок.

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

Во всяком случае, мой CSS еще не подходит для этой задачи - кто-нибудь знает хорошую статью, книгу, блог и т. Д., Где обсуждается CSS, как он реализован в ASP.NET, и который может включать пример с Управление вкладками AJAX? Любая помощь будет оценена.

Большое спасибо

Майк Томас

Answer 1

Я ценю, что это, вероятно, не исчерпывающий ответ, который вы хотели, но это может помочь ...

Чтобы содержимое правого блока было абсолютно позиционировано относительно его верхнего левого угла, вам просто нужно придать элементу контейнера стиль position: relative;. Это превратит этот элемент в содержащий блок, в результате чего все абсолютно позиционированные дочерние элементы будут располагаться на его границах. Вот полезная статья на эту тему: CSS Positioning . Одна из проблем, связанных с элементами управления ASP.NET и, в частности, набором инструментов AJAX Control Toolkit, который звучит так, как будто вы используете его, заключается в том, что он выдает правильную разметку. Лучше всего использовать элементы управления, которые дают вам 100% контроль над разметкой, иногда это означает создание сложных UserControl s или добавление небольших кусочков неприятных скриптов в ваш файл aspx.

Что касается правильной визуализации среды IDE, даже не беспокойтесь. Я не использовал представление проекта в VS в течение почти двух лет, и на то есть веская причина: он отстой и основан на IE. Никакая IDE никогда не даст вам полноценного рендеринга, как в реальном тесте, так что лично я не беспокоюсь. Я знаю, что новые инструменты MS имеют гораздо лучшую поддержку для этого, хотя они все еще не совершенны и не так надежны, как настоящий браузер (очевидно, вы хотите использовать Firefox здесь!).

Answer 2

Насколько я знаю, в ASP.NET нет ничего конкретного, и вы правы (по крайней мере, в 2008 году) в том, что не используете ссылочные таблицы стилей.

Однако они могут быть вам полезны:

http://www.positioniseverything.net/ - Position is Everything, отличный ресурс CSS.

http://www.alistapart.com/topics/code/css/ - раздел CSS List List, советы по конкретным методам.

По сути, вам нужны 4 основных элемента: заголовок, нижний колонтитул, меню, контент. Позиционируйте каждый элемент div, как вам нравится, и затем настройте положение своих дочерних элементов, которое большинство браузеров будет рассматривать как «положение относительно моего родителя» (если оно не абсолютное, IIRC).

Answer 3

Большое спасибо за все ответы - здесь есть что почитать, но то, через что я прошел, помогло мне преодолеть нынешний горб. Мне было гораздо проще не использовать VS 2005 IDE для выравнивания блоков в пользу Style Master, но я все еще ищу другие сторонние инструменты перед покупкой.

Большое спасибо, Майк Томас

Answer 4

Как говорит Джефф, в ASP.NET нет ничего конкретного относительно того, как реализован CSS. Что касается стилизации ваших форм с помощью CSS, прочитайте их, чтобы дать вам несколько идей:

• http://www.sitepoint.com/article/fancy-form-design-css/
• http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
• http://www.quirksmode.org/css/forms.html