17.08.2011, 23:28
|
|
Аспирант
|
|
Регистрация: 24.05.2011
Сообщений: 40
|
|
|
Резиновый дизайн
Всем привет,
Задача тривиальная.
Есть три дива, идут слева направо: левый сайдбар, див с контентом, правый сайдбар.
Хочу чтобы сайт тянулся на всю область.
Есть вариант задать width для всех трех в процентах, но я не хочу чтобы сайдбары тянулись. Нужно, чтобы сайдбары имели фиксированную ширину.
Например, я задал width для сайдбаров = 200px, как теперь сделать так, чтобы средний див занимал всю область между сайдбарами??
Если поставить ему width=100%, то понятное дело, он занимает всю область контейнера, и всё разъежается.
|
|
18.08.2011, 01:17
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
<!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>
Последний раз редактировалось Octane, 18.08.2011 в 01:34.
|
|
18.08.2011, 02:17
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
Я обычно делаю так:
<!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>
Этот метод мне почему то кажется куда приятнее 
Последний раз редактировалось devote, 18.08.2011 в 03:11.
|
|
18.08.2011, 04:02
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
SEOшники загрызут за такое расположение контента  |
|
18.08.2011, 12:21
|
 |
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
Сообщение от Octane
|
|
SEOшники загрызут за такое расположение контента
|
Значение расположения контента не всегда играет роль для поисковиков. А точнее я бы выразился так, после трех месяцев продвижения(не обязательно сеошного) вообще без разницы, контент может быть даже в footer-е.
У вас какие-то злые сеошники. В обоих вариантах грызть особо не за что. На сайте главное контент, а верстка не должна содержать мусор. В теоретическом аспекте твой вариант лучше, на практике зависит от контента.
Посмотреть на эффект применения <aside> и <article> у меня пока что не было возможности. Опять же применение этих тэгов делает место расположение их на странице практически любым, главное чтобы они там были и желательно в одинаковых местах.
Мне кажется что оптимизировать нужно там, где есть что оптимизировать. Если заглядывать в будущее, то вариант Octane мне больше нравиться, как минимум по тому, что пользователи увидят сначала Content, а потом всякие меню и рюшечки.
devote,
Зачем использовать html5 и не использовать его преимущества?
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
18.08.2011, 12:29
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Gozar
|
|
Зачем использовать html5 и не использовать его преимущества?
|
Все элементарно, когда исчезнет ИЕ ниже 9-ой версии, вот тогда и можно будет использовать теги HTML5 но щас не вижу смысл его использовать. ИЕ их не понимает, и вместо верстки получается каша. |
|
18.08.2011, 12:33
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Octane
|
|
SEOшники загрызут за такое расположение контента
|
Всем не угодишь, и это проблемы сеошников... Хотят идеально, пусть пишут сами сайты.. Мы программисты а не исполнители желаний. Любой сайт с любой версткой даже с помойной версткой можно раскрутить и выставить на первые места в поисковиках. И знаю это не по наслышке... Знаком с некоторыми сеошниками, они продвигаю сайты любого типа... Неважна как сверстан. И причем сайты всегда на первых местах... Так что считаю что это глупый аргумент.
И да добавлю, в первую очередь я должен думать как мне заработать больше денег, а не о том как сделать так что бы сеошники их зарабатывали проще и быстрее. Я работаю в первую очередь для себя, и не намерен тратить время на то что бы какой-то сеошник щелкнул двумя пальцами и срубил денег, так как за него сделали всю грязную работу. А он получает сливки... Лично я на позиции программиста... Мой вариант мне нравиться тем, что каждый блок имеет свой отдельный элемент и не привязан к к другому элементу... То-есть любой блок легко отключить, убрать, поместить в другой файл и т.д. ИМХО
Последний раз редактировалось devote, 18.08.2011 в 12:40.
|
|
18.08.2011, 14:04
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
|
Сообщение от devote
|
|
Все элементарно, когда исчезнет ИЕ ниже 9-ой версии, вот тогда и можно будет использовать теги HTML5 но щас не вижу смысл его использовать. ИЕ их не понимает, и вместо верстки получается каша.
|
Для IE7,8 достаточно выполнить простенький скрипт
document.createElement("header");
document.createElement("footer");
document.createElement("aside");
…
и добавить display:block для новых элементов, во всех остальных актуальных браузерах работает без костылей. Конечно для конкретных проектов надо оценивать аудиторию и исходя из этого выбирать используемые технологии, но на многих проектах уже можно использовать HTML5 и забить на пользователей IE<9 с отключенным JavaScript.
|
Сообщение от devote
|
|
Всем не угодишь, и это проблемы сеошников... Хотят идеально, пусть пишут сами сайты.. Мы программисты а не исполнители желаний…
|
|
Сообщение от devote
|
|
И да добавлю, в первую очередь я должен думать как мне заработать больше денег, а не о том как сделать так что бы сеошники их зарабатывали проще и быстрее…
|
Делать на "отебитесь" не мой вариант Верстальщик не макетонарезочный аппарат, иногда надо думать, как сделать лучше.
|
Сообщение от Gozar
|
|
Мне кажется что оптимизировать нужно там, где есть что оптимизировать. Если заглядывать в будущее, то вариант Octane мне больше нравиться, как минимум по тому, что пользователи увидят сначала Content, а потом всякие меню и рюшечки.
|
Ну и через media queries для устройств с небольшим дисплеем будет удобно в одну колонку сайт вытянуть.
|
|
18.08.2011, 14:08
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
Сообщение от devote
|
|
Все элементарно, когда исчезнет ИЕ ниже 9-ой версии, вот тогда и можно будет использовать теги HTML5
|
Я спрашивал зачем ты используешь такой DOCTYPE, если не собираешься использовать теги html5?
|
Сообщение от devote
|
<!DOCTYPE html>
|
А вот следующее похоже на полное отсутствие понимания зачем людям сайт и требование к нему:
|
Сообщение от devote
|
|
Всем не угодишь, и это проблемы сеошников... Хотят идеально, пусть пишут сами сайты..
|
Я работал с большим количеством программистов, которые делали прежде чем думали для кого они это делают. "Клепатели сайтов" даже джумлу по человечески не в состоянии использовать, хотя при правильном подходе она становиться вполне человеческим инструментом. Но ведь нет ты главный кто пишет сайты, это ты знаешь лучше всех что нужно заказчику - такой твой подход?
|
Сообщение от devote
|
|
Знаком с некоторыми сеошниками, они продвигаю сайты любого типа... Неважна как сверстан. И причем сайты всегда на первых местах... Так что считаю что это глупый аргумент.
|
Только не нужно аргументов, мне знакомый рассказал, это и есть понаслышке. Не по наслышке это когда ты сам этим занимаешься.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
18.08.2011, 14:14
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Octane
|
|
Для IE7,8 достаточно выполнить простенький скрипт
|
Вот именно, все к этому и идет... Зачем мне пришпандоливать Костыли, если проще сделать так как работает без костылей... Ради сео? Ну флаг им в руки. Хотят отделить блоки, сделают это сами, учитывая то что они и так после программиста там шурую не хило. Лично мне костыли не нужны, и страдать ради СЕО нафиг нужно... Скажу лишь одно, сколько сеошников столько и мнений, ни один сеошник не знает как ведут себя поисковые системы, и все их слова в основном основаны на информации найденной в сети, которую так же пишут те кто понятия не имеет о том как все работает... Так что моя политика такова, хочешь что бы для тебя делали так как надо, пиши стандарты. А не основывайся на том что пишут простые люди.
|
Сообщение от Octane
|
|
Делать на "отебитесь" не мой вариант Верстальщик не макетонарезочный аппарат, иногда надо думать, как сделать лучше.
|
С этим я соглашусь, я не буду говорить что я верстальщик, я в первую очередь программист и делаю так как удобнее мне а нет так как написал кто-то в блоге.
|
|
|
|
