Jump to content
  • 0

<body> или отдельный <div>

cmndr_alexgreen

Asked by cmndr_alexgreen,

 Share

Question

cmndr_alexgreen Explorer

cmndr_alexgreen

Posted
Posted

Уважаемые профессионалы, прошу вашего разъяснения:

Общепринято, для выравнивания содержимого страницы по центру - создавать обертку страницы (<div id="обертка">) и задавать ему автоматическое выравнивание по горизонтали.

Я попробовал выровнять содержимое страницы по горизонту, без обертки - не посредственно внутри тега <body>. Задал ему 


  position: relative;
  margin: 40px auto;
  padding: 0;
  width: 970px;

и все работает как и с оберткой.

Возможно я просто еще не наткнулся на косяки, или это уже просто специфика нового html5, пока не понял.

Поясните насколько "кошерно" работать в таком стиле с боди.

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Mirovich Explorer

Mirovich

Posted
Posted (edited)

Выравнивание по вертикали?

Данный прием ... создавать обертку страницы (<div id="обертка">) и ... используется как правило (ну или просто на мой взгляд) для "резины" с указанием min-width и max-width.

В вашем примере ...не посредственно внутри тега <body>... вы просто задали отступы по бокам и зачем то ограничили высоту. К выравниванию в данном примере на мой взгляд отступы отношения не имеют, и вообще имеют смысл только для красоты сайта с фиксированной шириной.

Я не профессионал, просто поделился мнением. Может у кого то другой взгляд на этот прием.

Edited by Mirovich
Link to comment
Share on other sites
  • 0
deadrash Explorer

deadrash

Posted
Posted

Да можно хоть html использовать, даже head можно вывести как элемент на страницу и задать ему стилевое оформление. head задизайнить как шапку сайта, а меню сайта сделать из вложенных в head link, meta, title и script сделать кнопки меню под хедером, которые будут нажиматься через яваскрипт. И того весь сайт можно сверстать ничего не вкладывая в body. Это сделать можно. Дело вкуса, удобства, ну и соответственно - неудобства.

Link to comment
Share on other sites
  • 0
cmndr_alexgreen Explorer

cmndr_alexgreen

Posted
  • Author
Posted

Выравнивание по вертикали?

Данный прием ... создавать обертку страницы (<div id="обертка">) и ... используется как правило (ну или просто на мой взгляд) для "резины" с указанием min-width и max-width.

В вашем примере ...не посредственно внутри тега <body>... вы просто задали отступы по бокам и зачем то ограничили высоту. К выравниванию в данном примере на мой взгляд отступы отношения не имеют, и вообще имеют смысл только для красоты сайта с фиксированной шириной.

Я не профессионал, просто поделился мнением. Может у кого то другой взгляд на этот прием.

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

Да можно хоть html использовать, даже head можно вывести как элемент на страницу и задать ему стилевое оформление. head задизайнить как шапку сайта, а меню сайта сделать из вложенных в head link, meta, title и script сделать кнопки меню под хедером, которые будут нажиматься через яваскрипт. И того весь сайт можно сверстать ничего не вкладывая в body. Это сделать можно. Дело вкуса, удобства, ну и соответственно - неудобства.

Я понимаю, что можно и в голове можно сайт сверстать, но тут вопрос заключался в подходе и наличии какого-нибудь "тайного смысла". Поскольку 90% верстки которой я наблюдаю, делают именно через обертку, а тегу боди как правило отводиться пара тройка стилистических параметров для странице но не позиционирование.

Link to comment
Share on other sites
  • 0
sashakee Explorer

sashakee

Posted
Posted (edited)

Вот одна проблемка. Старые версии ie игнорируют margin 0 auto. И все съедет к левой стороне. :)

Вторая проблемка. Лень описывать. Интуитивно понятно, что сайту не задашь резиновый фон, хедер, футер.

Edited by sashakee
Link to comment
Share on other sites
  • 0
cmndr_alexgreen Explorer

cmndr_alexgreen

