<div style="position:absolute; left:285px; top:63px; width:222px;
height:103px; z-index:1"></div>
Позиционирование слоя
Как установить позицию слоя относительно ячейки (или края) таблицы? По умолчанию позиция задана относительно левого края экрана.
Цитата:
Originally posted by Stalcer
Как установить позицию слоя относительно ячейки (или края) таблицы? По умолчанию позиция задана относительно левого края экрана.
Как установить позицию слоя относительно ячейки (или края) таблицы? По умолчанию позиция задана относительно левого края экрана.
align=...
А вообще мой совет, используйте редактор быстрого создания сайтов. Он всегда подскажет какой тег где нужно вставить.
Цитата:
Originally posted by 3D Bob
align=...
А вообще мой совет, используйте редактор быстрого создания сайтов. Он всегда подскажет какой тег где нужно вставить.
align=...
А вообще мой совет, используйте редактор быстрого создания сайтов. Он всегда подскажет какой тег где нужно вставить.
Это, конечно все очень познавательно, но я не совсем понял вашу подсказку.
У меня есть слой:
Код:
И есть таблица, выровненная по центру:
Код:
<table width="50%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td><td></td><td></td>
</tr>
</table>
<tr>
<td></td>
<td></td><td></td><td></td>
</tr>
</table>
Суть вопроса: как задать позицию слоя, например, относительно первой ячейки?
Цитата:
Originally posted by Stalcer
Как установить позицию слоя относительно ячейки (или края) таблицы? По умолчанию позиция задана относительно левого края экрана.
Как установить позицию слоя относительно ячейки (или края) таблицы? По умолчанию позиция задана относительно левого края экрана.
Можно использовать следующую конструкцию:
<div style="position:relative; left:50; top:50">Мама мыла раму</div>
Если нужно, чтобы слой был позиционирован относительно таблицы, необходимо разместить тэг <div>...</div> сразу после закрывающего тэга </table>.
Насчет позиционирования относительно ячейки я не уверен, но мне кажется, что если разместить тэг <div>...</div> внутри самой таблицы, то есть между <td> и </td>, все должно получиться. Чтобы избавиться от лишних перескоков строк надо использовать вместо <div> <span>.
Цитата:
Originally posted by Аntоn
Можно использовать следующую конструкцию:
<div style="position:relative; left:50; top:50">Мама мыла раму</div>
Если нужно, чтобы слой был позиционирован относительно таблицы, необходимо разместить тэг <div>...</div> сразу после закрывающего тэга </table>.
Насчет позиционирования относительно ячейки я не уверен, но мне кажется, что если разместить тэг <div>...</div> внутри самой таблицы, то есть между <td> и </td>, все должно получиться. Чтобы избавиться от лишних перескоков строк надо использовать вместо <div> <span>.
Можно использовать следующую конструкцию:
<div style="position:relative; left:50; top:50">Мама мыла раму</div>
Если нужно, чтобы слой был позиционирован относительно таблицы, необходимо разместить тэг <div>...</div> сразу после закрывающего тэга </table>.
Насчет позиционирования относительно ячейки я не уверен, но мне кажется, что если разместить тэг <div>...</div> внутри самой таблицы, то есть между <td> и </td>, все должно получиться. Чтобы избавиться от лишних перескоков строк надо использовать вместо <div> <span>.
Не привело к результату, это естественно:
Код:
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td><td></td><td></td>
</tr>
</table>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
Цитата:
Originally posted by Stalcer
Не привело к результату, это естественно:
Не привело к результату, это естественно:
Код:
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td><td></td><td></td>
</tr>
</table>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
Тогда так:
Код:
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td><td></td><td></td>
</tr>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
</table>
<tr>
<td></td><td></td><td></td>
</tr>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
</table>
У себя проверил - работает.
Цитата:
Originally posted by Аntоn
Тогда так:
У себя проверил - работает.
Тогда так:
Код:
<table width="50%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td></td><td></td><td></td>
</tr>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
</table>
<tr>
<td></td><td></td><td></td>
</tr>
<div style="position:RELATIVE; left:10; top:10; width:222px;
height:103px; background-color: #CCCCCC;"></div>
</table>
У себя проверил - работает.
Позиционирование работает, спасибо, а вот слой смещает таблицу, как это запретить?
Код:
<table width="50%" height="100" border="3"
align="center" cellpadding="0" cellspacing="0" bordercolor="#000033" bgcolor="#CCCCCC">
<tr>
<td> </td><td> </td><td> </td>
</tr>
<div style="position:RELATIVE; left:0px; top:0px;width:222px;
height:103px; background-color: #666666; z-index:10;"></div>
</table>
align="center" cellpadding="0" cellspacing="0" bordercolor="#000033" bgcolor="#CCCCCC">
<tr>
<td> </td><td> </td><td> </td>
</tr>
<div style="position:RELATIVE; left:0px; top:0px;width:222px;
height:103px; background-color: #666666; z-index:10;"></div>
</table>
Цитата:
Originally posted by Stalcer
Позиционирование работает, спасибо, а вот слой смещает таблицу, как это запретить?
Позиционирование работает, спасибо, а вот слой смещает таблицу, как это запретить?
Код:
<table width="50%" height="100" border="3"
align="center" cellpadding="0" cellspacing="0" bordercolor="#000033" bgcolor="#CCCCCC">
<tr>
<td> </td><td> </td><td> </td>
</tr>
<div style="position:RELATIVE; left:0px; top:0px;width:222px;
height:103px; background-color: #666666; z-index:10;"></div>
</table>
align="center" cellpadding="0" cellspacing="0" bordercolor="#000033" bgcolor="#CCCCCC">
<tr>
<td> </td><td> </td><td> </td>
</tr>
<div style="position:RELATIVE; left:0px; top:0px;width:222px;
height:103px; background-color: #666666; z-index:10;"></div>
</table>
Можно сделать так:
Код:
<table width="50%" height="100" border="3" align="center" cellpadding="0" cellspacing="0" bordercolor="#000033" bgcolor="#CCCCCC">
<tr><td><div style="position:RELATIVE; left:0px; top:0px; width:222px; height:103px; background-color:#666666; z-index:10"></div></td><td></td><td></td></tr></table>
<tr><td><div style="position:RELATIVE; left:0px; top:0px; width:222px; height:103px; background-color:#666666; z-index:10"></div></td><td></td><td></td></tr></table>
То есть поместить слой между <td> и </td>.
Аntоn
В этом случае размер ячейки нельзя установить меньше чем размер слоя, как избежать этот момент?
В этом случае размер ячейки нельзя установить меньше чем размер слоя, как избежать этот момент?
Код:
<table width="26%" height="102" border="3" align="center" cellpadding="0" cellspacing="0" bgcolor="#009933">
<tr>
<td><div style="position:RELATIVE; left:0px; top:70px; width:100px; height:100px; background-color:#666666; z-index:10"></div></td>
<td></td>
<td></td>
</tr>
</table>
<tr>
<td><div style="position:RELATIVE; left:0px; top:70px; width:100px; height:100px; background-color:#666666; z-index:10"></div></td>
<td></td>
<td></td>
</tr>
</table>
Цитата:
Originally posted by Stalcer
Аntоn
В этом случае размер ячейки нельзя установить меньше чем размер слоя, как избежать этот момент?
Аntоn
В этом случае размер ячейки нельзя установить меньше чем размер слоя, как избежать этот момент?
Код:
<table width="26%" height="102" border="3" align="center" cellpadding="0" cellspacing="0" bgcolor="#009933">
<tr>
<td><div style="position:RELATIVE; left:0px; top:70px; width:100px; height:100px; background-color:#666666; z-index:10"></div></td>
<td></td>
<td></td>
</tr>
</table>
<tr>
<td><div style="position:RELATIVE; left:0px; top:70px; width:100px; height:100px; background-color:#666666; z-index:10"></div></td>
<td></td>
<td></td>
</tr>
</table>
Тогда в голову приходит только использование java script:
определить коодринаты таблицы, к которой нужно привязать слой, и задать абсолютные координаты этого слоя с учетом найденных координат. При этом сам слой нужно поместить вне таблицы.
Наверняка есть способ проще, но мне он неизвестен.
Собственно, поэтому я и создал тему в разделе программирования :)
Можно вообще получать разрешение экрана и менять абсолютные координаты слоя, но мне этот способ кажется не самым рациональным.
Ваш способ не пройдет, т.к. при смене разршения экрана координаты таблицы меняются.
Нужно придумать что-то другое :???:
Можно вообще получать разрешение экрана и менять абсолютные координаты слоя, но мне этот способ кажется не самым рациональным.
Ваш способ не пройдет, т.к. при смене разршения экрана координаты таблицы меняются.
Нужно придумать что-то другое :???:
Цитата:
Originally posted by Stalcer
Собственно, поэтому я и создал тему в разделе программирования :)
Можно вообще получать разрешение экрана и менять абсолютные координаты слоя, но мне этот способ кажется не самым рациональным.
Ваш способ не пройдет, т.к. при смене разршения экрана координаты таблицы меняються.
Нужно придумать что-то другое :@@@:
Собственно, поэтому я и создал тему в разделе программирования :)
Можно вообще получать разрешение экрана и менять абсолютные координаты слоя, но мне этот способ кажется не самым рациональным.
Ваш способ не пройдет, т.к. при смене разршения экрана координаты таблицы меняються.
Нужно придумать что-то другое :@@@:
Можно запускать функцию позиционирования слоя на событие onResize - тогда координаты слоя будут пересчитываться.
Цитата:
Originally posted by Аntоn
Можно запускать функцию позиционирования слоя на событие onResize - тогда координаты слоя будут пересчитываться.
Можно запускать функцию позиционирования слоя на событие onResize - тогда координаты слоя будут пересчитываться.
Как работает onResize? Это событие связанно с измением размера окна браузера?
Цитата:
Originally posted by Stalcer
Как работает onResize? Это событие связанно с измением размера окна браузера?
Как работает onResize? Это событие связанно с измением размера окна браузера?
Код:
<script>
function Your_function()
{
//Текст
}
</script>
<body onResize="java script: Your_function()">
</body>
function Your_function()
{
//Текст
}
</script>
<body onResize="java script: Your_function()">
</body>
При любом изменении размеров окна будет выполняться Your_function().
Цитата:
Originally posted by Аntоn
При любом изменении размеров окна будет выполняться Your_function().
Код:
<script>
function Your_function()
{
//Текст
}
</script>
<body onResize="java script: Your_function()">
</body>
function Your_function()
{
//Текст
}
</script>
<body onResize="java script: Your_function()">
</body>
При любом изменении размеров окна будет выполняться Your_function().
А как я могу отследить размер окна (ширину)?
Цитата:
Originally posted by Stalcer
А как я могу отследить размер окна (ширину)?
А как я могу отследить размер окна (ширину)?
document.body.clientWidth
Цитата:
Originally posted by Аntоn
Тогда в голову приходит только использование java script:
...
Наверняка есть способ проще, но мне он неизвестен.
Тогда в голову приходит только использование java script:
...
Наверняка есть способ проще, но мне он неизвестен.
Проще будет использовать еще один блок, выведеный из нормального потока с помощью position: absolute без указания смещения (top, right...), тогда и JS не понадобится.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
}
#t {
width: 50%;
margin: 0 auto;
padding: 0;
border-collapse: collapse;
border-spacing: 1px;
border: solid 2px red;
}
#t td {
border: solid 1px red;
text-align: center;
}
/* Ячейка таблицы, содержащая блок */
.cntcell {
text-align: left !important;
vertical-align: top;
}
/* Блок с абсолютным позиционированием для вывода из нормального потока */
.cntdiv {
display: block;
position: absolute;
}
/* Блок с относительным позиционированием */
.cntdiv1 {
position:relative;
left: 5px;
top: 5px;
width:222px;
height:103px;
background-color: #ccc;
}
</style>
</head>
<body>
<table id="t" width="50%">
<tr>
<td class="cntcell">
<div class="cntdiv">
<div class="cntdiv1">Див</div>
</div>
</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
}
#t {
width: 50%;
margin: 0 auto;
padding: 0;
border-collapse: collapse;
border-spacing: 1px;
border: solid 2px red;
}
#t td {
border: solid 1px red;
text-align: center;
}
/* Ячейка таблицы, содержащая блок */
.cntcell {
text-align: left !important;
vertical-align: top;
}
/* Блок с абсолютным позиционированием для вывода из нормального потока */
.cntdiv {
display: block;
position: absolute;
}
/* Блок с относительным позиционированием */
.cntdiv1 {
position:relative;
left: 5px;
top: 5px;
width:222px;
height:103px;
background-color: #ccc;
}
</style>
</head>
<body>
<table id="t" width="50%">
<tr>
<td class="cntcell">
<div class="cntdiv">
<div class="cntdiv1">Див</div>
</div>
</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
</body>
</html>
Действительно работает, большое спасибо!