CSS и Footer
21 апреля 2010 г.
Здравствуйте еще раз 
Сайт Loralux.ru - проблема в том, что при выводе новостей footer налезает на саму новость.
Думаю, что это происходит из-за неправильного параметра float для одного из div'ов, но найти не могу.
При установке стандартного макета HostCMS все делает правильно, в моем макете на главной странице все работает, в интернет-магазине тоже. Новости выводятся неправильно только в случае, если выводится только одна новость на странице, т.е footer обтекает центральный div, а мне нужно, чтобы еще и left_block (левое меню).
Смотрел документацию - вроде нужно сделать оба div'a с параметром float, а для footer - отменить float. Попробовал - не получается. Посоветуйте, в какой направлении плыть?
Заранее спасибо.
Сайт Loralux.ru - проблема в том, что при выводе новостей footer налезает на саму новость.
Думаю, что это происходит из-за неправильного параметра float для одного из div'ов, но найти не могу.
При установке стандартного макета HostCMS все делает правильно, в моем макете на главной странице все работает, в интернет-магазине тоже. Новости выводятся неправильно только в случае, если выводится только одна новость на странице, т.е footer обтекает центральный div, а мне нужно, чтобы еще и left_block (левое меню).
Смотрел документацию - вроде нужно сделать оба div'a с параметром float, а для footer - отменить float. Попробовал - не получается. Посоветуйте, в какой направлении плыть?
Заранее спасибо.
21 апреля 2010 г.
Вопрос, конечно, к HostCMS отношения не имеет практически никакого, но посмотрел я все же вашу верстку...
dimon33, простите, но это клинический случай.
Как говорится, учите матчасть.
Попробуйте просто нормально сверcтать резиновый макет из 3х колонок, шапки и футера, с использованием, допустим, готовой сетки из набора YUI-2 Grids.
Вот заготовка:
Теперь аккуратно расставляете внутри этой сетки нужные вам блоки, описываете их в css и наслаждаетесь результатом.
dimon33, простите, но это клинический случай.
Как говорится, учите матчасть.
Попробуйте просто нормально сверcтать резиновый макет из 3х колонок, шапки и футера, с использованием, допустим, готовой сетки из набора YUI-2 Grids.
Вот заготовка:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YUI Base Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" type="text/css" />
<style type="text/css">
.padding5px {padding:5px}
</style>
</head>
<body>
<div id="doc3" class="yui-t5">
<div id="hd">
<div class="padding5px">
<h1>Header</h1>
здесь вся шапка и верхнее меню </div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<div class="padding5px"> Здесь - левое меню Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat. </div>
</div>
<div class="yui-u">
<div class="padding5px"> Здесь основной контент
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat. </div>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="padding5px">Здесь содержимое правой колонки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
</div>
</div>
<div id="ft">
<div class="padding5px">
<p>Footer. Тут всякие копирайты, продажные ссылки и прочая такая фигня.</p>
</div>
</div>
</div>
</body>
</html>
и больше ничего и не надо! Тут сразу и валидная верстка, и семантическая разметка блоков, и средства борьбы со всеми версиями IE, и футеры с хедерами никуда не уезжают - все включено и на халяву, только пользуйтесь! <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>YUI Base Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css" />
<link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/base/base.css" type="text/css" />
<style type="text/css">
.padding5px {padding:5px}
</style>
</head>
<body>
<div id="doc3" class="yui-t5">
<div id="hd">
<div class="padding5px">
<h1>Header</h1>
здесь вся шапка и верхнее меню </div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gf">
<div class="yui-u first">
<div class="padding5px"> Здесь - левое меню Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat. </div>
</div>
<div class="yui-u">
<div class="padding5px"> Здесь основной контент
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat. </div>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="padding5px">Здесь содержимое правой колонки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div>
</div>
</div>
<div id="ft">
<div class="padding5px">
<p>Footer. Тут всякие копирайты, продажные ссылки и прочая такая фигня.</p>
</div>
</div>
</div>
</body>
</html>
Теперь аккуратно расставляете внутри этой сетки нужные вам блоки, описываете их в css и наслаждаетесь результатом.
22 апреля 2010 г.
22 апреля 2010 г.
ironwayru, дружище, вы меня таки удивляете! Это же ДЕМО-макет, от ДЕМО-сайта!
Делать "дизайн" своего сайта путем правки демо-шаблона и надругательств над ним - это просто верх неуважения к своему сайту, его посетителям и к себе самому, и достойно всяческого презрения к создателю.
Делать "дизайн" своего сайта путем правки демо-шаблона и надругательств над ним - это просто верх неуважения к своему сайту, его посетителям и к себе самому, и достойно всяческого презрения к создателю.
22 апреля 2010 г.
Kotoff, ну вы уж слишком категоричны.
Во-первых, у демо-сайта не самый страшный дизайн. Он мне нравится
Во-вторых, что делать, если я вообще не веб-дизайнер? Знаю лишь какие-то основы. И то. Вчерашнего дня. Когда я изучал веб-дизайн - все версталось на таблицах и вообще без css...
Безусловно, свой дизайн - это круто. Но чтобы его придумать - это надо много времени и денег. Мы же очень привередливые - мы даже толком не знаем какой дизайн нам нужен.
Мы применяем т.н. итерационный подход ко всему делу.
Его суть - поэтапность. Т.е. сразу же запускается сайт. И уже потом делается дизайн, прикручиваются разные фишки и т.д. и т.п. Мы еще полгода будем придумывать дизайн - а сайт уже работает, поисковики потихоньку индексируют и пр.
Плюс такого подхода - когда дело начинает сразу работать - становится видно, что нужно, а что не нужно реализовывать.
Ну вобщем, думаю вы меня поняли)
Во-первых, у демо-сайта не самый страшный дизайн. Он мне нравится
Во-вторых, что делать, если я вообще не веб-дизайнер? Знаю лишь какие-то основы. И то. Вчерашнего дня. Когда я изучал веб-дизайн - все версталось на таблицах и вообще без css...
Безусловно, свой дизайн - это круто. Но чтобы его придумать - это надо много времени и денег. Мы же очень привередливые - мы даже толком не знаем какой дизайн нам нужен.
Мы применяем т.н. итерационный подход ко всему делу.
Его суть - поэтапность. Т.е. сразу же запускается сайт. И уже потом делается дизайн, прикручиваются разные фишки и т.д. и т.п. Мы еще полгода будем придумывать дизайн - а сайт уже работает, поисковики потихоньку индексируют и пр.
Плюс такого подхода - когда дело начинает сразу работать - становится видно, что нужно, а что не нужно реализовывать.
Ну вобщем, думаю вы меня поняли)
22 апреля 2010 г.
