Форум Сайтостроение Веб-строительство

Подскажите как сделать это в DIV

12
K
На сайте с 21.03.2010
Offline
57
Kopanev
649

Доброе утро!

Подскажите. пожалуйста, можно ли такое реализовать с помощью блочной верстки DIV?

Если да, не могли бы подсказать код?

jpg 117975.jpg
uberchel
На сайте с 16.01.2010
Offline
70
uberchel
#1

Конечно можно, используйте для этого ксс свойства

float:left/right, display:inline-block/table-cell/table-row - отсутствует поддержка на старых браузерах IE, для них пихаем функцию в ксс: 


height: expression((function(t,i,h,e){

            i=h=e=0;t.style.styleFloat='left';while(e=t.parentNode.children[i++]){h=(e.offsetHeight>h?e.offsetHeight:h)};

            return(h-(parseInt(t.currentStyle.borderTopWidth)||0)-(parseInt(t.currentStyle.borderBottomWidth)||0)-

            (parseInt(t.currentStyle.paddingTop)||0)-(parseInt(t.currentStyle.paddingBottom)||0))+"px"

})(this));
K
На сайте с 04.12.2007
Offline
37
Kuznec
#2

Ну, скорее всего здесь необходимо использовать jQuery или что-то подобное. Предыдущий пост, как я понял, рассчитывает высоту, а нужно ширину. Попробовал просто в слоях сделать, но сходу не получилось.

[Удален]
#3
Kopanev:
можно ли такое реализовать с помощью блочной верстки DIV?

запросто такое сочиняеццо - это совсем не сложно

куча обёрток + свойства css

какие нафик jQuery ... ))

K
На сайте с 21.03.2010
Offline
57
Kopanev
#4
Pavel_:
запросто такое сочиняеццо - это совсем не сложно
куча обёрток + свойства css
какие нафик jQuery ... ))

Подсказать сможете?

oux
На сайте с 07.02.2010
Offline
83
oux
#5

100% - это резина? если да, то в хидере не очень понятно для чего делается это.

K
На сайте с 21.03.2010
Offline
57
Kopanev
#6
oux:
100% - это резина? если да, то в хидере не очень понятно для чего делается это.

Меню, например, чтоб растягивалось!

[Удален]
#7
Kopanev:
Подсказать сможете?

уже подсказал

Pavel_:
куча обёрток + свойства css

обёртки - это типа <div id="1"><div id="article"></div><div id="2"></div><div id="3"><div id="4"></div>div id="5"></div></div></div>

вместо id - чаще всего лучше class и развлекаетесь с css

G
На сайте с 07.06.2009
Offline
37
gordi
#8

Если не будет 100% высоты и нет необходимости в разном фоне колонок, то как-то так - http://csslayout.ru/i/help/searchengines/searchengines01.html

Все о разметке web-страниц (http://csslayout.ru)
Desesperada
На сайте с 11.10.2010
Offline
77
Desesperada
#9

я один вижу 100% ширину сразу в 3 вариациях?)

а вообще суть уловил, все можно сделать на css

с кпк не распишу, поюзайте пока http://csstemplater.com/ и внимательно изучить полученный код

Создание/наполнение сайтов ICQ 7860919 Принимаю предзаказы на сателлиты/гс в индексе
AGRESSOR
На сайте с 04.07.2010
Offline
79
AGRESSOR
#10

html


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Верстка</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="sidebar">
    Sidebar 200px
</div>
<div id="wrapper">
    <div id="header">
        Header 100%
    </div>
    <div id="left">
        Left 200px
    </div>
    <div id="right">
        Right 200px
    </div>
    <div id="content">
        Content 100%
    </div>
</div>
<div id="footer">
    Footer 100%
</div>
</body>
</html>

css


*{margin:0;padding:0;}
html,body{width:100%;height:100%;}

body{font:normal 18px Arial;text-align:center;}

#wrapper{margin-right:200px;}

#header{width:100%;height:150px;background:#87FFE6;}

#left{width:200px;min-height:820px;float:left;background:#FF8695;}

#right{width:200px;min-height:820px;float:right;background:#DA86FF;}

#content{width:100%;min-height:820px;}

#sidebar{width:200px;min-height:970px;float:right;background:#90FFA0;}

#footer{width:100%;height:100px;background:#FED385;overflow:hidden;}
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий