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

HTML5 и CSS3

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

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

вот сразу...

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

flenj
На сайте с 21.07.2010
Offline
59
flenj
#12

может так?

http://www.cssplay.co.uk/layouts/3cols.html

или здесь:

http://www.cssplay.co.uk/layouts/three-column-layouts.html

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

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

flenj:
может так?
http://www.cssplay.co.uk/layouts/3cols.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Удален]
#20

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

12345 6

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