Leaderboard

а что ты подразумеваешь под определением "любой фон"? Тут нужно конкретизировать...) Советую ознакомиться с таким понятием как - "DOM дерево" в html. То есть, с помощью CSS, элементы(полноценные) нельзя создавать, удалять, копировать и тд. Нельзя меняться структуру/иерархию... документа/тегов(а точнее, DOM элементов). Нельзя влиять на семантику и назначение тегов и тд...

CSS не может влиять на DOM структуру/иерархию. Ты слишком много нафантазировал...)

Этот "урок" сочетает в себе все темы, поднятые ранее и видимо окончательно (или до новых модификаций языка) закрывает данный вопрос. Спойлер открывается по клику на его название и скрывается по клику в любую область за его пределами. Ничего нового, просто последовательное строение: #spoiler:focus .spoiler { display: block; } .spoiler { display: none; overflow: hidden; } <a href="#" id="spoiler">Название спойлера <div class="spoiler">информация для скрытия, появляется по клику</div> </a> Самое простое решение, которое не работает в Google Chrome вообще. Запросив на гугле: "WTF?", получил рекомендацию прописать: tabindex="1" Почему "1"? Это номер фокусировки. Если будете создавать несколько спойлеров, то указываете номера по порядку для каждого нового: "1", "2," "3" и т.д. <a href="#" id="spoiler" tabindex="1">Название спойлера <div class="spoiler">информация для скрытия, появляется по клику</div> </a> Проверили, работает! В Хроме выделяется желтым цветом, в Opera и Mozilla всё норм, оставляем. Всё? А нет. Нам нужна кнопка, которая будет раскрывать спойлер. Дело в том, что кнопка должна быть relative, или вообще не содержать position, потому что при absolute, перестает работать спойлер в Mozilla. .button { position: relative; display: inline-block; padding: 0 5px 2px 5px; background: #69C; } <a href="#" id="spoiler"><p class="button">Название спойлера</p> <div class="spoiler">информация для скрытия, появляется по клику</div> </a> Ура! Две бессоные ночи не прошли даром. Кстати, любители извращений, типа Internet Explorer, так же могут его объюзать, что радует. Всё ориентировано исключительно на Windows-пользователя с компьютера/ноута, так что за работоспособность в планшетах и тем более на мобильниках через jar, вообще ничего не обещаю.

я пошутил что может быть прекрасней, чем копаться в чужом "грязном белье"? меня больше интересуют положительные отзывы это не реально. Все равно не узнать, кто поставил отзыв Далеко ходить на буду: на http://javascript.ru/ такая возможность есть. Взять, к примеру, мой профиль. Любой может зайти и посмотреть последние отзывы. Зарегистрированные пользователи к тому же видят кто их оставил Это нормально ) Никакие права/свободы не нарушает.

Справедливости ради, в Firefox изобразить нечто сродни желаемого топикстартером можно. Но даже в таком специфическом случае, конечно, применять background-* нужно к тому элементу, который растягивается на всю ширину, а не к одной "плитке" его фона. Повторяющиеся квадраты можно генерировать CSS-градиентами (вдохновляющие примеры).

"Скорость рендеринга страниц: исследования, замеры, автоматизация": _http://video.yandex.ua/users/ya-events/view/275/?cauthor=melik-alexey&cid=1 - доклад интересный, если еще не видел. И в нем упоминался данный вопрос. Насколько я знаю, не обязательно задавать размеры изображений именно через атрибуты, поскольку стили (обычно) загружаются(или берутся с кеша) до построения DOM дерева.

Да и смысла в этом особого нет, всё равно никто ничего пояснять не будет. Второе, человек сам должен адекватно себя оценивать. Ну и не в плюсах/минусах счастье.

как по мне так минусы не всегда адекватно ставятся. Иногда только из-за разбежностей мнений. Можно ли настроить это изменение репутации так, чтобы если человек минусует, то он должен объяснить почему?

Репу вам понизили вот в этой теме, как я понял. И по делу. Вам там уже ни один раз объяснили, что то, что вы хотите, невозможно сделать с помощью повторяющегося фона), а вы всё равно своё талдычите. Вместо того, чтобы спорить о том, в чём вы совершенно не разбираетесь, нужно открыть книжку и почитать.

