Резиновый дизайн
Всем привет,
Задача тривиальная. Есть три дива, идут слева направо: левый сайдбар, див с контентом, правый сайдбар. Хочу чтобы сайт тянулся на всю область. Есть вариант задать 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.Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
Цитата:
Цитата:
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 07:26. |