Master-X
Форум | Новости | Статьи
Главная » Форум » Дизайн » 
Тема: Трехколоночная верстка дива
цитата
08/02/12 в 22:34
 Lexikon
Подскажите пожалуйста.
<div class="sidebar-left">Left</div>
<div class="sidebar-right">Right</div>
<div class="sidebar-center">Center</div>

Центральный div (sidebar-center) имеет фиксируемую длину 1250px
а боковые должны в зависимости от ширины монитора тянуться или сужаться
вот что то пробовал, да не выходит, это возможно вобще? Подскажите если не сложно.
Мне нужно это для хедера, немогу разобраться. icon_confused.gif

За ранее благодарен.
цитата
08/02/12 в 23:03
 JTcoders
Наоборот можно, а в твоем случае надо подумать. 10мин
цитата
08/02/12 в 23:07
 JTcoders
Только таблицей похоже icon_sad.gif

display:table гугли, если для дивов.

Других простых вариантов не вижу.
цитата
09/02/12 в 00:21
 Lexikon
вот и я пока только к этому решению пришел.
Или диз немного поменять и верстать дивами или оставить все как есть и сверстать дивами.
цитата
09/02/12 в 10:28
 aewm
Тебе это так надо? Нах мутить, сделай обычную шапку 1250px если это сидж
цитата
09/02/12 в 11:30
 kodek
Ну вот такого типа что-то.
http://www.webdeveloper.com/forum/showthread.php?t=208828

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
   min-width: 1200px;
   margin:0;
   padding:0;
   background-position: top center;
}

#left-side-outer {
   width:50%;
   float:left;
   margin-right:-400px;
   height: 800px;
}
#left-side{
   margin-right:400px;
   background-color: #FF9900;
   height: 800px;
}
#center-column {
   width:800px;
   float:left;
   color: #FFFFFF;
   background-color: #000000;
   position:relative;
   z-index:10;
   height: 800px;
}
#right-side-outer {
   width:50%;
   float:right;
   margin-left:-401px;
   height: 800px;
}
#right-side {
   margin-left:400px;
   height: 800px;
   background-color: #FF9900;
}
#header{
   clear:both;
   height: 175px;
   text-align: center;
   background-color: #CC0000;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="left-side-outer">
<div id="left-side">
</div>
</div>
<div id="center-column">Centered fixed width centre content : Centered fixed width centre content : Centered fixed

width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed

width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered fixed

width centre content : Centered
fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : Centered

fixed width centre content : Centered fixed width centre content : Centered fixed width centre content : </div>
<div id="right-side-outer">
<div id="right-side">
</div>
</div>
</body>
</html>
цитата
09/02/12 в 12:33
 Lexikon
aewm писал:
Тебе это так надо? Нах мутить, сделай обычную шапку 1250px если это сидж

Проблема в том что отрисовал хедер и футер, с перетеканием цвета, получилось от темного к светлому, а теперь нужно чтоб всё это красиво смотрелось левая чсть была своим, а правая своим цветом. Ну вот сделал себе проблему.
Вот думаю забить на извращение с версткой и наложить зеркальное изображение и сделать плавный переход в фотошопе и не мучаться с версткой, тогда будут края одного цвета и просто сделать заливку одним вариантом. icon_rolleyes.gif

kodek писал:
Ну вот такого типа что-то.
http://www.webdeveloper.com/forum/showthread.php?t=208828

Посмотрю, спасибо!
цитата
09/02/12 в 13:10
 cdroller
а чо просто таблицу не сделать? не вижу разницы особой акромя понтов, отказываться от того что работает, и верстать 100% все дивами ... ток верстальщики проф. от этого интерес испытывают ... я так делаю, так как проще, всегда, и часто таблицы и дивы - все в куче ...
цитата
09/02/12 в 13:17
 JTcoders
Lexikon писал:
Проблема в том что отрисовал хедер и футер, с перетеканием цвета, получилось от темного к светлому, а теперь нужно чтоб всё это красиво смотрелось левая чсть была своим, а правая своим цветом.


Послушай, а зачем так заморочиваться? Сделай шапку по-центру, и фон тоже центрируй в диве со 100% шириной. Фон сделай >=2000px, чтобы нормально смотрелось на 1920 к примеру.
цитата
09/02/12 в 13:55
 Lexikon
спасибо всем! smail54.gif я тоже так хорошенько подумал, что я больше времени потрачу на эти выебоны, один хер серфер этого не увидет, дивами или таблицей все это сделано.
цитата
09/02/12 в 14:05
 Semen!
глянь как у дравнкешей посл. платники сверстаны, может почерпнешь что.
witch cartoons например
цитата
09/02/12 в 14:41
 kodek
Lexikon писал:
... с перетеканием цвета, получилось от темного к светлому, а теперь нужно чтоб всё это красиво смотрелось левая чсть была своим, а правая своим цветом.

Речь о градиентном бекграунде, я правильно понимаю? Часть браузеров это дело уже нативно поддерживается (в CSS3 оно вроде появилось), а там где нет - реализуется довольно просто, тянется картинка с бэкграундом на 100% ширины и высоты. Погугли (рекомендую англоязычные ресурсы, там гораздо больше инфы), я как-то делал такую фигню - ничего сложного.
цитата
09/02/12 в 15:52
 idk2045
таблицы рулят! icon_wink.gif
надо делать каждую вещь максимально просто.
цитата
09/02/12 в 16:38
 Lexikon
kodek писал:
Речь о градиентном бекграунде, я правильно понимаю? Часть браузеров это дело уже нативно поддерживается (в CSS3 оно вроде появилось), а там где нет - реализуется довольно просто, тянется картинка с бэкграундом на 100% ширины и высоты. Погугли (рекомендую англоязычные ресурсы, там гораздо больше инфы), я как-то делал такую фигню - ничего сложного.

там сложноватй рисунок BG.
Буду делать таблицей.
цитата
09/02/12 в 16:51
 Samuel Ocean
Тебе нужна fluid grid. Попробуй http://www.designinfluences.com/fluid960gs/
Еще на вскидку http://960.gs/
цитата
09/02/12 в 17:00
 Stek
Может легче уже воспользоваться готовой разметкой
http://code.google.com/p/malo/
цитата
11/02/12 в 14:21
 JasonX
Lexikon: ты дивно вертсаешь?
цитата
12/02/12 в 15:45
 Lexikon
вобще да. Но этот таблицей буду.

вот кстати нашел что то, исходник немного другой был, это я уже подшаманил, возможно еще с косяками



   <div id="middle">
      <div class="wrap">
        <div class="left">Left</div>
        <div class="content">Content</div>
        <div class="right">Right</div>
     </div>
   </div>

<style type="text/css">
* {margin:0;padding:0;}
body {background-color:#9a9;}
#middle {display:table; width:100%;}
.wrap {display:table-row;}
.left,.content,.right {display:table-cell;}
.left {background-color:#9dd;  width:auto;}
.content {
  background-color:#fff;
  border:#000 solid;
  border-width:0 1px;width:1250px;
}
.right {background-color:#99b; width:auto;}
</style>


для IE там вроде отдельно написать стиль нужно


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