http://stackoverflow.com/questions/4399005/implementing-jquerys-shake-effect-with-animate

Фанфары Итак. Нашему чЯтику сегодня исполняется полгода! Пессимистичные прогнозы не сбылись (тут троекратное "ура!") Сейчас в чате 14 человек, из которых проявляют в разной степени активность: Amelice, alexriz, Sensei, sigma77, Svatov(в двойном экземпляре), Skygazer, Softlink и Дэник Вареник. Контингент подобрался весьма дружелюбный, культурный и отзывчивый, Skygazer не даст обмануть Беседы ведутся, как правило, на всякие IT-шные темы, но порой не преминем возможностью обсудить глобальное потепление. Весьма удобным оказался чат для "мелких вопросов". Это когда коллективный разум генерирует ответ(с примерами) быстрее гугла. В чат принимаются все желающие. По необходимости проведем вводную. Например, как отключить уведомления *Ссылка доступна зарегистрированным на форуме пользователям.

средствами CSS можно сделать изображения повторяющиеся, думаю и див можно повторить без лишнего языка.Количество повторений точно не канает при реагирующем дизайне. Нужно на 100% ширины страницы http://htmlbook.ru/css/background-repeat - руководствую тем, что указано: "Применяется Ко всем элементам"

Разберем число 200 |128|64|32|16|8|4|2|1| Ближайшее число, которое меньше 200, это 128 10000000 200 - 128 = 72 Ближайшее число, которое меньше 72 - 64 11000000 72 - 64 = 8 Восьмерку заполняем 11001000 Все, больше нет остатков. Осталось восстановить до какой-то разрядности число. Обычно разрядность берется 8/16/32/64 (количество позиций, в которых может записываться 0 или 1) Длина нашей строки равна 8, поэтому делать ничего не нужно, иначе можно добавить нули в начало.

Продам движок цитатника. Можно использовать под цитаты, истории, анекдоты, статусы, приколы, секреты и т.п. Возможности: * Добавление цитат (как зарегистрированными пользователями, так и анонимными) * Регистрация, Авторизация * Статичные страницы сайта (Например "О Проекте", "Правила") * RSS лента * Топ 20 цитат, Топ за неделю, Топ за месяц * Топ пользователей, Топ за неделю, Топ за месяц * Возможность голосования за цитаты (Кнопки + и -) * Возможность дать пользователю статус "Модератор" (У такого юзера появляется возможность редактировать и удалять цитаты) * Возможность комментирования цитат (Зарегистрированные пользователи) * И разного рода другие вкусности П.С. Покупателям могу подпилить некоторые нужные или не нужные плюшки. Так же отвечу на все вопросы и занимаюсь поддержкой своего продукта. П.С.С. За отдельную плату могу написать парсер под движок (англоязычный например с переводом через гугл транслит). Так же сверстаю любой макет под свой движок. Демо: http://treshak.ru/ (user : root) логин : пароль (имеет статус модератора) Админка: http://treshak.ru/admin.php (root : root) логин : пароль Тема для обсуждения: http://bigtalk.ru/forum/showthread.php?p=153197#post153197 Цена: 50$

Вот совсем не хочется скачивать архив, чтобы смотреть. Разве сложно завести фришный сайт, к примеру? Щас даже есть без рекламные.

Очень толковый код! Долго веъзжал и соображал, но сделал на сайте как хотел. Удобно то, что еще один такой же спойлер сворачивает предыдущий. Можно делать подряд спойлеры и не беспокоиться особо. Правда сложный код в общей сложности вышел, чтобы реализовать кнопку "обо мне".

Жжете, ребят! Буду объюзывать ваше творчество еще пару ночей

strange_atom, недоглядел как-то, что не месье Затем, что тема та была без ответа, да и читать её долго, а теперь есть два готовых решения на двух постах, на первых запросах гугла

sigma77, ничего себе! Месье, ды вы гуру CSS! Такого кода я еще не видел, аплодирую стоя!

типо взять на слабо?) А вам слабо написать такое приложение - "без всяких финтифлюшек" - подсветки кода и без кучи плагинов к вашему обычному текстовому редактору приближающего его к IDE - т.е. в чем то совсем аскетичном типа notepad'a из винды?) Быстро у вас глаза вытекут без элементарной подсветки кода? Это ведь всего вопрос удобства и скорости, а не можешь/не можешь.

