Как вертикально выровнять checkbox-ы и текст в label-ах

Задача такова: необходимо выстроить checkbox-ы горизонтально в ряд, обеспечить включение и выключение checkbox-а щелчком на соответствующем label и вертикально выровнять checkbox-ы и label-ы относительно друг-друга. Конечно можно ничего не варавнивать и оставить checkbox-ы и label-ы болтаться в воздухе. Но, согласитесь, что если мы делаем серьёзный сайт, то вопрос о его эстетической стороне оказывается далеко не на последнем месте. Вот о checkbox-овой эстетике мы сегодня и поговорим. Итак, начали.
Во-первых поместим наши checkbox-ы в список:

<div id="CheckboxesLine">
<ul>
<li><label>Select plz:</label></li>
<li><input type="checkbox" id="CB1" /><label for="CB1">Checkbox 1</label></li>
<li><input type="checkbox" id="CB2" /><label for="CB2">Checkbox 2</label></li>
<li><input type="checkbox" id="CB3" /><label for="CB3">Checkbox 3</label></li>
<li><input type="checkbox" id="CB4" /><label for="CB4">Checkbox 4</label></li>
<li><input type="checkbox" id="CB5" /><label for="CB5">Checkbox 5</label></li>
<li><input type="checkbox" id="CB6" /><label for="CB6">Checkbox 6</label></li>
</ul>
</div>

Далее пропишем вот такие стили:

#CheckboxesLine ul {
white-space:nowrap;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 0.7em;
}
#CheckboxesLine ul li {
display: inline;
white-space:nowrap;
}
#CheckboxesLine ul li label {
vertical-align:middle;
padding-right: 20px;
}
#CheckboxesLine ul li input {
margin-bottom: auto;
vertical-align:middle;
}
#CheckboxesLine ul li:first-child label{
padding-right: 0;
}

Вот и всё. Теперь и в IE, и в FF, и в Opera наши checkbox-ы будут выглядеть одинаково.

HTML & JavaScript: Как сделать свои radiobutton при помощи AJAX

Вас устраивают стандартные радиокнопки? Если также, как и меня-нет, то вот простое решение-заменим их на картинки. Это позволит нам с лёгкостью подгонять радиокнопки под любой дизайн сайта. Ну что, поехали:

<script language="javascript">
// Эту функцию я использую всегда во всех скриптах.
// Она решает вопрос поиска объекта по id во всех броузерах.
function getElement(aID){
return (document.getElementById) ? document.getElementById(aID) : document.all[aID];
}
function SwitchRadio(liObj,Id){
// Получаем id нужного списка радиокнопок <ul>
var ulName=liObj.parentNode.id;
// Получаем массив со всеми элементами <li>, входящими в наш список
var orderedNodes = getElement(ulName).getElementsByTagName("li");
// Переключаем все кнопки в положение "выключено"
for (i=0; i<orderedNodes.length; i++){
orderedNodes[i].style.background="url(images/radio_off.gif) 0 2px no-repeat";
}
// Теперь включаем нашу кнопку...
liObj.style.background="url(images/radio_on.gif) 0 2px no-repeat";
// ...и передаём через ajaxagent её данные PHP-скрипту,
// который запишет их в сессию.
agent.call("aa_func.php", "AA_SaveFieldValue", "callback_SaveFieldValue", ulName, Id);
</script>
}

В коде страницы пишем что-то типа этого:

<ul id="Q1" class="questionsUL">
<li onClick="javascript:SwitchRadio(this,'1')">Вариант 1</li>
<li onClick="javascript:SwitchRadio(this,'2')">Вариант 2</li>
<li onClick="javascript:SwitchRadio(this,'3')">Вариант 3</li>
</ul>

А в стилях:

.questionsUL {
padding: 0;
margin: 0 0 0 20px;
}
.questionsUL li {
list-style: none;
margin: 0;
padding: 0;
background: url(images/radio_off.gif) 0 2px no-repeat;
padding: 0 0 5px 20px;
margin: 0;
cursor: pointer;
}

radio_on.gif и radio_off.gif - это наша кнопка. Соответственно включённая и выключенная. Стили прописаны для картинки с кнопкой размерами 10x10 пикселей.

То ли примета, то ли афоризм

Вчера был на юбилее у друга моего отца. В связи с этим радостным, вобщем-то, событием, родился грустный афоризм или даже народная примета: Тебе уже за 30, если друзья твоего отца приглашают тебя на свои юбилеи :(

Путешествие в Финдяндию. 14.07.2007-29.07.2007

Фото-отчёт о нашем путешествии в Финляндию можно посмотреть здесь