Deerua about Coding -> Заметки с тегом «css»

Сегодня речь о свойстве CSS list-style-position? И что, а зачем? Да вот зачастую отступы для булитов в списках, все делают падингами-маргинами, и зачастую они просто вылазят вне своего блока, когда кто-то что-то обнулит и забудет. И тут на помощь приходит это свойство, оно попросту указывает куда тулить эти самые булиты, то ли вне, то ли внутрь ;)

По умолчанию, значение outside, но есть ещё

{ list-style-position: inside ­}

Выглядит это так:

• Пример
• Рыбного

текста

Можно даже с помощью джиквери сделать лесенку в одном и том же списке ;)) Каждому чётному или не чётному присвоить это свойство ;)

ps: О, пора переименовать рубрику %) Наверное в забытые уголки HTML, или что-то в этом духе.

Продолжая тему под-загрузки картинок, мы используем CSS. Суть метода простая:

• мы делаем небольшой блок с абсолютным позиционированием и минусовыми координатами, или с отрицательным маргинами, небольшими размерами и обрезкой контента, а в нём грузим столько картинок сколько нужно, используя всего лишь background-image, а лучше background со свойством no-repeat

.loader{
   background:url(images/img1.gif) no-repeat­;
   background:url(images/img2.png) no-repeat­;
   background:url(images/img3.jpg) no-repeat­;
   background:url(images/img4.bmp) no-repeat­;
   /* margin-left:-1000px­; */
   position: absolute­;
   overflow: hidden­;
   width: 10px­; height: 10px­;
   top: -20px­;
}

Размещение блока с класом loader не принципиально <div class=«loader»></div>

Еге-гей! Вот так громкий заголовок ;) Вы спросите для чего? А для того, что бы параллельно загружать несколько стилей, для ускорения так сказать, а можно и дизайн другой для людей с ДЖ-сом замутить ;)) хохо… Код выглядит так:

<script type="text/javascript">
document.write("\x3c!--");
</script>
<link type="text/css" href="resource.css" rel="stylesheet"/>
<!--[if IE]><![endif]-->

И шо, и как? Всё довольно просто ;))

1. JS пишет перед стилем комент
2. На кондишинал.комментс эта штука закроется
3. Получается стили закомментированы, браузер их не грузит (туда можно много их запихать ;)
4. И что теперь? А теперь можно вот-так, например, загрузить любой другой стиль %)
5. Работает везде!

• Взято здесь

/* 
 * Дочерние селекторы
 * Выбирает все элементы, которые являются непосредственно дочерними для указанного родителя. 
 * В примере body является родителем, а p — дочерним. 
 * (Для IE7+ нужно также указывать верный Doctype для правильной работы.)
 */
body>p {color: #fff­;}


/*
 * Связные классы
 * Связные классы используются, когда один элемент имеет несколько классов, например так:
 * <dіv class="class1 class2 class3">
 *    <р>Какой-то текст.</р>
 * </dіv>
 */
.class1.class2.class3 {background: #fff­;}


/*
 * Селекторы с атрибутами
 * Это свойство позволяет элементу быть отмеченным только в том случае, если у него 
 * присутствует указанный аттрибут. Например, в примере отмечены 
 * будут все ссылки с аттрибутом href, тогда как для всех остальных данное свойство 
 * применено не будет.
 */
 a[href] {color: #0f0­;}


/*
 * Смежные соседние селекторы
 * Этот селектор определяет свойства элементов, смежных и следующих сразу 
 * определенным селектором. Например, в коде ниже
 * <Н1>Заголовок</Н1>
 *    <р>Какой-нибудь текст.</р>
 *    <р>Какой-нибудь другой текст.</р>
 * свойства CSS будут применены только к первому абзацу.
 */
 h1+p {color: #f00­;}


/*
 * Общие соседние селекторы
 * Определяет свойства для всех соседних элементов, следующих за определенным селектором. 
 * Например, если воспользоваться примером, то данное свойство распространится 
 * и на первый, и на второй абзацы. Заметим, что если бы абзац шел перед заголовком, 
 * то данное свойство на него не распространялось бы.
 */
 h1~p {color: #f00­;}

PS: Бонус трек: заменяем onfocus=blur() с помощью css

a:active{
  outline:none­;
}

• Посмотреть табличку супорта селекторов в разных браузерах

Есть Хтмл, в нём Див.dynamic с контентом изменяемого размера и контейнер.middle плавающий, что должне быть по центру.

<div id="container">
    <div id="dynamic">
       любая текстовая рыба
   </div>
   <div id="middle">
       <div id="ie_helper">
           <p>ТекстЪ по центру. </p>
       </div>
   </div>
</div>

Есть простенький цсс, который просто делает с наших дивов ячейку, и потому работает вертикал-алигн.

#container {
    display: table­;
    width: 100%­;
}
    #dynamic {
        display: table-cell­; 
        width: 200px­;
        background: #0d0­;
    }
    #middle {
        display: table-cell­;
        vertical-align: middle­;
    }

Но для ИЕ ниже 7, понятия «табличная ячейка» и ДИВ не соместимы, потому туда идёт хак-контейнер.ie_helper

<!--[if lte IE 7]>
<style type="text/css">
    #dynamic {
        float: left­;
    }
    #middle {
        position: relative­;
        top: 50%­;
    }
    #ie_helper {
        position: relative­;
        top: -50%­;
    }
    #middle,
    #ie_helper,
    #container p {
        zoom: 1­;
    }
    * html #dynamic_height_giver {
        margin-right: -3px­;
    }
