HTML5 и CSS3

C
На сайте с 04.02.2005
Offline
277
#11

Я сказал, что это легко? Я сказал, что это делается.

вот сразу...

http://dimox.name/3-column-css-layout-right-sidebars/

flenj
На сайте с 21.07.2010
Offline
59
#12
Порфолиё /ru/forum/526650 (/ru/forum/526650)
Lord Maverik
На сайте с 15.04.2003
Offline
471
#13
Chukcha:
Я сказал, что это легко? Я сказал, что это делается.
вот сразу...
http://dimox.name/3-column-css-layout-right-sidebars/
Трехколоночный макет на CSS с одинаковой высотой колонок

http://dimox.name/examples/3_column_css_layout_right_sidebars/

Высота 100% где?

RedMall.Ru (https://redmall.ru) - Товары из Китая (Таобао, Tmall) с проверкой качества, скидка для форумчан 7% Партнерская программа 2 уровня: 5% + 5%. Подробнее. (https://redmall.ru/about/partner/)
V
На сайте с 27.09.2010
Offline
86
#14

Держи что хочешь единственное здесь нет имуляции колонок одинаковой высоты если надо пиши в личку дам решение.Сейчас макет будет тянуться до 1680 если надо больше или меньше исправь в файле style.css max-width: 1680px на нужное значение (#wrapper,#footer) IE6 не поддерживает

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

<header id="header">
120
</header><!-- #header-->

<section id="middle">

<div id="container">
<div id="content">
текст
</div><!-- #content-->
</div><!-- #container-->

<aside id="sideLeft">
колонка 240
</aside><!-- #sideLeft -->

<aside id="sideRight">
колонка 200
</aside><!-- #sideRight -->
</section><!-- #middle-->
</div><!-- #wrapper -->

<footer id="footer">
60
</footer><!-- #footer -->

</body>
</html>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
html {height: 100%;}
header, nav, section, article, aside, footer {display: block;}
body {font: 12px/18px Arial, Tahoma, Verdana, sans-serif;height: 100%;}
a {color: blue;outline: none;text-decoration: underline;}
a:hover {text-decoration: none;}
p {margin: 0 0 18px}
img {border: none;}
input {vertical-align: middle;}
#wrapper {min-width: 1000px; max-width: 1680px;margin: 0 auto;min-height: 100%;height: auto !important;height: 100%;}
/*-------------------------- Header-----------------------------------------------------------------------------*/
#header {height: 150px;background: #FFE680;}
/* =========================Middle-----------------------------------------------------------------------------*/
#middle {width: 100%;padding: 0 0 60px;height: 1%;position: relative;}
#middle:after {content: '.';display: block;clear: both;visibility: hidden;height: 0;}
#container { width: 100%;float: left;overflow: hidden;}
#content {padding: 0 220px 0 260px;}
/*==================== Sidebar Left-----------------------------------------------------------------------------*/
#sideLeft {float: left;width: 240px; margin-left: -100%; position: relative; background: #B5E3FF;}

/* ====================Sidebar Right-----------------------------------------------------------------------------*/
#sideRight { float: left;margin-right: -3px; width: 200px;margin-left: -200px;position: relative;background: #FFACAA;}

/*-------------------------- Footer-----------------------------------------------------------------------------*/
#footer {margin: -60px auto 0;min-width: 1000px; max-width: 1680px;height: 60px;background: #BFF08E; position: relative;}
К
На сайте с 10.10.2011
Offline
9
#15

Извините за оффтоп. Какие браузеры нормально поддерживают HTML5 и CSS3?

dkameleon
На сайте с 09.12.2005
Offline
386
#16

по картинке делается раз плюнуть.

условия растяжения по высоте за счет контента не заданы.

Дизайн интерьера (http://balabukha.com/)
Lord Maverik
На сайте с 15.04.2003
Offline
471
#17

vryb, +5! молодец.

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

<aside id="sideLeft">
колонка 240
</aside>

Вот этот момент слева на всю высоту должен быть заполнен синим цветом.

По картинке в старт посте и справа тоже.

Olldman
На сайте с 21.04.2010
Offline
79
#18
Lord Maverik:
vryb, +5! молодец.
А теперь, самое интересное. Собственно из за чего всегда приходится на таблицы переходить.

Вот этот момент слева на всю высоту должен быть заполнен синим цветом.
По картинке в старт посте и справа тоже.

- и в чем проблема? Имитируем колонку background-ом. Например: левую - элементу html, правую - элементу body.

[Удален]
#19
Olldman:
- и в чем проблема? Имитируем колонку background-ом.

вот именно в этом есть определённая проблема - имитация (колонки-то там нет) :)

[Удален]
#20

все возможно на html5 И css3

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