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
а боковые должны в зависимости от ширины монитора тянуться или сужаться
вот что то пробовал, да не выходит, это возможно вобще? Подскажите если не сложно.
Мне нужно это для хедера, немогу разобраться.
За ранее благодарен.
цитата
08/02/12 в 23:03
JTcoders
Наоборот можно, а в твоем случае надо подумать. 10мин
цитата
08/02/12 в 23:07
JTcoders
Только таблицей похоже
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 если это сидж
Проблема в том что отрисовал хедер и футер, с перетеканием цвета, получилось от темного к светлому, а теперь нужно чтоб всё это красиво смотрелось левая чсть была своим, а правая своим цветом. Ну вот сделал себе проблему.
Вот думаю забить на извращение с версткой и наложить зеркальное изображение и сделать плавный переход в фотошопе и не мучаться с версткой, тогда будут края одного цвета и просто сделать заливку одним вариантом.
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
спасибо всем!
я тоже так хорошенько подумал, что я больше времени потрачу на эти выебоны, один хер серфер этого не увидет, дивами или таблицей все это сделано.
цитата
09/02/12 в 14:05
Semen!
глянь как у дравнкешей посл. платники сверстаны, может почерпнешь что.
witch cartoons например
цитата
09/02/12 в 14:41
kodek
Lexikon писал:
... с перетеканием цвета, получилось от темного к светлому, а теперь нужно чтоб всё это красиво смотрелось левая чсть была своим, а правая своим цветом.
Речь о градиентном бекграунде, я правильно понимаю? Часть браузеров это дело уже нативно поддерживается (в CSS3 оно вроде появилось), а там где нет - реализуется довольно просто, тянется картинка с бэкграундом на 100% ширины и высоты. Погугли (рекомендую англоязычные ресурсы, там гораздо больше инфы), я как-то делал такую фигню - ничего сложного.
цитата
09/02/12 в 15:52
idk2045
таблицы рулят!
надо делать каждую вещь максимально просто.
цитата
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 там вроде отдельно написать стиль нужно
Новая тема
Ответить
Эта страница в полной версии