Deerua about Coding -> Заметки с тегом «css» @ deer.org.ua

Страницы: 1 | 2 | 3 | 4 | 5

18 августа 2009, 15:06 более года назад

Кавайная форма, или делаем Логин-форм как у Яндекса. (Labels as hints in form inputs)

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

<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':''});
});

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

Комментировать…

Теги: javascript foreach, css, javascript

13 августа 2009, 11:06 более года назад

CSS: самый простой футер, приклееный вниз (Crossbrowser bottom fixed footer)

Давно использую данный «текникс», а на хабре говорят что про него никто не слышал. Странно, вооот. Поэтому встречайте ;)

Нужен простенький CSS. Мы зададим высоту html, body и враппера 100%, маргин у враппера сделаем -4строки, а футеру сделаем высоту +4строки соот. и получим нужный результат:

* {margin: 0;}
html, body {height: 100%;}
.wrapper {
    min-height: 100%;
    /* luv IE shit */
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {height: 4em;}

Вместо строк, можем использовать пиксельные величины, также не забываем о паддингах и бордерах, он тоже играют на высоту/длину!
И HTML

<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright/contacts put here</p>
    </div>
</body>

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

ЗЫ: див под именем push, нужен для глючных браузеров, лайк Опера, что бы текст футера не налазил на контент.
ЗЗЫ: заставить оперу понимать то, что хавает даже ИЕ6, можно скриптом. Или убить доктайп, или сместить боди на 1px, что реализовано в примере ;)

6 комментариев

Теги: browsers crossbrowser, css

26 июля 2009, 14:31 более года назад

CSS: Simple form layout

Простой CSS для вёрстки формы. Очень нужная вещь, когда доступа к вьюхам(темплейтам, формгенератору) нет ;) Например есть простая форма

<form>
	<label for="name">Name</label>
	<input id="name" name="name"><br>
	<label for="address">Address</label>
	<input id="address" name="address"><br>
	<label for="city">City</label>
	<input id="city" name="city"><br>
</form>

В итоге обычно получается ёлка, красивого мало ;) И как говорится, нужно всего лишь добавить CSS :D

label,input {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}
label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
}
br {
	clear: left;
}

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

Но обычно форма не ограничивается только текстовыми инпутами. Для таких случаев лучше обзавестись более универсальным CSSом ;) добавим небольшие ограничения с помощью css-selectors

input[type="radio"],
input[type="checkbox"],
input[type="submit"],
input[type="button"],
input[type="reset"]{
	width: auto;
}

Посмотреть другой пример

1 комментарий

Теги: css

21 июля 2009, 14:55 более года назад

CSS-debug — непонятные вещи ;)

Зачем нужен? А что бы видеть вложенность всех элементов и блоков, и быстро разобраться где какой тэг не закрыт ;) ну и WebDeveloper toolbar в помощь!

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

Для ИЕ6-7 вместо outline, пишем border.
ЗЫ: почему outline а не border? потому что это бордер который не создаёт лишний пиксель ;), хотя он строится вне элемента!

Комментировать…

Теги: css, debug

17 июля 2009, 09:46 более года назад

pure CSS tooltip (подсказка)

Вот так выглядит HTML

<a href="#">Ссылка<span>Подсказка</span></a>

А вот так CSS

a{ /* устанавливаем уровень накладывания объектов */
	z-index:10;
}
a:hover{ 
	/* Когда наводим мышкой, делаем релейтив, 
	что бы можно было абсолютно ссылки 
	позиционировать другие объекты */
	position:relative;
	z-index:100;
}			
a span{ /* пока не навели, прячем спан */
	display:none;
}
a:hover span{ /* делаем для спана абсолютное 
	позиционирование, отображаем 
	как блок, смещённый относительно 
	ссылки вверх и влево */
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;			
}

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

Комментировать…

Теги: css

16 июля 2009, 11:07 более года назад

Опять колонки одинаковой высоты %) IE6hack

На хабре пошла дикая пьянка по поводу этих колонок. Так что ж, в припрыжку к этому и этому методам опишем ещё один.

<style type="text/css" media="screen">* {
    margin: 0;
    padding: 0;
  }
  #container {
    display: table;
    width: 100%;
  }
  .column {
    display: table-cell;
    width: 25%;
  }</style>
<!--[if lt IE 8]>
  <style type="text/css">
    #container {
      width: auto;
    }
    .column {
      // вся магия в двух строчках ниже
      float: left;
      clear: right;
      
      width: auto;
      min-width: 25%;
      _width: 25%;
    }
  </style>
<![endif]-->
<div id="container">
  <div class="column">25%</div>
  <div class="column">25%</div>
  <div class="column">25%</div>
  <div class="column">25%</div>
</div>

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

В чем же суть, наверное просто процитирую:

Решение основано на глюке отличительной особенности браузеров IE5-7, которая выражается в том, что если блокам с float указать свойство clear с противоположным к float значением, то они перестают переноситься один под другой. Грубо говоря, блоки после такого просто «прилипают» друг к другу намертво и не «отлипнут» друг от друга уже ни при каких обстоятельствах.

