Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Верстальщики, есть вопрос
цитата
30/05/09 в 01:42
 erobrand
3 блока

Фикс |от 980 до 1220| фикс

Всё - отцентрировано.


вопрос: как без таблиц?=)

Поломал моск, ничё не придумал=)
цитата
30/05/09 в 16:28
 Samuel Ocean
Код:

<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>
цитата
30/05/09 в 17:26
 Skat
для создания фикс | резина | фикс отрицательные позиции надо заюзать (типа как здесь http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/), а ширину цетрального столбца уже регилировать java-скприптом

Samuel Ocean твой вариант вообще не вариант icon_smile.gif
цитата
30/05/09 в 17:40
 erobrand
не нужно кидать мне блин заезженые лэйауты, я их прекрасно знаю. Под мой вариант они не подходят.

Самуэель, твой вариант не вариант..

Я то сделал, но у меня 2 сайдбара вверху, контент внизу( это плохая практика..
цитата
30/05/09 в 17:44
 Samuel Ocean


я поковырял свой первый вариант и реально заработало:



Код:

<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>
цитата
30/05/09 в 17:49
 erobrand
так то работает, это понятное дело, но контент внизу, это не совсем то, что нужно. но спасибо)
цитата
30/05/09 в 18:23
 Skat
erobrand писал:
так то работает, это понятное дело

дык и это криво работает, ie6 посмотрите, max-width и min-width не для него
цитата
30/05/09 в 18:31
 Samuel Ocean
2 Skat

погуглить и найти каждый школьник может ;) все знают пользоваться гуглом
ты б сам написал свой уникальный вариант вместо того что деклайнить чужие варианты

для моего варианта под ИЕ есть фикс... так что вопрос решаем
цитата
30/05/09 в 18:36
 Samuel Ocean
2 Skat

А если б ты внимательно читал посты, ты б заметил что ТС нужно что б контейнер с центральной частью где контент был в верху в хтмл коде и работал с условиями как в первом посте.

Ну как решишь? Только давай без position:absolute; icon_biggrin.gif
цитата
30/05/09 в 18:58
 erobrand
не начинайте балаган, я вас прошу=)

я прекрасно знаю, что вы оба можете, коли захотите icon_wink.gif
цитата
30/05/09 в 19:03
 Samuel Ocean
сори за оффтоп и спасибо за доверие smail101.gif
цитата
30/05/09 в 19:18
 Skat
Samuel Ocean писал:
Ну как решишь? Только давай без position:absolute; icon_biggrin.gif


стучи покажу без абсолюта icon_wink.gif
цитата
30/05/09 в 22:52
 hardy
решается легко.

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%;
}


Вот теперь вуа-ля и брызги шампанского!

А если возникнут какие трудности, стучи в аську. Номер знаешь ;)
цитата
30/05/09 в 22:57
 hardy
Пост в догонку. Сорри, невнимательно читал топик. Samuel Ocean уже предлагал подобный вариант. Но я описал подробнее и написал цсс для ие. Надеюсь кому-то пригодится ;)
цитата
31/05/09 в 19:54
 erobrand
hardy писал:

обратите внимание, что центральная колонка идет в коде последней. это важно.


именно поэтому - это плохой вариант, к нему я сразу и сма пришёл( Контент должен быть вверху всегда.
цитата
31/05/09 в 22:21
 erobrand
ребята, не пишите, кто вообще не в теме=)не оно.
цитата
31/05/09 в 22:22
 erobrand
я уже сделал, но с позишн абсолют..не так изящно, как мне бы того хотелось, но кода мало, контент вверху и, о чудо, кроссбраузерно..
цитата
01/06/09 в 08:41
 hardy
2 erobrand:
я так понимаю одну из боковых колонок сделал абсолютом? если да, то предусмотрел вариант, когда в ней контент "длиннее" чем в не-абсолютных колонках?

у меня тут появилась идейка как без абсолюта сделать, только нету времени попробовать...
цитата
01/06/09 в 08:58
 hardy
Все же любопытство победило, и я проверил свою идею. Таки работает!
Никакого абсолюта, только 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>


icon_wink.gif
цитата
01/06/09 в 09:57
 erobrand
спасибо конечно, но так код будет больше графики весить=) это маньячество=) а ты маньяк icon_wink.gif

постучи, я ж есть у тебя в листе, покажу с абсолютом=)
цитата
01/06/09 в 14:07
 hardy
пусть и маньячество, но работает в любое время суток ;)
вечером оценишь smail54.gif


Эта страница в полной версии