Задался вопросом вертикальной верстки, без использования vertical-align поскольку должно работать в IE. И без divов внутри divов в духе. Конкретный пример: | Код |
<dl id="sample" class="hidn">
<dt><a><span>Выберите картинку</span></a></dt>
<dd>
<ul>
<li><a><img class="flag" src="/data/1.bmp" alt="" />1<span class="value">1</span></a></li>
<li><a><img class="flag" src="/data/2.bmp" alt="" />2<span class="value">2</span></a></li>
</ul>
</dd>
</dl>
|
| Код |
$(document).ready(function() {
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
})
});
|
| Код |
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; font-size: 12px;}
.dropdown dd { position:relative; font-size: 12px;}
.dropdown a, .dropdown a:visited { color:#000000; text-decoration:none; outline:none; font-size: 12px;}
.dropdown a:hover { color:#000000; font-size: 12px;}
.dropdown dt a:hover { color:#000000; border:4px ridge #5d5dae; font-size: 12px;}
.dropdown dt a {background:#5d5dae url(/data/arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:4px ridge #5d5dae; width:220px; font-size: 12px; height:40px }
.dropdown dt a span {cursor:pointer; display:block; font-size: 12px; }
.dropdown dd ul { background:#5d5dae none repeat scroll 0 0; border:4px ridge #5d5dae; color:#C5C0B0; display:none;
left:0px; padding:5px 0px; position:absolute; top:2px; width:239px; list-style:none; font-size: 12px;}
.dropdown span.value { display:none; font-size: 12px;}
.dropdown dd ul li a { padding:5px; display:block; font-size: 12px;}
.dropdown dd ul li a:hover { background-color:#30305a; font-size: 12px;}
.dropdown img.flag { border:none; margin-left:0px; margin-right: 10px; font-size: 12px;}
.flagvisibility { display:none;}
|
Строка "Выберите картинку" прижимается к вверху выделенного ей элемента, а остальные строки к низу vertical-align решает половину проблем но IE6 не поддерживает его. |
Еще раз о вертикальной верстке 
Загрузка ...