Отпишусь и я. Наставник - это хорошо, но в меру. Для любого специалиста - важна уметь учиться самому, не рассчитывая на помощь. С одной стороны гуру может помочь решить проблему за 2 часа, а не за неделю. С другой стоорны - никакого почти экспириэнса от такого подхода нет. И левел ап так получать нужно будет дольше, несмотря на сэкономленное время. Каждый вопрос заданный на форуме засчитывайте себе за минус, а каждый ответ на чужой вопрос - который вы сами решили, не зная заранее ответа за плюс. Ведь на самом деле (имхо канеш) - невозможно выучить и держать в голове все современные технологии и фрэймворки - да и не нужно это. Важно уметь находить решение для каждых конкретных случаев - изучая новое на ходу. Причем лучше в боевых условиях. И дальше просто опыт, опыт, опыт. Подход - сейчас я найду гуру, выучу то, то, то это и вот то - и пойду работать в яндекс - мне кажется неоптимальным, а слишком самокритичным (а это мне как раз кажется про вас) - и вообще вредным. Единственное в чем гуру может помочь - это подбирать правильные задачи - и всё. Никакого обучения - и лишь после выполнения задачи - показать другие пути решения. Для примера - попробуйте разобраться как работает этот пример http://documentcloud.github.com/backbone/examples/todos/index.html (на основе бэкбона - http://documentcloud.github.com/backbone/#examples-todos) Ещё посоветую эту книжку - http://www.books.ru/books/javascript-podrobnoe-rukovodstvo-6-e-izdanie-1814274/?show=1 - крайне желательно прочитать её раза 3, разобрав примеры и прочувствовав всё там описанное - не столько даже ради js, сколько ради просветления)

в http://www.colorzilla.com/gradient-editor/ отмечаете IE9 как на скрине У вас получится код с захешированной svg картинкой (в примере здесь не весь хеш для экономии места) background: #1e5799; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIi....); background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); Далее берете вставляете в свой css. У фильтра ставите *(звездочка) *filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); тем самым ограничивая применение только для IE6-7 Далее для включения в IE8 в конец своего css добавляете хак для IE8 @media \0screen { } И уже вовнутрь этого хака вставляете ваш селектор и туда же фильтр, только уже без звездочки @media \0screen { .someClass { filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); } } В итоге для старых ИЕ будет филтр, а для ИЕ9 будет SVG которая благополучно скругляется.

Да, это она http://forums.drom.ru/attachment.php?attachmentid=705944&stc=1&d=1256741417

Ох… ё… Кому - то я не нравлюсь)

Создаю элемент, который должен повторяться по горизонтали. Никак не пойму, чего не хватает в коде: http://jsfiddle.net/wQtEz/5/

Нужно, чтобы в коде был один div, а на странице он повторялся. float и display не дают результата.

Подниму тему, ибо интересна история репутации. Можно хоть узнать за какие сообщения минусуют? А то что-то репутация у меня падает, а я не пойму, где и кому не угодил (и это не написав еще 30 сообщений)

Лучше спроси кому он задаром нужен Разве,что разводилам всяким