Posted
  • Author
Posted

Вот одна проблемка. Старые версии ie игнорируют margin 0 auto. И все съедет к левой стороне. :)

Вторая проблемка. Лень описывать. Интуитивно понятно, что сайту не задашь резиновый фон, хедер, футер.

На старые версии принципиально "фиолетово", хватит поддерживать костыли.

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

Link to comment
Share on other sites
  • 0
sashakee Explorer

sashakee

Posted
Posted
На старые версии принципиально "фиолетово", хватит поддерживать костыли

Если верстать для себя. Скажи это заказчикам:) Если фиолетово, зачем тему создавать? Вообще лучше сверстать пару тройку макетов и вопросы отпадут. ^_^

Link to comment
Share on other sites
  • 0
deadrash Explorer

deadrash

Posted
Posted (edited)

Я понимаю, что можно и в голове можно сайт сверстать, но тут вопрос заключался в подходе и наличии какого-нибудь "тайного смысла". Поскольку 90% верстки которой я наблюдаю, делают именно через обертку, а тегу боди как правило отводиться пара тройка стилистических параметров для странице но не позиционирование.

Думаю ответ кроется в трёх буквах - CMS.

Edited by deadrash
Link to comment
Share on other sites
  • 0
Mirovich Explorer

Mirovich

Posted
Posted (edited)
Это делаеться для позиционирования сайта в центре страницы

Во первых это делается для отображения страницы в центре окна браузера.

отступы сверху это просто частный случай, выдернутый мною из контекста готовых стилей

Смысл отступа сверху? Где вы видели отступы сверху? Опять же имеет смысл только как дизайнерское решение. Повтрюсь -

смысл только для красоты сайта
для каких то своеобразных решений...
наличии какого-нибудь "тайного смысла".

Смысл хотя бы в том, что в ходе разработки легче применять свойства css к элементам у которого родитель div-обертка а не body. А так же отдельно для body и отдельно для html.

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

Это моё личное мнение, может ошибаюсь или заблуждаюсь.

Edited by Mirovich
  • Like 1
Link to comment
Share on other sites
  • 0
Mirovich Explorer

Mirovich

Posted
Posted (edited)

cmndr_alexgreen

Ну воткнул ты мне минус, легче стало?

Конечно минус в репутацию воткнуть легко.

Легче чем признаться себе и гордо заявить другим - Я упертый как баран, и буду писать как мне заблагорассудится. На ваше мнение мне ...ть с высокой колокольни! Вообще то я и не узнать сюда зашел, а поспорить!

Прошу прошения у участников форума за грубые высказывания.

Edited by Mirovich
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Старые версии ie игнорируют margin 0 auto.

Последней такой версией была 5.5, потерявшая актуальность еще где-то в 2004-м. Всё более новое прекрасно понимает эту запись (если не забыть доктайп, конечно).

Главная проблема body-обертки — сторонние скрипты, навешивающие разные красивости (модальные окна с затемняющим слоем, прижатые к краю экрана как бы тулбары и т.п.). Очень часто подобные штуки привязываются к координатам body, а не documentElement-а, и если body отстает от краев окна, эти штуки тоже ведут себя не совсем ожидаемым образом. И вообще поддержка, особенно в командной работе. А для себя либо в маленьком проекте, где таких скриптовых наворотов заведомо не планируется (либо используется своё/проверенное решение без «сюрпризов»), имхо, вполне можно использовать. Как и все остальные фичи CSS...

Link to comment
Share on other sites
  • 0
deadrash Explorer

deadrash

Posted
Posted

cmndr_alexgreen

Ну воткнул ты мне минус, легче стало?

Минус воткнул я. Вы, прежде чем делать такие безапелляционные утверждения, убедитесь что правильно поняли вопрос.

Вообще то я и не узнать сюда зашел, а поспорить!

Прошу прошения у участников форума за грубые высказывания.

Да это ладно, понятно. Вы только полегче относитесь к минусам.
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
×
×
  • 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