css - dimon page

css - dimon page http://tudimon.com/ ru css - dimon page http://tudimon.com/yandexlogo.gif css - dimon page http://tudimon.com/ DataLife Engine Как заставить min-height работать http://tudimon.com/2009/10/15/kak-zastavit-min-height-rabotat.html Реализация min-height в разных браузерах отличается и в результате где-то работает, а где-то и не работает. Рассмотрим способы реализации min-height, работающие во всех браузерах. css dimon Thu, 15 Oct 2009 11:09:13 -0500

Реализация min-height в разных браузерах отличается и в результате где-то работает, а где-то и не работает. <br /><br />Проверим код в доступных браузерах:<br /><br /><div class="scriptcode"><div style="background:White; border: solid 1px black; min-height: 50px;">Text</div></div><br /><br /><div class="bl111">Text</div><br /><br />IE 6 <b>-</b><br />IE 8 <b>+</b><br />Opera 10 <b>+</b><br />Firefox 3 <b>+</b><br /><br />Разработчики IE 5-6 реализовали свойство min-height, просто решили его назвать height. т.е. height для 5-ой и 6-ой версий ведет себя именно как min-height. <br /><br />Рассмотрим способы реализации min-height, работающие во всех браузерах (в старых версиях).<br /><br /><b>Вариант 1</b><br /><br /><div class="scriptcode"><div style="background:White; border: solid 1px black; min-height: 50px; height:auto !important; height: 50px;">Text1</div></div><br /><br /><div class="bl222">Text1</div><br /><br />IE 6 <b>+</b><br />IE 8 <b>+</b><br />Opera 10 <b>+</b><br />Firefox 3 <b>+</b><br /><br /><b>Вариант 2</b><br /><br />С помощью javascript:<br /><br /><div class="scriptcode"><div style="background:White; border: solid 1px black; height: expression(this.scrollHeight < 51px ? '50px' : 'auto' ); min-height: 50px;">Text2</div></div><br /><br /><div class="bl333">Text2</div><br /><br />IE 6 <b>-</b><br />IE 8 <b>+</b><br />Opera 10 <b>+</b><br />Firefox 3 <b>+</b><br /><br />Недостатками данного метода является снижение скорости отображения страницы, а так же необходимость поддержки JS браузером. Хотя браузеров без поддержки ява-скриптов уже почти и не осталось, но иногда ява бывает отключена с точки зрения повышения безопасности.<br /><br />PS: Возможно, что на этой станичке Вы увидите, что первый и третий блок высотой не 50px - это накладывается DLE <img style="vertical-align: middle;border: none;" alt="feel" src="http://tudimon.com/engine/data/emoticons/feel.gif" />

DIV закругленные углы блока http://tudimon.com/2009/10/14/div-zakruglennye-ugly-bloka.html Сделаем блок с закругленными углами. css dimon Wed, 14 Oct 2009 13:49:59 -0500

Наиболее часто используемое решение закругление уголков прямоугольного блока при верске это использование четырех картинок с круглыми углами.<br /><br />Однако, такое решение имеет свои плюсы и минусы. <br />Из плюсов главный - возможность рисовать углы любой сложности и конфигурации. <br />Из недостатков – увеличение нагрузки на сервер, не лучший вид страницы при отключении отображения картинок.<br /><br />Второе решение скругление уголков без использования изображений основано только на HTML и CSS. Такое решение используется в GMail-е.<br />Недостаток такого решения – некоторая корявость кода и пиксализация скругленных углов.<br /><br />Код:<br /><div class="scriptcode"><style type="text/css"><br /><br />div {}<br />.RC-container { <br /> color: Azure;<br />}<br /><br />.RC-content {<br /> background-color: Azure;<br /> color: Blueviolet;<br /> padding: 5px;<br />}<br /><br />.RC-1, .RC-2, .RC-3, .RC-4 {<br /> background-color: Azure;<br /> color: Blueviolet;<br /> height: 1px;<br /> font-size: 1px;<br /> overflow: hidden;<br />}<br /><br />.RC-1 {<br /> margin: 0 5px;<br />}<br /><br />.RC-2 {<br /> margin: 0 3px;<br />}<br /><br />.RC-3 {<br /> margin: 0 2px;<br />}<br /><br />.RC-4 {<br /> margin: 0 1px;<br /> height: 2px;<br />}<br /></style><br /><br /><div style="width: 300px;"><br /><br /> <div class="RC-container"><br /> <div class="RC-1"> </div><br /> <div class="RC-2"> </div><br /> <div class="RC-3"> </div><br /> <div class="RC-4"> </div><br /> </div><br /><br /> <div class="RC-content">Попробуйте этих мягких булочек...<br>Попробуйте этих мягких булочек...<br>:-)</div><br /><br /> <div class="RC-container"><br /> <div class="RC-4"> </div><br /> <div class="RC-3"> </div><br /> <div class="RC-2"> </div><br /> <div class="RC-1"> </div><br /> </div><br /><br /></div><br /><br /></div><br /><br />А вот как это выглядит на практике:<br /><br /><div style="width: 300px;"><div class="RC-container"><div class="RC-1"> </div><div class="RC-2"> </div><div class="RC-3"> </div><div class="RC-4"></div></div><div class="RC-content">Попробуйте этих мягких булочек...<br />Попробуйте этих мягких булочек...<br />:-)</div><div class="RC-container"><div class="RC-4"> </div><div class="RC-3"> </div><div class="RC-2"> </div><div class="RC-1"> </div></div></div><br /><br />Принцип формирования - создание блоков высотой 1px и последоватьльное расширение/сужение их по горизонтали.