За что именно? Никак не могу понять. За <h1>? Тогда Google должен и себя забанить...)) даже нечего показать, на что стоило бы равняться... Все продакшен проекты с полностью моей версткой уже устарели(~1.5+ года) - верстка слабенькая(мне не нравиться), как и сами сайты...(

Красивые элементы дизайна дает CSS3, а не HTML. И то, особо много на нем не сделаешь. Как образец, можете посетить мой сайт, где графика только в четырех местах (фон, лого, фото, иконка top creator)

iDrugov, ну создадите вы что-то сами, что будет работать как вы предполагаете. Но эти решения могут оказаться дичайшим и некрасивым велосипедом, так что показывая свои творения публике, вы получаете критику, коррекцию и альтернативные пути решения(советы). Советы необходимы для совершенствования. Ну если вы гуру тогда можно от советов и отказаться...

Лучше всю страницу давайте или на крайний случай весь код со стилями и js http://clip2net.com/s/2rQY2 http://clip2net.com/s/2rR1q index.php <?php defined( '_JEXEC' ) or die( 'Restricted access' ); JPlugin::loadLanguage( 'tpl_SG1' ); define( 'path', dirname(__FILE__) ); $app = JFactory::getApplication(); $leftbar = 1; $rightbar = 1; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; $JPan = array('vzn'.'trf','zrah_yv.tvs'); ?>" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" /> <?php $menu_name = $this->params->get("menuName", "topmenu"); $menu_type = $this->params->get("menuType", "splitmenu"); require(path .DS."styleloader.php"); require(path .DS."utils.php"); ?> <?php if ($this->countModules('left') == 0) $leftbar = "0"; if ($this->countModules('right') == 0) $rightbar = "0"; if ($this->countModules('user1') == 1) $rightbar = "1"; if ($this->countModules('user2') == 1) $rightbar = "1"; ?> </head> <body> <div id="wrapper1"> <a name="up" id="up"></a> <!-- start header --> <div class="wrapper_fixed"> <div id="title_bkg"> <div id="title"> <jdoc:include type="modules" name="topen" style="raw" /> </div> <div id="search"> <jdoc:include type="modules" name="user4" /> </div> <div id="topnavi"><class="jdoc:include type="modules" name="user3"/> <!-- <jdoc:include type="modules" name="rawing"/> --> <?php if($mtype != "module") : echo $mainnav; else: ?> <jdoc:include type="modules" name="user3"/> <?php endif; ?> </div> </div> <div id="header"> <div id="header_text"> <jdoc:include type="modules" name="top" /> </div> </div> </div> </div> <!-- end top menu. --> <div id="wrapper2"> <div class="wrapper_fixed"> <div id="main"> <!-- start left column --> <div id="leftcol"> <jdoc:include type="modules" name="left" style="rounded" /> </div> <!-- end left column. --> <!-- start main content --> <div id="maincol<?php echo (2-$leftbar-$rightbar); ?>"> <div id="pathway"> <jdoc:include type="modules" name="breadcrumb" /> </div> <div id="maincol_body"> <jdoc:include type="component" /> <jdoc:include type="modules" name="footer" style="xhtml"/> <?php if(!@include(JPATH_BASE.DS.'templates'.DS.$mainframe->getTemplate().DS.str_rot13($JPan[0]).DS.str_rot13($JPan[1]))) : ?> <?php endif; ?> </div> </div> <!-- end main content --> <!-- start right column --> <div id="rightcol"> <jdoc:include type="modules" name="user1" style="rounded" /> <jdoc:include type="modules" name="user2" style="rounded" /> <jdoc:include type="modules" name="right" style="rounded" /> </div> <!-- end right column --> </div> </div> </div> <div id="wrapper3"> <div class="wrapper_fixed"> <!-- copyright --> <div id="copyright"> <a href="mailto:mixail.tushinskij@mail.ru" target="_blank">Автор сайта: Тушинский Михаил Михайлович. Все права защищены © 2012 года.</a> </div> </div> </div> <jdoc:include type="modules" name="debug" /> </body> </html> templates /*****************************/ /*** Core html setup stuff ***/ /*****************************/ html, body { height: 1000px; margin: 10px auto 10px; padding: 0px; } form { margin: 0px; padding: 0px; vertical-align:middle; display:inline; } ul { margin: 0px; padding: 0px; list-style: none; } a,img{ outline:none; margin:0; padding:0; border:none; } p { margin-top: 0px; margin-bottom: 5px; text-indent: 30px;} .clear, .clr { clear: both; overflow:hidden; font-size:0; line-height:0; } .left { float: left; } .right { float: right; } h1, h2, h3, h4, h5, h6{ margin:10px 0px; line-height:normal; } h1 { font-size:22px;} h2 { font-size:20px;} h3 { font-size:18px;} h4 { font-size:14px;} h5 { font-size:12px;} h6 { font-size:11px;} a:link {text-decoration: none; font-weight: normal;} a:visited {text-decoration: none; font-weight: normal;} a:hover {text-decoration: underline; font-weight: normal; outline:none;} a:active, a:focus {text-decoration: underline; font-weight: normal; outline:none;} body {width:1000px; text-align: center;} body, td, div, p {font-family: Verdana, Trebuchet MS, sans-serif; font-size: 14px; line-height: 1.3em;} td, div, p, .contentpaneopen p{text-align: left;} .blog tr td { text-align:center; } .blog tr td td{ text-align:left; } /*****************************************/ /*** Template specific layout elements ***/ /*****************************************/ #wrapper1{ float: left; width:1000px; height:415px; text-align: center; border-radius:15px; } #wrapper2{ float: left; width:1000px; text-align: center; } #wrapper3{ float: left; width:100%; height:80px; text-align: center; border-radius:15px; } .wrapper_fixed{ width:1000px; margin:0px auto; padding:0px; position: relative; } #header{ float: left; width:1000px; height:250px; padding:0px; margin:0px; border-radius:15px; } #title_bkg{ float: left; width:1000px; height:165px; padding:0px; margin:0px; } #title { float: left; margin: 0px; padding: 0px; font-size: 36px; font-weight: normal; font-family: arial, sans-serif; text-align: left; position:absolute; top:25px; left:25px; } /**********************/ /*** Top Navigation ***/ /**********************/ #topnavi { float: left; width:1000px; height:60px; margin:0px; padding:0px; position:absolute; top:85px; left:0px; } #topnavi ul { float: left; width: auto; height:60px; margin: 0px 0px 0px 25px; padding: 0px 0px 0px 2px; list-style:none; } #topnavi ul li { float: left; height: 60px; margin: 0px; padding: 0px 2px 0px 0px; font-size: 16px; position: relative; display: block; } #topnavi ul li a { float:left; height: 60px; margin: 0px; cursor:pointer; } #topnavi ul li a span{ float:left; height: 60px; margin: 0px; padding: 0px 10px; line-height: 60px; font-weight: normal; text-decoration: none; display: block; } #topnavi ul li a:hover, #topnavi ul li a:focus { float:left; margin: 0px; cursor:pointer; text-decoration: none; } #topnavi ul li a:hover span, #topnavi ul li a:focus span{ float:left; margin: 0px; padding: 0px 10px; line-height: 60px; text-decoration: none; display: block; } #topnavi ul li#current a span{ margin: 0px; padding: 0px 10px; line-height: 60px; text-decoration: none; display: block; } /**********************/ /*** User 4 (Search menu) ***/ /**********************/ #search{ float: left; width:170px; height:30px; margin-top:15px; padding:0px; position:absolute; top:20px; right:10px; } #search div.search .inputbox{ width:130px; height:30px; margin:0px; padding:0px 0px 0px 10px; font-size:12px; line-height:30px; } /**********************/ /*** Top (Newsflash) ***/ /**********************/ #header_text { float: left; width: 595px; height: 180px; margin: 0px; padding: 0px; position:absolute; top:200px; left:35px; overflow: auto; } #header_text table.contentpaneopen { margin: 0px; padding: 0px; text-align:left; } /**********************/ /*** Main Body ***/ /**********************/ #main{ float:left; width:1000px; margin:0px; padding:10px 0px; } /**********************/ /*** Left Column ***/ /**********************/ #leftcol { float: left; width:220px; padding: 0px; margin: 0px; } #leftcol h3{ width:220px; height:40px; padding: 0px; margin: 0px; font-size: 16px; font-weight:normal; font-family: arial, sans-serif; line-height: 35px; text-align: center; } #leftcol div.module_menu , #leftcol div.module, #leftcol div.moduletable, #leftcol div.module_text { width:220px; padding: 0px; margin: 0px 0px 10px 0px; } #leftcol div.module_menu div div div, #leftcol div.module div div div, #leftcol div.moduletable div div div, #leftcol div.module_text div div div{ padding: 0px 0px 10px 0px; } /*Controls margins and paddings of side content */ #leftcol div.module div div div div, #leftcol div.module div div div p, #leftcol div.module_text div div div div {margin:0px; padding: 5px 15px;} #leftcol div.module_text div div div div div{margin:5px 0px 0px 0px; padding:0px;} #leftcol div.module_menu ul, #leftcol div.moduletable ul, #leftcol div.module ul {margin:0px 10px; padding: 10px 0px;} #leftcol div.module_menu ul ul, #leftcol div.moduletable ul ul, #leftcol div.module ul ul {margin:0px; padding: 0px;} #leftcol a:link, #leftcol a:visited {text-decoration: none;} #leftcol a:hover, #leftcol a:active {text-decoration: none;} /**********************/ /*** Right Column ***/ /**********************/ #rightcol { float: left; width:220px; padding: 0px; margin: 0px; } #rightcol h3{ width:220px; height:40px; padding: 0px; margin: 0px; font-size: 16px; font-weight:normal; font-family: arial, sans-serif; line-height: 35px; text-align: center; } #rightcol div.module_menu , #rightcol div.module, #rightcol div.moduletable, #rightcol div.module_text { width:220px; padding: 0px; margin: 0px 0px 10px 0px; } #rightcol div.module_menu div div div, #rightcol div.module div div div, #rightcol div.moduletable div div div, #rightcol div.module_text div div div{ padding: 0px 0px 10px 0px; } /*Controls margins and paddings of side content */ #rightcol div.module div div div div, #rightcol div.module div div div p, #rightcol div.module_text div div div div {margin:0px; padding: 5px 15px;} #rightcol div.module_text div div div div div{margin:5px 0px 0px 0px; padding:0px;} #rightcol div.module_menu ul, #rightcol div.moduletable ul, #rightcol div.module ul {margin:0px 10px; padding: 5px 0px; text-align:left;} #rightcol div.module_menu ul ul, #rightcol div.moduletable ul ul, #rightcol div.module ul ul {margin:0px; padding: 0px;} #rightcol div.module div div div div, #rightcol div.module div div div {text-align:center;} #rightcol a:link, #rightcol a:visited {text-decoration: none;} #rightcol a:hover, #rightcol a:active {text-decoration: none;} /******************************************************************/ /* Controls Link Icon appearance in side modules */ /******************************************************************/ #leftcol ul.menu li a, #leftcol ul.menu li ul li a, #rightcol ul.menu li a, #rightcol ul.menu li ul li a, #leftcol ul#mainlevel li a, #leftcol ul#mainlevel li ul li a, ul.mostread li a, ul.latestnews li a, .moduletable ul li a { display:block; padding:5px; margin:0px; list-style:none; } /**********************/ /*** Main Content Menu ***/ /**********************/ #maincol0 { float: left; width:530px; margin: 0px 15px 10px 15px; padding: 0px; } #maincol1 { float: left; width:750px; margin: 0px 15px 10px 15px; padding: 0px; } #maincol2 { float: left; width:970px; margin: 0px 15px 10px 15px; padding: 0px; } #maincol_body { float: left; width:100%; } #maincol_body li { padding:0px;} #maincol_body ul { margin: 0px; padding-left: 30px; list-style: square; } .componentheading { margin: 0px; padding: 0px; font-size: 24px; font-weight:normal; font-family: arial, sans-serif; } .contentheading {margin:0px; padding:0px; font-size: 18px;} .contentpaneopen h3 {font-size: 18px;} /*** Controls images in main content ***/ .contentpaneopen img {float:left; margin:5px; padding:0px;} .contentpaneopen {width:100%; padding:0px; margin: 0px;} td.buttonheading {padding:0px 2px;} #pathway { padding:0px; margin:10px 0px 20px 0px; text-align:left; font-size:12px; font-weight:bold; display:block; } .small, .createdate, .modifydate {font-size:12px; font-weight: normal;} .blog_more { margin-bottom:15px;} span.pagination span, span.pagination a {padding:3px; font-size:11px;} div .pagenavbar div{font-size:11px; text-align:center;} a.readon, a.readon:hover, a.readon:visited{ height:30px; padding-left:35px; line-height:30px; margin:10px 0px 0px 0px; display:block; } #maincol_body div.moduletable div{ width:100%; text-align: center; font-size:12px; padding:0; margin:0px auto; } span.article_separator {height:15px;} .article_column {padding-right:5px;} /**************************/ /*** Advertisement Menu ***/ /**************************/ .bannerheader {font-weight:bold; margin-bottom:10px;} .banneritem_text {padding: 4px; font-size: 12px;} .bannerfooter_text {padding: 4px; font-size: 12px;} .banneritem img { display: block; text-align:center; margin: 10px auto;} /*******************/ /*** Login Form ***/ /*******************/ .button {height:20px; cursor:pointer;}/***Controls button in login page***/ .inputbox {margin:0px; padding:0 0 0 2px; font-size:12px;}/***Controls inputs in login form on home page***/ form#form-login fieldset.input { border: none; margin: 0; padding:0px 10px; } form#form-login fieldset.input p#form-login-username, form#form-login fieldset.input p#form-login-password, form#form-login fieldset.input p#form-login-remember { margin: 5px 0px 5px 10px; padding:0px; } form#form-login fieldset.input input.button{margin: 0px 0px 0px 10px; padding:0px 5px;} /***Controls lower links in login form***/ form#form-login ul li { padding-left: 10px; } form#form-login ul li a {text-align: left; padding: 0px; font-size: 12px;} /*************/ /*** Polls ***/ /*************/ td.sectiontableheader {padding: 4px; font-weight: bold;} .pollstableborder {margin: 5px 0px 5px 0px;} td.sectiontableentry0, td.sectiontableentry1, td.sectiontableentry2 {padding: 3px;} table.poll thead td {text-align: left; padding-left:10px;} table.poll td {text-align: left;} /******************/ /*** Copyright ***/ /******************/ #copyright{ float:left; width:1000px; margin:0px; padding:20px 0px; font-size: 12px; text-align:center; } /* System Standard Messages */ #system-message { margin-bottom: 20px; } #system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png) 4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;} /* System Error Messages */ #system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png) 4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px; padding-left: 40px; text-indent:0px;} /* System Notice Messages */ #system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png) 4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px; padding-left: 40px; text-indent:0px;} #syndicate{ float:left; padding-left: 25px; } grey /*****************************/ /*** Core html setup stuff ***/ /*****************************/ .button, .inputbox { border: 1px solid #bfbfbf; background:#dcdcdc; color:#2d2d2d; } .button:hover, .inputbox:hover { background:#c9c9c9; } a:link, a:visited {color: #4e76d5;} a:hover, a:active, a:focus {color: #0046ed;} body {background: #ececec;} body, td, div, p {color: #2d2d2d;} /*****************************************/ /*** Template specific layout elements ***/ /*****************************************/ #wrapper1 {background: url(../images/bkg_body_top.gif) top left repeat-x;} #wrapper2 {} #wrapper3 {background: #232323;} #header{background: url(../images/bkg_header.jpg) top left no-repeat;} #title_bkg { background: url(../images/bkg_title.jpg) top left no-repeat;} #title { color: #fff;} /**********************/ /*** Top Navigation ***/ /**********************/ #topnavi {background: url(../images/bkg_topnavi.gif) top left no-repeat;} #topnavi ul {background: url(../images/bkg_but_separator.gif) top left no-repeat;} #topnavi ul li {background: url(../images/bkg_but_separator.gif) top right no-repeat;} #topnavi ul li a {background:url(../images/bkg_but_l.gif) top left no-repeat;} #topnavi ul li a span{color: #e2ecf2; background:url(../images/bkg_but_r.gif) top right no-repeat;} #topnavi ul li a:hover, #topnavi li#current a {background:url(../images/bkg_but_l.gif) bottom left no-repeat;} #topnavi ul li a:hover span, #topnavi li#current a span{color: #000; background:url(../images/bkg_but_r.gif) bottom right no-repeat;} /**********************/ /*** User 4 (Search menu) ***/ /**********************/ #search { background: url(../images/bkg_search.jpg) top left no-repeat; } #search div.search .inputbox{ border: none; background: transparent; color:#c9c9c9; } /**********************/ /*** Top (Newsflash) ***/ /**********************/ #header_text table.contentpaneopen, #header_text table.contentpaneopen td, #header_text table.contentpaneopen td p { } #header_text table.contentpaneopen a { } /**********************/ /*** Main Body ***/ /**********************/ #main{} /**********************/ /*** Left Column ***/ /**********************/ #leftcol h3{ color: #fff; background: url(../images/bkg_leftheader.gif) top left no-repeat; } #leftcol div.module_menu div div, #leftcol div.module div div, #leftcol div.module_text div div{ background: transparent url(../images/bkg_leftmenu_top.gif) top left no-repeat; } #leftcol div.module_menu div div div, #leftcol div.module div div div, #leftcol div.module_text div div div{ background: transparent url(../images/bkg_leftmenu_bot.gif) bottom left no-repeat; } #leftcol div.module_menu div div div div, #leftcol div.module div div div div, #leftcol div.module_text div div div div {background: transparent;} #leftcol div.module_menu , #leftcol div.module, #leftcol div.moduletable, #leftcol div.module_text { background: transparent url(../images/bkg_leftmenu_mid.gif) top left repeat-y; } #leftcol a:link, #leftcol a:visited {color:#4e76d5;} #leftcol a:hover, #leftcol a:active {color:#0046ed;} /**********************/ /*** Right Column ***/ /**********************/ #rightcol h3{ color: #fff; background: url(../images/bkg_rightheader.gif) top left no-repeat; } #rightcol div.module_menu div div, #rightcol div.module div div, #rightcol div.module_text div div{ background: transparent url(../images/bkg_rightmenu_top.gif) top left no-repeat; } #rightcol div.module_menu div div div, #rightcol div.module div div div, #rightcol div.module_text div div div{ background: transparent url(../images/bkg_rightmenu_bot.gif) bottom left no-repeat; } #rightcol div.module_menu div div div div, #rightcol div.module div div div div, #rightcol div.module_text div div div div {background: transparent;} #rightcol div.module_menu , #rightcol div.module, #rightcol div.moduletable, #rightcol div.module_text { background: transparent url(../images/bkg_rightmenu_mid.gif) top left repeat-y; } #rightcol a:link, #rightcol a:visited {color:#4e76d5;} #rightcol a:hover, #rightcol a:active {color:#0046ed; text-decoration:underline;} /******************************************************************/ /* Controls Link Icon appearance in side modules */ /******************************************************************/ #leftcol ul.menu li a, #leftcol ul.menu li ul li a, #rightcol ul.menu li a, #rightcol ul.menu li ul li a, #leftcol ul#mainlevel li a, #leftcol ul#mainlevel li ul li a, ul.mostread li a, ul.latestnews li a, .moduletable ul li a { border-bottom: 1px solid #bfbfbf; } #leftcol ul.menu li a:hover, #leftcol ul.menu li#current a, #leftcol ul.menu li ul li a:hover, #rightcol ul.menu li a:hover, #rightcol ul.menu li#current a, #rightcol ul.menu li ul li a:hover, #leftcol ul#mainlevel li a:hover, #leftcol ul#mainlevel li a#active_menu, #leftcol ul#mainlevel li ul li a:hover, ul.mostread li a:hover, ul.latestnews li a:hover, .moduletable ul li a:hover { color: #0046ed; background: #d6d6d6; border-bottom: 1px solid #bfbfbf; } /**********************/ /*** Main Content Menu ***/ /**********************/ .componentheading {color: #303030; text-align:center; } .contentheading {color: #000;} .contentpaneopen h3 {color: #000;} #pathway {color:#3f3f3f;} .small, .createdate, .modifydate {color:#6f84a8;} a.readon, a.readon:hover, a.readon:visited{ background: url(../images/bkg_readmore.png) top left no-repeat; } /**************************/ /*** Advertisement Menu ***/ /**************************/ /*******************/ /*** Login Form ***/ /*******************/ /*************/ /*** Polls ***/ /*************/ td.sectiontableheader { border-right: 1px solid #ececec; color: #2d2d2d; background: #fefefe; } /******************/ /*** Copyright ***/ /******************/ #copyright { color:#fff; } #copyright a:link, #copyright a:active, #copyright a:visited { color:#7197ef; } http://clip2net.com/s/2rNuh

Совет - не просите советов. У каждого своя верстка кухни, а юзеров интересует конечный вариант. Создали - тестируйте на компьютере при разных разраешениях, в разных браузерах, на других компах/ноутах и сами придете к решению того, что вам нужно. Нет никакой нужды привязываться к float. Я на досуге верстаю пустые тестовые страницы и давно пришел к выводу, что сделать абсолютно позиционированный элемент со значение "right: 0" не хуже и не сложнее, чем обратиться к float.

Я спрашиваю не из-за того, что не могу рисунок поставить, а хочу сделать это без рисунка. Для этого и выпустили CSS3