Веб программирование

Позиционировать див div посредине.

admin — Tue, 30 Mar 2010 06:03:33 +0000

Суть данного вопроса заключается в позиционировании контейнера, которым выступает div или слой (layer), посредине окна браузера, без использования javascript. Эта простая задача решается с помощью CSS.

Сначала нужно в html документе указать тег , подробнее об этом здесь. После этого, нужно прописать вот такой стиль:

#container{
position:relative;
width:1000px;
height:auto;
margin:0 auto;
}

Див с ИД= «container» будет находится посредине окна браузера. Все остальные элементы разметки должны быть в этом контейнере, и позиционироваться относительно его как родителя (position:relative;).

Вот так, приблизительно, должна выглядеть ваша html страница:

Слой посредине

Познавательна страничка

По поводу стиля * и стиля body читайте здесь.

Как округлить уголки на CSS?

admin — Tue, 23 Mar 2010 07:23:32 +0000

Существует много способов округления элементов html разметки: дивов, блоков, слоёв, div, layer. Свойства CSS 3 позволяют округлить любой блок без каких либо усилий. Но это, только CSS 3, который пока понимает только Mozilla Firefox 3. Все остальные браузеры пока игнорируют новое детище W3C.

Создаем округленные уголки с помощью рисунка или рисунков:

Чтобы округлить уголок любого элемента нужно, для начала, нарисовать круг определённого радиуса. Этот круг можно порезать на 4 одинаковых кусочка. Для тех, кто понимает в CSS 2.1 больше, скажу что этот круг резать на кусочки не обязательно. Можно использовать один цельный круг, который будет подставляться в разные блоки, с разным смещением. Ну что же, приступим к делу:

111
111

Выше приведенный пример не будет работать, так как ему не хватает рисунка. Для того, чтобы посмотреть работоспособность примера скачайте, и разархивируйте этот архив. Надеюсь, у вас не будет проблем. Единственное, что IE 6 старой версии может отказаться принимать background:url(kryg.gif) no-repeat scroll bottom left, так как MS, сначала, забыл описать свойство bottom. Бывает. У нормальных версиях IE 6 всё работает как надо.

Теперь немного о примере:

Див info информационный блок, который мы и будем округлять. top_ok и bottom_ok – это наши контейнеры, в которых будут находиться рисунки уголков для округления. right_ok, left_ok, bright_ok, bleft_ok –это и есть наши рисунки уголков, которые прикреплены background дом к диву.
Вы спросите, почему я сделал всё одним кругом? Ведь так намного сложнее. Для этого округления уголков используется один рисунок потому, что загрузив эго у нас сразу видно все уголки сразу, а не приходиться ждать, когда все рисунки, разные, загрузяться по очереди. Плюс, будуть отображаться не одновременно.

Создаём красивое меню на CSS без использования JavaScript.

admin — Tue, 16 Mar 2010 10:11:45 +0000

Задача создать меню сайта постает каждый раз когда, когда хочется сделать сайт непохожий на предыдущий. Сейчас существует множество разных DHTML MENU Builder, которые сами могут сделать красивые меню, или заготовки для меню. Конечно, это всё хорошо, но как быть, когда заказчик хочет только такое меню, как в макете? (Шаг влево, шаг вправо расстрел.) В принципе можно подредактировать автоматически созданное меню, но там иногда бывают такие вещи, что не каждый программист разберёт. А чуть не забыл, в автоматическом меню слишком много ненужного кода, и там очень часто проскакивает JavaScript, а заказчик хочет без JavaScript. Как быть в такой ситуации?

Я предлагаю создать меню самому с помощью CSS. Все меню, созданные на основе свойств CSS базируются на таких событиях ссылки, как:

a:hover – наведен курсор на ссылку;
a:link – ни разу не посещаемая вами ссылка;
a:visited – вы уже здесь были;
a:active – вы нажали на ссылку.

Думаю, более опытные пользователи уже поняли, как можно использовать эти события, ну а для тех кто только учиться объясню более подробно, и приведу пример CSS динамичного, красивого меню. Для того, чтобы создать меню достаточно объединить события hover и active, а также link и visited.

Пример CSS меню:

