Leaderboard

Тут все верно и контент за счет отступов располагается по середине так как wrapper имеет 100%, то он занимает всю ширину экрана и "menuGr" и "menuBb" переносятся на следующую строку теперь чтобы втиснуть "menuGr" слева от контента задаем ему отрицательный отступ, т.е. он как бы поднимается на уровень контента и сдвигается на 100% от правого края экрана "menuBb" все еще находится ниже в потоке, поэтому его тоже отрицательным отступом поднимаем и располагаем справа от контента UPD. сорри, не видела, что уже ответили

7 июля 2011 года на форуме стартует небольшой конкурс по вёрстке. Правила мини-конкурса В конкурсе имеет право принять участие любой желающий зарегистрированный на форуме. Предварительная регистрация или заявка на конкурс не требуется. Начало конкурса в 7:00 UTC (10 Киева, 11 Москвы, 13 Екатеринбурга, 14 Омска, 15 Красноярска, 16 Иркутска, 17 Якутска, 18 Владивостока, 19 Магадана). На конкурс выставляется три задачи по вёрстке объединённые темой блоков. На решение всех трёх задач даётся три часа времени. Участники выкладывают свои решения в специально созданную для этого тему. Время сдачи решения фиксируется по времени сообщения, чьё сообщение выше, тот сдал работу раньше. Результат принимается в виде ссылки на сайт jsfiddle.net, соответственно, должно быть три ссылки на три разных решения. После добавления сообщения его запрещается изменять, в противном случае сообщение удаляется сразу же. Если участник считает, что допустил ошибку в ссылке или решении, он должен создать новое сообщение. Предыдущее при этом считается недействительным. Изменение сообщения фиксируется по надписи «Отредактировано», которая автоматически появляется после правки. Через три часа тема закрывается, новые работы не принимаются. Спустя сутки подводятся итоги, объявляются результаты. Подведение итогов Победитель выявляется по сумме заработанных баллов, они начисляются за следующее. Задача решена полностью и в срок, с соблюдением поставленных требований — 50 баллов. Задача решена полностью и в срок, но некоторые требования не выполнены — 30 баллов. Сдал работу первым — 20 баллов. Сдал работу вторым — 15 баллов. Сдал работу третьим — 10 баллов. Сдал работу четвёртым — 5 баллов. Последующие участники получают 0 баллов. Также на усмотрение судьи могут начисляться или сниматься от 0 до 20 баллов. Начисления могут быть за изящность решения, компактность кода, оригинальный подход и др. Баллы могут отниматься, к примеру, за «грязный» код. Таким образом, максимально возможное число баллов равно 190. Награждение Первые три победителя получат футболки с логотипом htmlbook.ru. Первым десяти участникам, набравшим максимальное число баллов, в профиль на форуме добавляется медаль о том, что её обладатель является победителем мини-конкурса по вёрстке. Также его репутация повышается на 30 единиц. Участник, набравший 150 и более баллов (т.е. правильно и в срок решивший все задачи), получает медаль в профиль, что он является лауреатом мини-конкурса.

Это пи... пи...пи... Профессиональная команда сотрудников... пи...пи...пи...

В данной конструкции та часть сайта в которой будет самая полезная информация идет первой в коде для большей поисковой оптимизации, но в тоже время левая колонка так же присутствует, но требуется, чтобы в коде она шла после контента. Для этого и применяется маргин -100% чтобы визуально колонка была левее контента, а в коде она идет в потоке после колонки контента Вот как-то так

Мой вольный перевод статьи молодого голландского блоггера Marco Kuiper С тех пор, как состоялся релиз Firefox 4, появилась возможность использовать множество разных новых CSS-фишек. Очень радует, что Firefox - 2-й по популярности браузер в мире. А это означает, что больше людей будут иметь возможность лицезреть все ваши модные штуки, которые вы будете создавать посредством CSS. Я недавно просматривал список CSS-селекторов, которые включены в Firefox 4 и нашел интересный селектор :any() (теперь он доступен и у Webkit). Сейчас мы с вами посмотрим, что может данный селектор и вообще, зачем нам с вами его использовать. Имейте в виду, что :any() не является частью спецификации CSS3 (пока). Но с тех пор, как Webkit стал поддерживать этот селектор, я уверен, что в скором будущем другие браузеры последуют его примеру. Да, и еще одна вещь: чтобы заставить его работать в Firefox, используйте -moz- префикс (-webkit- для webkit-браузеров). Меньше слов - больше дела, посмотрим, что эта штука умеет. Итак, у нас проблема: А проблема заключается в большом количестве вложенных элементов разных уровней глубины. Вот например: /* Общие ссылки на сайте */ /* Уровень 0 */ a { color:#eee; } /* Специфичные ссылки в списках, навигации, header'e и footer'е */ /* Уровень 1 */ li a, nav a, header a, footer a { color:#555; } /* Еще одни специфичные ссылки, следующий уровень вложенности */ /* Уровень 2 */ section li a, section nav a, section header a, section footer a, article li a, article nav a, article header a, article footer a, aside li a, aside nav a, aside header a, aside footer a { color:#000; } /* Уровень 3 */ /* Ну, придумайте там что-нибудь сами */ Как вы можете видеть, чем глубже по уровням мы продвигаемся, тем труднее читать/понимать наши CSS селекторы. Решение проблемы: Селектор :any() создавался для группирования нескольких таких вот вложенных селекторов вместе. Влияние селекторов на элементы остается тем же, единственное отличие: длинна и читабельность. Сравним: /*Общие ссылки на сайте */ /* Уровень 0 */ a { color:#eee; } /* Специфичные ссылки в списках, навигации, header'e и footer'е */ /* Уровень 1 */ :any(li, nav, header, footer) a { color:#555; } /* Еще одни специфичные ссылки, следующий уровень вложенности */ /* Уровень 2 */ :any(section, article, aside) :any(li, nav, header, footer) a { color:#000; } /* Следующий уровень, применим к заголовкам */ /* Уровень 3 */ :any(section, article, aside) :any(li, nav, header, footer) :any(h1, h2, h3) a { color:#aaa; } Я в курсе, что элемент hgroup больше подходит для последних элементов (вместо h1, h2, h3), но тут я предпочитаю использовать "старые" заголовки. Просто чтобы код был более понятным. Мысли в слух: Как можно видеть, вы можете группировать несколько специфичных селекторов вместе с помощью :any(). Так легче читать код, а значит легче вносить изменения в ваш HTML и CSS. Но существуют ли еще какие-либо причины использовать этот селектор? Этот селектор особо полезен при использовании его в HTML5 тегах section, header, footer, nav, aside и т.д Так как HTML5 пытается избавится от разделения (div) и сделать HTML5 более значимым, этот CSS селектор позволяет сделать следующий шаг в достижении этой цели. Чтобы решить задачу, описанную выше(с несколькими уровнями вложенности ), мы могли бы использовать определенные классы, которые сделали бы эту работу за нас. Но зачем нам это делать? Вывод: данный селектор особенно полезен когда у нас есть четкий, лаконичный HTML5 с вложенными элементами, и когда мы не хотим использовать селектор class (или id). Правда, честно сказать, я пока не видел такое большое количество вложенных элементов на вебсайтах, так что не знаю, нужен ли нам пока селектор :any()? А что вы думаете по этому поводу?

xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx [url="http://zona.ws