Комментировать…

Теги: css

13 июля 2009, 11:29 более года назад

Колонки одинаковой высоты

Ещё один метод (прочитаный на хабре), с колонками одинаковой высоты, который работает хорошо везде, но не лишен неприятностей, одна из которых, непредсказуемая работа с якорями в разных браузерах. Он наверное самый семмантичный и правильный, но опять же небезупречный.

В ШТМЛ это выглядит вот так:

<div class="cols">
  <div class="col1">Текст1</div>
  <div class="col2">Текст2</div>
  <div class="col3">Текст3</div>
</div>

А в ЦСС

.cols{
     overflow:hidden;
     _zoom:1; /* Для 6-го IE, задаем hasLayout, или _width: 100% */
}
.cols .col1,.cols .col2,.cols .col3{
     padding-bottom:10000px;
     margin-bottom:-10000px;
}

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

Комментировать…

Теги: css

9 июля 2009, 16:36 более года назад

Custom file input form

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>File Up Form Replace</title>
	<script type="text/javascript">
		function result(fileId){
			var res = document.getElementById("ftitle");
		  // выводим имя файла, обработав регекспиком
			res.innerHTML = fileId.value.replace(/^([^\\\/]*(\\|\/))*/,"");
			// выводим в тайтл всё значение 
			res.setAttribute("title",fileId.value);
		}
	</script>
	
	<style type="text/css">
		.fakebutton {
			font-family: verdana; 
			color: #fff;
			text-align: center; 
			overflow: hidden; 
			width: 200px; 
			height: 20px; 
			background-color: #038f1a;
		}
		.fakebutton span {displa: block;}
		.realbutton {
			/* прячем размеры input'a */
			margin-top: -50px; 
			margin-left:-410px; 
			/* делаем прозрачным */
			-moz-opacity: 0; 
			filter: alpha(opacity=0); 
			opacity: 0; 
			/* делаем большим */
			font-size: 150px; 
			height: 100px;
		}
	</style>
	
</head>
<body>
<div class="fakebutton">
	<span id="ftitle">Загрузить</span>
	<!-- когда засабмитили файлик взываем функцию result() -->
	<input type="file" name="file" id="file" size="1" onChange="result(this);" class="realbutton">
</div>
</body>

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

Комментировать…

Теги: css, javascript

26 июня 2009, 15:20 более года назад

Легкая типографика (правила хорошего тона)

длина строки 40-80 символов (width: 300px);
Мужду строками 1,5 интервал (line-height: 1.5em);
В цитатах, кавычки убираем за текст (text-indent: -0.8em);
В блоках, отступ снизу, равен междустрочному интервалу;
Выделение текста не отвлекая юзера (италиком, без болда и изменения размера);
Маштаб фонтов (6,7,8,9,10,11,12,13,14,16,18,21,24,36,48,72 px);
При рваных краях, использовать .

2 комментария

Теги: css

16 июня 2009, 12:28 более года назад

CSS: Выравниваем плавающие колонки (CrossBrowser)

И так, в чём суть да дело :)

Если браузер нормальный, то мы используем display: table-*, то есть создаём див с display: table-row, а в нём дивы, которые должны быть одинаковой высоты с display: table-cell. Вуаля, остался ИЕ :(

Второй метод, кроссбарузерный:

<style type="text/css">
/* Два дублирующих контейнера col-wrap*
нам нужны, что бы сделать бордеры у колонок
одной высоты, или фон внизу каждого */
.col-wrap1 {
	width:25%;
	background:blue;
}
/* второй контейнер смещён на нужное растояние
влево, с помощью маргин-райт попячен под ИЕ %) */
.col-wrap2 {
	width:200%;
	position:relative;
	left: 100%;
	background:red;
	/* чтобы ИЕ6 не раздвигал контейнер */
	margin-right:-100%; 
}
/* левую колонку с текстом смещаем на длину 
врап2 контейнера */
.col1 {
	float:left;
	width:50%;
	margin-right:-100%;
	position:relative;
	left:-50%;
}
/* что бы ничего снизу не налезло, очищаем */
.clear {
	clear:both;
	font-size:0;
	
	/* тройной презерватив для ИЕ */
	overflow:hidden; 
}
</style>
<div class="col-wrap1">
    <div class="col-wrap2">
        <div class="col1">left column</div>
        <!-- Кол2 занимает всё оставшиеся пространство -->
        <div class="col2">center column</div>
        <div class="clear"></div>
    </div>
</div>

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

Этот замечательный, и очень простой метод я подглядел вот сдесь, спасибо Сергею.

Комментировать…

Теги: browsers crossbrowser, css

Страницы: 1 | 2 | 3 | 4 | 5

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

Блог о кодинге, автор Deerua

coding, javascript, css, html, php, jquery, mysql, deerua