В этом примере показано, как с помощью смены цвета можно сделать интересное меню для html страницы. Этот стиль: ul li a:link div, ul li a:visited div сработает когда ссылка не будет активная, а этот ul li a:hover div, ul li a:active div, когда над ссылкой проводятся какие-то действия.

Динамическое меню можно делать не только со сменой цвета, можно экспериментировать с display, width … Это ваша фантазия, с чем придумаете, с тем и экспериментируйте.

Как убрать обтекание? Что такое обтекание? CSS.

admin — Tue, 16 Mar 2010 09:59:57 +0000

Начну с последнего. Обтекание, в CSS, это позиционирование слоя, дива, div, картинки, img, слева или справа текста или других выше перечисленных элементов таким образом, что элемент становиться препятствием, которое текст обходить и получается эффект обтекания. Для обтекания нескольких слоёв, дивов, div, img, картинки этими же элементами, это означает что два или больше элемента веб страницы будут размещены друг за другом. Если это позволяет размер контейнера или страницы. Обтекание: слоёв, дивов, div, img, картинок реализуется, в CSS, с помощью свойства стиля float. Подробнее о float можно почитать в предыдущей статье здесь.

Тем кто разобрался как создать обтекание и зачем оно нужно, хочу рассказать как это обтекание убрать, при позиционировании. Можно в элементе который стоит левее написать свойство CSS float:none;, но это не всегда работает и не во всех браузерах. Лучше воспользоваться железным свойством CSS clear. Clear, от слова очистить, позволяет убрать обтекание любого типа. Для этого у свойства CSS clear существуют такие параметры: clear: left – убрать обтекание слева; clear: right – убрать обтекание справа; clear: none – не убирать обтекание; clear:inherit – убрать обтекание, как это делает родительский элемент; ну и самый главный параметр для удаления обтекания clear:both – убирает любые виды обтекания. Если честно, то в своей практике я постоянно использую параметр clear:both. Он очень харашо подходит, когда не хочется гадать наверняка, что нужнее clear: right или clear: left.
Надеюсь, что эта статья была понятна и не нужно наводить примеры использования свойства CSS clear, для удаления обтекания. Ну вдруг что не понятно пишите ваши вопросы в комментарии.

Как растянуть одновременно несколько слоёв, дивов, div по высоте используя CSS.

admin — Wed, 13 Jan 2010 12:57:57 +0000

Я очень часто сталкивался с проблемой, когда нужно было растянуть две или три колонки разных слоёв, кто не понял слой – это тот же див, div, layer, samp. Ну не будем отвлекаться, слои, дивы, div и т.д. нужно растягивать по высоте одновременно, и без использования JavaScript, так как это уже извращение. В нашем управлении только html и CSS. Полгода назад, эта задача для меня была не решаемой, приходилось постоянно мухлевать. В Интернете было много решений, но они все были или кривоваты, или не работали в на всех известных мне браузерах. Как-то раз, я случайно, забрел на иностранный сайт и увидел там страницу сверстанную дивами, которые растягивались. Я взял продебажил эту страницу и на основе их реализации придумал свою. Об этом и пойдет дальше речь.

Резиновый шаблон для трех дивов, используя блочную или дивную div верстку.

Для создания колонок, слоёв, дивов одинаковой длины нужно три дополнительных элемента html разметки, проще говоря три

Пример трех одинаковых дивой вы можете скачать с ftp здесь. Разархивируйте архив, и запустите файл index.html. Неправда ли, сильно напоминает дизайн моего блога. Да, так и есть, это моя заготовка.

Теперь немного о коде:

– нужен для ограничения страницы;

– эти три слоя разбивают страницу на части, постоянно сдвигая её в лево;

– слои для помещения информации.

Как вы поняли, здесь главную роль играет обман зрения, который появляется в результате наложения слоёв, а рисунки с папки img позволяют это накладывание скрыть. Если разобраться, то этот пример становиться простым и понятным. Надеюсь, у вас проблем не будет. Выше приведённый пример позволяет создавать 3 дивы одинаковой высоты, которые одновременно растягиваются. Модернизировав код, можно создать такой же резиновый шаблон и для 2, 4, и больше дивов одинаковой, зависимой друг от друга высоты, или длины.