- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Я сказал, что это легко? Я сказал, что это делается.
вот сразу...
http://dimox.name/3-column-css-layout-right-sidebars/
может так?
http://www.cssplay.co.uk/layouts/3cols.html
или здесь:
http://www.cssplay.co.uk/layouts/three-column-layouts.html
Я сказал, что это легко? Я сказал, что это делается.
вот сразу...
http://dimox.name/3-column-css-layout-right-sidebars/
http://dimox.name/examples/3_column_css_layout_right_sidebars/
может так?
http://www.cssplay.co.uk/layouts/3cols.html
Высота 100% где?
Держи что хочешь единственное здесь нет имуляции колонок одинаковой высоты если надо пиши в личку дам решение.Сейчас макет будет тянуться до 1680 если надо больше или меньше исправь в файле style.css max-width: 1680px на нужное значение (#wrapper,#footer) IE6 не поддерживает
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
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;}
Извините за оффтоп. Какие браузеры нормально поддерживают HTML5 и CSS3?
по картинке делается раз плюнуть.
условия растяжения по высоте за счет контента не заданы.
vryb, +5! молодец.
А теперь, самое интересное. Собственно из за чего всегда приходится на таблицы переходить.
колонка 240
</aside>
Вот этот момент слева на всю высоту должен быть заполнен синим цветом.
По картинке в старт посте и справа тоже.
vryb, +5! молодец.
А теперь, самое интересное. Собственно из за чего всегда приходится на таблицы переходить.
Вот этот момент слева на всю высоту должен быть заполнен синим цветом.
По картинке в старт посте и справа тоже.
- и в чем проблема? Имитируем колонку background-ом. Например: левую - элементу html, правую - элементу body.
- и в чем проблема? Имитируем колонку background-ом.
вот именно в этом есть определённая проблема - имитация (колонки-то там нет) :)
все возможно на html5 И css3