DIV прямоугольные блоки - положение друг относительно друга http://tudimon.com/2009/10/13/div-pryamougolnye-bloki-polozheni-drug.html Рассмотрим как прямоугольные блоки, заданые с помощью DIV-ов, могут распологаться друг относительно друга на одной странице. css dimon Tue, 13 Oct 2009 12:17:55 -0500

Рассмотрим как прямоугольные блоки, заданые с помощью DIV-ов, могут распологаться друг относительно друга на одной странице.<br /><br /><div class="scriptcode"><div style="background:White; border: solid 1px black;">Text1</div><br /><br /><div style="background:Aliceblue; border: solid 1px black;">Text2<br>Text2<br>Text2</div><br /><br /><div style="background:Cornsilk; border: solid 1px black;">Text3<br>Text3</div><br /></div><br /><br />А выглядеть это будет так:<br /><br /><div style="background:White; border: solid 1px black;">Text1</div><div style="background:Aliceblue; border: solid 1px black;">Text2<br />Text2<br />Text2</div><div style="background:Cornsilk; border: solid 1px black;">Text3<br />Text3</div><br /><br />Ограничим длину блоков, добавив свойство width:<br /><div class="scriptcode"><div style="background:White; border: solid 1px black; width: 50px;">Text1</div><br /><br /><div style="background:Aliceblue; border: solid 1px black;width: 60px;">Text2<br>Text2<br>Text2</div><br /><br /><div style="background:Cornsilk; border: solid 1px black; width: 70px;">Text3<br>Text3</div><br /></div><br /><div style="background:White; border: solid 1px black; width: 50px;">Text1</div><div style="background:Aliceblue; border: solid 1px black;width: 60px;">Text2<br />Text2<br />Text2</div><div style="background:Cornsilk; border: solid 1px black; width: 70px;">Text3<br />Text3</div><br /><br />Добавим свойтсво float:<br /><div class="scriptcode"><div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div><br /><br /><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br>Text2<br>Text2</div><br /><br /><div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br>Text3</div><br /></div><br /><br /><div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br />Text2<br />Text2</div><div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br />Text3</div><br /><br /><br /><br />Добавим еще один блок, не указав свойство float:<br /><div class="scriptcode"><div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div><br /><br /><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br>Text2<br>Text2</div><br /><br /><div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br>Text3</div><br /><br /><div style="background:Orange; border: solid 1px black;">Text4<br>Text4<br>Text4<br>Text4</div><br /></div><br /><br /><div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br />Text2<br />Text2</div><div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br />Text3</div><div style="background:Orange; border: solid 1px black;">Text4<br />Text4<br />Text4<br />Text4</div><br /><br />Куда он попал не понятно <img style="vertical-align: middle;border: none;" alt="belay" src="http://tudimon.com/engine/data/emoticons/belay.gif" /><br /> <br />Для того, чтобы прогнозировать расположение этого блока есть свойство clear (left, right, both, none):<br /><div class="scriptcode"><div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div><br /><br /><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br>Text2<br>Text2</div><br /><br /><div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br>Text3</div><br /><br /><div style="background:Orange; border: solid 1px black; clear: both;">Text4<br>Text4<br>Text4<br>Text4</div><br /></div><br /><br /><div style="background:White; border: solid 1px black; width: 50px; float: left;">Text1</div><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Text2<br />Text2<br />Text2</div><div style="background:Cornsilk; border: solid 1px black; width: 70px; float: right;">Text3<br />Text3</div><div style="background:Orange; border: solid 1px black; clear: both;">Text4<br />Text4<br />Text4<br />Text4</div><br /><br />Посмотрим как же сформировать стандартную страничку сайта:<br /><div class="scriptcode"><div style="background:White; border: solid 1px black; width: 350px; text-align:center;">Шапка</div><br /><br /><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Меню<br>Линк11<br>Линк12<br>Линк13<br>Линк14<br>Линк15</div><br /><br /><div style="background:Cornsilk; border: solid 1px black; width: 226px; float: left;">Контент<br><br>строка1<br><br />строка2<br><br />строка3<br><br />строка4<br><br />строка5<br><br />строка6<br><br />строка7<br><br />строка8<br><br />строка9<br><br /></div><br /><br /><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Меню<br>Линк11<br>Линк12<br>Линк13<br>Линк14<br>Линк15</div><br /><br /><div style="background:Orange; border: solid 1px black; width: 350px; clear: both;">Copyright </div></div><br /><br /><div style="background:White; border: solid 1px black; width: 350px; text-align:center;">Шапка</div><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Меню<br />Линк11<br />Линк12<br />Линк13<br />Линк14<br />Линк15</div><div style="background:Cornsilk; border: solid 1px black; width: 226px; float: left;">Контент<br /><br />строка1<br />строка2<br />строка3<br />строка4<br />строка5<br />строка6<br />строка7<br />строка8<br />строка9<br /></div><div style="background:Aliceblue; border: solid 1px black;width: 60px; float: left;">Меню<br />Линк11<br />Линк12<br />Линк13<br />Линк14<br />Линк15</div><br /><div style="background:Orange; border: solid 1px black; width: 350px; clear: both;">Copyright </div><br />

