|
Сообщение от Wic_
|
|
Подскажите, нужно чтобы последний div был фиксированным, а первые два - резиновыми
|
Я показал в посте №2, как такое сделать! Ах да, не работает в IE8, немного исправил!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!--[if IE 8]>
<script>document.createElement("section");</script>
<![endif]-->
</head>
<body>
<section>
<div>content №1</div>
<div>content №1</div>
<button class="helptip" title="Нажмите для того, чтобы получить справку">?</button>
<span title="Нажмите, чтобы закрыть справку">Справка №1.</span>
</section>
<section>
<div>content №2</div>
<div>content №2</div>
<button class="helptip" title="Нажмите для того, чтобы получить справку">?</button>
<span title="Нажмите, чтобы закрыть справку">Справка №2.</span>
</section>
<style>
section {
display: table;
table-layout: auto;
width: 100%;
position: relative;
margin: 1em 0;
}
section > div {
display: table-cell;
}
section > div {
width: 60%;
}
section > div + div {
width: 40%;
}
.helptip {
padding: 1px 7px;
margin: 0;
margin-left: auto;
background: #eee;
border: 1px solid #ddd;
cursor: pointer;
border-radius: 5px;
margin-left: auto;
text-align: right;
}
.helptip:hover {
background: #fff;
}
.helptip + span {
padding: 8px;
margin: 5px;
background: #FBFBF9;
border-radius: 5px;
border: 1px solid #CBCBBD;
position: absolute;
display: none;
z-index: 99; /* Важно!
Всплывающие подсказки всегда выше
нижеследующих элементов */
right: 0;
top: 0;
min-width: 300px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
cursor: default;
}
.focus span,
.helptip:focus + span {
display: inline-block;
}
</style>
<!--[if IE 8]>
<script>
(function() {
var buttons = document.querySelectorAll(".helptip");
for(var i = 0; i < buttons.length; i++){
var button = buttons[i];
button.attachEvent("onblur", function() {
event.srcElement.parentNode.className = event.srcElement.parentNode.className.replace(" focus", "");
});
button.attachEvent("onfocus", function() {
event.srcElement.parentNode.className += " focus";
});
};
})();
</script>
<![endif]-->
</body>
</html>
P. S. Не нужно на каждом элементе отдельно прописывать стили, когда у вас станет много разделов, вы будете у каждого раздела отдельно стили менять, когда потребуется? Используйте <button> там где нужна кнопка, а не <div>, на котором не возможно сфокусироваться! (Конечно можно добавить
tabindex="0", но вам не нужна лишняя писанина!)
