Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
 Добавлено: 30/05/09 в 01:42 |
3 блока
Фикс |от 980 до 1220| фикс
Всё - отцентрировано.
вопрос: как без таблиц?=)
Поломал моск, ничё не придумал=)
|
|
|
|
| |
grammar nazi
С нами с 23.01.03
Сообщения: 6974
Рейтинг: 2037
|
| Добавлено: 30/05/09 в 03:39 |
|
|
|
|
Меня как из ушата окатили. Так гадко стало. И обидно.
Пустышка.
|
6
|
|
| |
Design Web, UI/UX, Identity
С нами с 26.03.06
Сообщения: 1860
Рейтинг: 578
|
| Добавлено: 30/05/09 в 16:28 |
| Код: |
<style>
#page { min-width:1380px; max-width:1620px; display:inline-block; }
#left_panel { width:200px; float:left;}
#center_panel { min-width:980px; max-width:1220px;}
#right_panel { width:200px; float:right;}
</style
<body>
<div id="page">
<div id="left_panel">
</div>
<div id="center_panel">
</div>
<div id="right_panel">
</div>
</div>
</body>
|
|
|
|
|
| |
С нами с 06.03.05
Сообщения: 6216
Рейтинг: 7375
 
|
| Добавлено: 30/05/09 в 17:26 |
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 30/05/09 в 17:40 |
не нужно кидать мне блин заезженые лэйауты, я их прекрасно знаю. Под мой вариант они не подходят.
Самуэель, твой вариант не вариант..
Я то сделал, но у меня 2 сайдбара вверху, контент внизу( это плохая практика..
|
|
|
|
| |
Design Web, UI/UX, Identity
С нами с 26.03.06
Сообщения: 1860
Рейтинг: 578
|
| Добавлено: 30/05/09 в 17:44 |
я поковырял свой первый вариант и реально заработало:
| Код: |
<style>
#page { min-width:1380px; max-width:1620px; margin:0 auto; background:gray; clear:both; }
#left_panel { width:200px; float:left; background:black; height:200px;}
#center_panel { background:green; min-width:500px; height:200px; margin-left:210px; margin-right:210px;}
#right_panel { width:200px; float:right; background:red; height:200px;}
</style>
<body>
<div id="page">
<div id="left_panel">
</div>
<div id="right_panel">
</div>
<div id="center_panel">
hello
</div>
</div>
</body>
|
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 30/05/09 в 17:49 |
так то работает, это понятное дело, но контент внизу, это не совсем то, что нужно. но спасибо)
|
|
|
|
| |
С нами с 06.03.05
Сообщения: 6216
Рейтинг: 7375
|
| Добавлено: 30/05/09 в 18:23 |
| erobrand писал: | | так то работает, это понятное дело |
дык и это криво работает, ie6 посмотрите, max-width и min-width не для него
|
|
|
|
| |
Design Web, UI/UX, Identity
С нами с 26.03.06
Сообщения: 1860
Рейтинг: 578
|
| Добавлено: 30/05/09 в 18:31 |
2 Skat
погуглить и найти каждый школьник может ;) все знают пользоваться гуглом
ты б сам написал свой уникальный вариант вместо того что деклайнить чужие варианты
для моего варианта под ИЕ есть фикс... так что вопрос решаем
|
|
|
|
| |
Design Web, UI/UX, Identity
С нами с 26.03.06
Сообщения: 1860
Рейтинг: 578
|
| Добавлено: 30/05/09 в 18:36 |
2 Skat
А если б ты внимательно читал посты, ты б заметил что ТС нужно что б контейнер с центральной частью где контент был в верху в хтмл коде и работал с условиями как в первом посте.
Ну как решишь? Только давай без position:absolute; 
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 30/05/09 в 18:58 |
не начинайте балаган, я вас прошу=)
я прекрасно знаю, что вы оба можете, коли захотите 
|
|
|
|
| |
Design Web, UI/UX, Identity
С нами с 26.03.06
Сообщения: 1860
Рейтинг: 578
|
| Добавлено: 30/05/09 в 19:03 |
сори за оффтоп и спасибо за доверие 
|
|
|
|
| |
С нами с 06.03.05
Сообщения: 6216
Рейтинг: 7375
|
| Добавлено: 30/05/09 в 19:18 |
| Samuel Ocean писал: | | Ну как решишь? Только давай без position:absolute; |
стучи покажу без абсолюта
|
|
|
|
| |
С нами с 16.01.09
Сообщения: 268
Рейтинг: 384
|
| Добавлено: 30/05/09 в 22:52 |
решается легко.
html:
| Код: |
...
<body>
<div id="container">
<div id="left-col">...</div>
<div id="right-col">...</div>
<div id="center-col">...</div>
</div>
</body>
...
|
обратите внимание, что центральная колонка идет в коде последней. это важно.
css:
| Код: |
body {min-width:1000px;}
#container {
width:100%;
max-width:1280px;
margin:0 auto;
overflow:hidden;
}
#left-col {
float:left;
width:200px;
overflow:hidden;
}
#right-col {
float:right;
width:200px;
overflow:hidden;
}
#center-col {
margin:0 200px;
}
|
Всё. В этом месте можно расслабиться и выпить шампанского. Но есть одно НО. ие6 естественно. он во-первых не понимает min- и max-width, а во-вторых имеет известный "баг трёх пикселей". Поэтому никак не обойтись без развилки под ие.
ie6.css
| Код: |
body {
width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
}
#container {
width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1280?'1280px':'90%');
}
#left-col {
margin-right: -3px;
}
#right-col {
margin-left: -3px;
}
#center-col {
margin: 0;
height: 1%;
}
|
Вот теперь вуа-ля и брызги шампанского!
А если возникнут какие трудности, стучи в аську. Номер знаешь ;)
|
|
|
|
| |
С нами с 16.01.09
Сообщения: 268
Рейтинг: 384
|
| Добавлено: 30/05/09 в 22:57 |
Пост в догонку. Сорри, невнимательно читал топик. Samuel Ocean уже предлагал подобный вариант. Но я описал подробнее и написал цсс для ие. Надеюсь кому-то пригодится ;)
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 31/05/09 в 19:54 |
| hardy писал: |
обратите внимание, что центральная колонка идет в коде последней. это важно.
|
именно поэтому - это плохой вариант, к нему я сразу и сма пришёл( Контент должен быть вверху всегда.
|
|
|
|
| |
С нами с 01.01.09
Сообщения: 358
Рейтинг: 104
|
| Добавлено: 31/05/09 в 21:51 |
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 31/05/09 в 22:21 |
ребята, не пишите, кто вообще не в теме=)не оно.
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 31/05/09 в 22:22 |
я уже сделал, но с позишн абсолют..не так изящно, как мне бы того хотелось, но кода мало, контент вверху и, о чудо, кроссбраузерно..
|
|
|
|
| |
С нами с 16.01.09
Сообщения: 268
Рейтинг: 384
|
| Добавлено: 01/06/09 в 08:41 |
2 erobrand:
я так понимаю одну из боковых колонок сделал абсолютом? если да, то предусмотрел вариант, когда в ней контент "длиннее" чем в не-абсолютных колонках?
у меня тут появилась идейка как без абсолюта сделать, только нету времени попробовать...
|
|
|
|
| |
С нами с 16.01.09
Сообщения: 268
Рейтинг: 384
|
| Добавлено: 01/06/09 в 08:58 |
Все же любопытство победило, и я проверил свою идею. Таки работает!
Никакого абсолюта, только 2 лишних дива.
Проверено в ие6, ие7, ие8, фф3, опера 9.51, Chrome и Safari 3.
Для наглядности вставляю код целиком, потом две строчки для ие6 лучше вынести в отдельный файл дабы не терять валидность.
| Код: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
margin: 20px 0;
min-width: 800px;
}
.content {
width: 100%;
max-width: 1100px;
overflow: hidden;
margin: 0 auto;
}
.left-center {
float: left;
display: inline;
background: #ff0;
width: 100%;
overflow: hidden;
margin-left: -200px;
}
.rightcol {
float: left;
width: 200px;
overflow: hidden;
background: #ccc;
}
.centercol {
float: right;
display: inline;
background: #ffa800;
width: 100%;
overflow: hidden;
margin-right: -400px;
}
.centercol .inner {
padding-right: 400px;
}
.leftcol {
float: right;
width: 200px;
overflow: hidden;
background: #f0c;
}
* html body {
width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
}
* html .content {
width:expression((document.documentElement.clientWidth||document.body.clientWidth)>1100?'1100px':'100%');
}
</style>
</head>
<body>
<div class="content">
<div class="left-center">
<div class="centercol">
<div class="inner">
center column content
</div>
</div>
<div class="leftcol">
left column content
</div>
</div>
<div class="rightcol">
right column content
</div>
</div>
</body>
</html>
|
|
|
|
|
| |
Адалт кутюрье
С нами с 16.04.06
Сообщения: 1322
Рейтинг: 827
|
| Добавлено: 01/06/09 в 09:57 |
спасибо конечно, но так код будет больше графики весить=) это маньячество=) а ты маньяк
постучи, я ж есть у тебя в листе, покажу с абсолютом=)
|
|
|
|
| |
С нами с 16.01.09
Сообщения: 268
Рейтинг: 384
|
| Добавлено: 01/06/09 в 14:07 |
пусть и маньячество, но работает в любое время суток ;)
вечером оценишь 
|
|
|
|
| |