Тег DIV - прямоугольный блок http://tudimon.com/2009/10/13/teg-div-pryamougolnyj-blok.html Рассмотрим использование тега DIV для верстки css dimon Tue, 13 Oct 2009 11:15:10 -0500

Считается что, верстка блоками DIV имеет ряд преимуществ по сравнению с табличной версткой:<br />- более быструю загрузку страницы сайта, т.к. содержимое блоков DIV отображается по мере загрузки (в отличие от таблицы, в которой содержимое не отобразиться до тех пор, пока все ее содержимое не загрузиться)<br />- более удобочитаемый код страницы. <br /><br />Но и блочная верстка не идеальна, есть и недостатки:<br />- нельзя получить представление данных как это делает таблица. <br /><br />Самый оптимальный вариант сочетать табличную верстку с верской блоками DIV. <br /><br />Рассмотрим тег DIV более подробно:<br /><div class="scriptcode"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /><html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><br /> <title>Тег DIV</title><br /> <style type="text/css"><br /> .block1 { <br /> width: 200px; <br /> background: #cсcсcс;<br /> padding: 5px;<br /> padding-right: 20px; <br /> border: solid 1px black; <br /> float: left;<br /> }<br /> .block2 { <br /> width: 200px; <br /> background: #fаcс00; <br /> padding: 5px; <br /> border: solid 1px black; <br /> float: left; <br /> position: relative; <br /> top: 40px; <br /> left: -70px; <br /> }<br /> </style> <br /> </head><br /> <body><br /><br /> <div class="block1">Text1 Text1 Text1 Text1 Text1 Text1 Text1</div><br /> <div class="block2">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div> <br /><br /> </body><br /></html></div><br /><br />вот так это будет выглядить на страничке:<br /><br /> <div class="block1">Text1 Text1 Text1 Text1 Text1 Text1 Text1Text1 Text1 Text1 Text1 Text1 Text1 Text1</div><br /> <div class="block2">Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2 Text2</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />параметры:<br /><br /><b>width</b> - ширина<br /><br /><b>background </b>- цвет фона<br /><br /><b>padding</b> - растояние от текста до границы блока<br /><br /><b>padding-right</b> - растояние от текста до границы блока справа<br /><br /><b>border</b> - граница<br /><br /><b>float</b> - управляет позиционированием перемещаемого блока:<br />- left - элемент страницы принудительно выравнивается по левому краю;<br />- right - элемент страницы принудительно выравнивается по правому краю;<br />- none - элемент страницы не перемещается, будет отображен там, где он должен быть (значение по умолчанию).<br /><br /><b>position</b> - способ позиционирования элемента относительно окна браузера или других объектов на веб-странице:<br />- absolute - указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера. <br />- fixed - по своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.<br />- relative - положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра. <br />static Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам. <br /><br /><b>top</b> - см. position<br /><br /><b>left</b> - см. position