Разместить div под ячейкой таблицы
Может быть нестандартная реализация, но есть у меня таблица, при наведении на одну из ячеек которой отображается div, он расположен в ячейке, поэтому открывается по середине её... Как мне перенести этот div под ячейку? Подойдёт реализация а css, js, или хотя бы сказать в какую сторону думать... Вот код:
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position:absolute;
z-index:999;
background: #FFF;
}
#kabinet{
height: 50px;
}
</style>
</head>
<body>
<table align="center" width="80%" border="1" style="margin:0 auto;">
<tr>
<td align="center" id="kabinet">
<a href="#" >Эта ячейка </a>
<div id="reg">Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
</td>
</tr>
</table>
<script type='text/javascript'>
var he=$('#kabinet').width();
$('#reg').width(he);
$(function() {
$("#kabinet").hover(function(){
$('#reg').show();
},function(){
$('#reg').hide();
});
});
</script>
|
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position:absolute;
z-index:999;
background: #FFF;
}
#kabinet{
height: 50px;
}
</style>
</head>
<body>
<table align="center" width="80%" border="1" style="margin:0 auto;">
<tr>
<td align="center" id="kabinet" style='position: relative'>
<a href="#" >Эта ячейка </a>
<div id="reg" style='postion: relative'>Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
</td>
</tr>
</table>
<script type='text/javascript'>
var he=$('#kabinet').width();
var h=$('#kabinet').height();
$('#reg').width(he);
$('#reg').css("top",h);
$(function() {
$("#kabinet").hover(function(){
$('#reg').show();
},function(){
$('#reg').hide();
});
});
</script>
|
jsru_,
Этот код не работает =( Но судя по реализации, блок див начнёт сдвигаться относительно верха документа, и стало быть в зависимости от отступа таблицы сверху будет заступать на ячейку( |
Гробовщик,
тоже самое что у jsru_, но чуть точнее и ресайзить можно ... :write: <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position:absolute;
z-index:999;
background: #FFF;
}
#kabinet{
height: 50px;
}
</style>
<script type='text/javascript'>
$(function () {
$kabinet = $('#kabinet');
$kabinet.hover(function () {
var w = $kabinet.outerWidth(true),
h = $kabinet.outerHeight(true);
$('#reg').css({
"width" : w,
"top": h,
"left": '-4px'
});
$('#reg').show();
}, function () {
$('#reg').hide();
});
});
</script>
</head>
<body>
<table align="center" width="80%" border="1" style="margin:0 auto;">
<tr>
<td align="center" id="kabinet" style='position: relative'>
<a href="#" >Эта ячейка </a>
<div id="reg" style='postion: relative'>Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
</td>
</tr>
</table>
</body>
</html>
|
рони,
А у вас какой браузер? У меня лисица отображает весьма косо, и отступ от документа div берёт((( |
Гробовщик,
div в таблице браузеры по разному обрабатывают ... если его поместить в любое другое место ... то будет всё одинаково ... :write: <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-2.0.3.js'></script>
<style>
#reg {
display: none;
border-style: solid;
position: absolute;
z-index:999;
background: #FFF;
}
#kabinet{
height: 50px;
}
</style>
<script type='text/javascript'>
$(window).load(function () {
$kabinet = $('#kabinet');
$kabinet.hover(function () {
var w = $kabinet.outerWidth(true),
h = $kabinet.outerHeight(true),
p = $kabinet.offset();
$("#reg").css({width:w,top:p.top+h+2, left:p.left-2}).show();
}, function () {
$('#reg').hide();
});
});
</script>
</head>
<body>
<div id="reg" >Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
<table align="center" width="80%" border="1" style="margin:0 auto; border: #FF0000 1px double">
<tr>
<td align="center" id="kabinet" style='position: relative; background: #FF8C00'>
<a href="#" >Эта ячейка </a>
</td>
</tr>
</table>
</body>
</html>
|
рони,
Ну место дива в коде не принципиально, лишь бы стоял на месте при выводе в браузер Всё же с jquery я ещё очень хер*во работаю, но стараюсь))) Спасибо большое. |
Гробовщик, что-то твоя таблица не похоже на таблицу. Какие в ней данные? Или вся таблица затеяна ради центровки и бордера?
|
danik.js,
Именно ради него) Там больше полей |
Ну ты маньяк!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#reg {
display: none;
border-style: solid;
position: absolute;
z-index: 999;
top: 100%;
left: 0;
right: 0;
background: #FFF;
text-align: left;
}
#cabinet{
height: 50px;
position: relative;
background: #FF8C00;
margin:0 auto;
border: #FF0000 1px double;
width: 80%;
text-align: center;
}
#cabinet:hover #reg{
display: block;
}
</style>
</head>
<body>
<div id="cabinet">
<a href="#" >Эта ячейка </a>
<div id="reg">Вот именно этот div для красоты должен располагаться прямо ПОД ячейкой, как правильно сделать реализацию под все браузеры и расширения? Хотя бы идеечку=) Спасибо заранее</div>
</div>
</body>
</html>
рони, почему $(window).load , а не $(document).ready ? |
| Часовой пояс GMT +3, время: 20:13. |