</style>
<![endif]-->

• Посмотреть Пример

CSS очень простой. Жаль так нельзя сделать для тега COL

.smpl table {border: 1px solid #999­; width: 400px­; height: 400px­;}
.smpl td {border: 1px solid #999­;}
.smpl tr:hover {background-color: #ccc­;}
.smpl td:hover {background-color: #cc9­;}

• Посмотреть Пример

В ИЕ есть ивент onSelectStart, достаточно повесить return false; и будет счастье, а вот в других браузерх есть magik-css

.noselect {
  -moz-user-select: none­; //Firefox
  -khtml-user-select: none­; //Safari
  user-select: none­; //работает в css3
}

В конечном итоге получаем нечто такое

<div onSelectStart="return false;" class="noselect">unselectable text</div>

Всё это можно делать и скриптом, для разных элементов, или привязать к jQuery

function prohibitSelection(obj){
	obj.style.cursor = "default";
	if (typeof obj.onselectstart!="undefined") //IE
		obj.onselectstart=function(){return false;}
	else if (typeof obj.style.MozUserSelect!="undefined") //Firefox
		obj.style.MozUserSelect="none";
	else if (typeof obj.style.KhtmlUserSelect!="undefined") //WebKit
		obj.style.KhtmlUserSelect="none";
	else obj.onmousedown=function(){return false;} //All other(Opera)
}

• Продвинутый скрипт запрещающий дблКлик и ктрл+А

::-moz-selection{
  background:#fff­;
  color:#000­;
}
::selection{
  background:#fff­;
  color:#000­;
}

Иногда когда делаем блоки с float:left, приходится сталкиваться с блоками разной высоты, и они при переходе на новую строчку, начинают строится после самого высокого, что ужастно… И приходится или ставить после определённого количества br clear=’all’ или указывать фиксированую высоту, что не всегда приемлемо.

Этот вопрос можно решить всего-лишь сэмулировав display:inline-block для старых ИЕ и для старых фоксов, ниже 3

.gallery-item {
    border-top:1px solid #AAAAAA­;
    width: 147px­;
    *width:147px­;
    display: -moz-inline-stack­; /* для FF ниже 3  */
    display:inline-block­;
    font-size:91%­;
    margin: 0 24px 20px 0­;
    min-height:178px­;
    vertical-align:text-top­;
    border:1px solid #797873­;
    /* уголки, ля-ля-ля */
    -moz-border-radius: 5px­;
    -webkit-border-radius: 5px­;
    padding: 5px 5px 0­;
    color: #4b4c4c­;
    zoom:1­; /* обычный layout fix для ИЕ6 */
    *display:inline­; /* для ИЕ 6, 7 */
}

• Посмотреть Пример

У нас есть простая Логин-форма

<form action="#" method="post">
	<div class="label_input">
		<label for="auth_login">Логин</label>
		<input type="text" name="auth_login" id="auth_login">
	</div>
	<div class="label_input">
		<label for="auth_password">Пароль</label>
		<input type="password" name="auth_password" id="auth_password">
	</div>
	<input type="submit" value="Отправить">
</form>

Метку (label) и инпут зарание возмём в див, пропишем ему в css относительное позиционирование, остальные елементы оформим на свой вкус.

Дальше будет JavaScript

function showLabels(inputs){
	// список инпутов приходит обьектом {'input_id':''}
	// если нет, то мы уходим
	if (typeof(inputs) != "object") return;
	// функция которая прячет лейбл, если в форме есть данные
	function inputValueSH(someinput){
		// что бы надёжно спрятать, запихнём повыше
		// почему-то свойство display не фурычит
		if (someinput.value) pSib(someinput).style.top = '-9999px'; // данные есть
		else pSib(someinput).style.top = '0'; // данных нет
	}
	for (var i in inputs){
		// дальше, разбиваем на список
		// аля foreach для бедных
		var obj = document.getElementById(i);
		// при блуре вызываем функцию проверки
		obj.onblur = function(){ inputValueSH(this);};
		// когда сфокусировались, убираем метку
		obj.onfocus = function(){ pSib(this).style.top = '-9999px';	};
		// проверим на всякий ешё разок
		inputValueSH(obj);
	}
	return;
}
addLoadEvent(function() {
	// настраиваем метки, для auth_login и auth_password
	showLabels({'auth_login':'','auth_password':''});
}); 	

• Посмотреть Пример