Резиновый дизайн
Всем привет,
Задача тривиальная. Есть три дива, идут слева направо: левый сайдбар, див с контентом, правый сайдбар. Хочу чтобы сайт тянулся на всю область. Есть вариант задать width для всех трех в процентах, но я не хочу чтобы сайдбары тянулись. Нужно, чтобы сайдбары имели фиксированную ширину. Например, я задал width для сайдбаров = 200px, как теперь сделать так, чтобы средний див занимал всю область между сайдбарами?? Если поставить ему width=100%, то понятное дело, он занимает всю область контейнера, и всё разъежается. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
body {
margin: 0;
min-width: 600px;
}
header {
height: 80px;
background: #cff;
}
.wrapper {
float: left;
width: 100%;
margin-left: -200px;
background: #fcc;
}
.wrapper .inner-wrapper {
float: right;
width: 100%;
margin-left: -400px;
background: #fcf;
}
.wrapper article {
margin-left: 400px;
background: #fee;
}
.wrapper .sidebar-1 {
float: left;
width: 200px;
margin-left: 200px;
background: #cfc;
}
.sidebar-2 {
float: right;
width: 200px;
background: #ccf;
}
footer {
clear: both;
height: 80px;
background: #ffc;
}
</style>
</head>
<body>
<header>header</header>
<div class="wrapper">
<div class="inner-wrapper">
<article>content content content content content content content content content content content content content content content content content content content content content content content content content content content content</article>
</div>
<aside class="sidebar-1">sidebar 1</aside>
</div>
<aside class="sidebar-2">sidebar 2</aside>
<footer>footer</footer>
</body>
</html>
|
Я обычно делаю так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
body {
margin: 0;
min-width: 600px;
}
.header {
height: 50px;
background: #cff;
}
.right {
float: right;
width: 200px;
background: #ccf;
}
.left {
width: 200px;
float: left;
background: #cfc;
}
.wrapper {
padding: 0 200px 0 200px;
background: #fcc;
}
.content {
background: #fee;
}
.footer {
height: 50px;
background: #ffc;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="left">left block</div>
<div class="right">right block</div>
<div class="wrapper">
<div class="content">
content content content content content content content content content content content content content content content content content content content content content content content content content content content content
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
Этот метод мне почему то кажется куда приятнее :) |
SEOшники загрызут за такое расположение контента ;)
|
Цитата:
У вас какие-то злые сеошники. В обоих вариантах грызть особо не за что. На сайте главное контент, а верстка не должна содержать мусор. В теоретическом аспекте твой вариант лучше, на практике зависит от контента. Посмотреть на эффект применения <aside> и <article> у меня пока что не было возможности. Опять же применение этих тэгов делает место расположение их на странице практически любым, главное чтобы они там были и желательно в одинаковых местах. Мне кажется что оптимизировать нужно там, где есть что оптимизировать. Если заглядывать в будущее, то вариант Octane мне больше нравиться, как минимум по тому, что пользователи увидят сначала Content, а потом всякие меню и рюшечки. devote, Зачем использовать html5 и не использовать его преимущества? |
Цитата:
|
Цитата:
И да добавлю, в первую очередь я должен думать как мне заработать больше денег, а не о том как сделать так что бы сеошники их зарабатывали проще и быстрее. Я работаю в первую очередь для себя, и не намерен тратить время на то что бы какой-то сеошник щелкнул двумя пальцами и срубил денег, так как за него сделали всю грязную работу. А он получает сливки... Лично я на позиции программиста... Мой вариант мне нравиться тем, что каждый блок имеет свой отдельный элемент и не привязан к к другому элементу... То-есть любой блок легко отключить, убрать, поместить в другой файл и т.д. ИМХО |
Цитата:
document.createElement("header");
document.createElement("footer");
document.createElement("aside");
…
и добавить display:block для новых элементов, во всех остальных актуальных браузерах работает без костылей. Конечно для конкретных проектов надо оценивать аудиторию и исходя из этого выбирать используемые технологии, но на многих проектах уже можно использовать HTML5 и забить на пользователей IE<9 с отключенным JavaScript.Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
|
И на последок добавлю, человек попросил из трех дивов сделать резинку, заметьте не из других тегов а именно из дивов.
Цитата:
Прикатывает человек жигули в автосалон и говрит почините мне дверь. В автосалоне делают дверь и не ставят на дверь ручку для ее открытия. Приходит заказчик и говорит "как я буду ее открывать?" В ответ получит "Ну вы можете заказать у нас внедрение автооткрытия". Тоесть по сути получается приделать костыль. Как упомянул об этом Octane, не думаю что заказчику это понадобится и/или понравиться. Или другой пример, человек покупает молоко, ему дают его в кружке, говоря о том что так его проще пить... Это не верная логика. Если вам хочется быть идеалистом, ваше право. Я читаю спецификации раз в месяц ища что-то новое, и делаю для себя удобные решения. (Заметим сразу для себя). Которые будут работать в том что есть на сегодняшний день... Если завтра вдруг исчезнет все то что не поддерживает все то новое что есть на данный момент, то буду делать иначе. Но на сегодняшний день и в ближайшие как минимум два года я буду делать так как работает везде. Исключения будут лишь тогда когда об этом будет описано в ТЗ. Так что все мои решения касаются лишь меня и я никоем образом их не навязываю. Мне сегодня удобнее так. Завтра может все измениться, вот тогда и буду думать о других вариантах. |
Вообще HTML5 на эту верстку никак не влияет, всего-лишь новые теги, забудем про него.
Мой вариант лучше тем, что более важная информация заведомо будет находится в начале документа и такой макет удобнее трансформировать. http://habrahabr.ru/blogs/webdev/125247/ |
Цитата:
|
Если вытянуть макет в одну колонку для мобильного браузера, то в твоем варианте пользователю придется долго тереть пальцем по экрану, пока не до скролит до контента, так понятнее?
|
Цитата:
|
devote,
Цитата:
Тебе никто ничего не навязывает, не хочешь понимать, гни линию дальше. Ты, кстати, сам не читаешь то, что тебе пишут. |
Цитата:
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
Вот: Screenshot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<!--[if lt IE 9 ]>
<script>
(function ($) {
$("header");
$("footer");
$("article");
$("section");
$("aside");
$("hgroup");
}(document.createElement));
</script>
<![endif]-->
<style>
header, footer, section, article, aside, hgroup {
display: block;
}
header {
background: #cff;
}
.wrapper {
background: #fcc;
}
.wrapper .inner-wrapper {
background: #fcf;
}
.wrapper article {
background: #fee;
}
.wrapper .sidebar-1 {
background: #cfc;
}
.sidebar-2 {
background: #ccf;
}
footer {
background: #ffc;
}
@media only screen and (min-width: 240px) {
body {
margin: 0;
}
header {
height: 80px;
}
.wrapper {
float: left;
width: 100%;
margin-left: -200px;
}
.wrapper .inner-wrapper {
float: right;
width: 100%;
margin-left: -400px;
}
.wrapper article {
margin-left: 400px;
}
.wrapper .sidebar-1 {
float: left;
width: 200px;
margin-left: 200px;
}
.sidebar-2 {
float: right;
width: 200px;
}
footer {
clear: both;
height: 80px;
}
}
</style>
</head>
<body>
<header>header</header>
<div class="wrapper">
<div class="inner-wrapper">
<article>content content content content content content content content content content content content content content content content content content content content content content content content content content content content</article>
</div>
<aside class="sidebar-1">sidebar 1</aside>
</div>
<aside class="sidebar-2">sidebar 2</aside>
<footer>footer</footer>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 12:15. |