CSS定位问题 [英] CSS positioning question
问题描述
我是相对较新的css定位并且对于DHTML弹出窗口的
显示有疑问
这是我的基本HTML使用：
< html>
< head>
< script language =" JavaScript">
<！ -
函数hideObject（）{
document.getElementById（''showpopup''）。style。 visibil ity =" hidden";
}
//显示/隐藏指针对象的函数
function showObject（id）{
document.getElementById（''showpopup''）。style.visibil ity =" visible";
}
// - >
< / script>
< style>
..ratePopup {
宽度：400px;
border：1px solid＃000000;
background-color：#FFFFFF;
保证金：0px 0px 0px 0px;
填充：0px 0px 0px 0px;
}
..rateHeader {
宽度：100 ％;
填充：5px 5px 5px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size ：12px;
font-weight：bold;
颜色：#FFFFFF;
background-color：＃514541;
}
..rateTitle {
宽度：100％;
填充：0px 5px 0px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
font-weight：bold;
颜色：＃000000;
}
..rateText {
宽度：100％;
填充：0px 5px 0px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
字体大小：12px;
颜色：＃000000;
}
< / style>
< / head>
< body>
< p>测试DHTML< a href =" javascript ：showObject（）;"> pop-up< /一个>链接。
< div id =" showpopup"风格= QUOT; z索引：1;可见性：隐藏;">
< div class =" ratePopup">
< div class =" rateHeader">费率信息< / div>
< h1 class =" rateTitle">提前购买率< / h1>
< p class =" rateText">显着节省以
预付款购买房价。< / p>
< p>< a href =" javascript ：hideObject（） ;">关闭< / A> < / p>
< / div>
< / div>
< / body>
< / html>
我的问题是弹出链接和一个简短的列表将在一个循环中创建
.jsp因此在
页面上创建了几个链接/列表
如何使用.css定位来显示链接旁边的弹出窗口
而不是顶部的固定位置。
提前致谢。
" NS" <是ne ************ @ gmail.com>在消息中写道
news：11 ********************** @ o13g2000cwo.googlegr oups.com ...我对css定位很新，对于DHTML弹出窗口的显示有疑问
这是我使用的基本HTML：
< html>
< head>
< script language =" JavaScript">
<！ -
函数hideObject（ ）{
document.getElementById（''showpopup''）。style.visibil ity =" hidden";
}
//显示/隐藏指针对象的函数
函数showObject（id）{
document.getElementById（''showpopup''）。style.visibil ity =" visible";
}
// - - >
< / script>
< style>
.ratePopup {
宽度：400px;
border：1px solid＃000000;
background-color：#FFFFFF;
margin：0px 0px 0px 0px;
padding：0px 0px 0px 0px;
}
.rateHeader {
width：100％; <无线电通信/> padding：5px 5px 5px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
font-weight：bold;
颜色：#FFFFFF;
背景颜色：＃514541;
}
.rateTitle {
宽度：100％;
填充：0px 5px 0px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
font-weight：bold;
颜色：＃000000;
}。
.rateText {
宽度：100％;
填充：0px 5px 0px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
颜色：＃000000;
}
< / style>
< / head>
< body>
< p>测试DHTML< a href =" javascript ：showObject（）;"> pop-up< / a>链接。
< div id =" showpopup"风格= QUOT; z索引：1; visibility：hidden;">
< div class =" ratePopup">
< div class =" rateHeader"> Rate Information< / div>
< h1 class =" rateTitle">预购价格< / h1>
< p class =" rateText">在
预付款中大幅节省购买房价。< / p>
< p>< a href =" javascript ：hideObject（）;">关闭< / a> < / p>
< / div>
< / div>
< / body>
< / html>
<我的问题是弹出链接和一个简短的列表将在.jsp的循环中创建，从而在
页面上创建几个链接/列表
如何使用.css定位来显示链接旁边的弹出窗口而不是顶部的固定位置。
提前致谢。
弹出窗口的位置由JavaScript控制，因此IMO它不能用CSS控制
。
我相信这是脚本来源：
http：//www.mattkruse .com / javascript / ... ow / source.html
查看x和y属性，了解控制位置的可能方法
弹出
在这里寻找使用CSS的可能替代方案：
http://www.seoconsultants.com/css/menus/vertical/
祝你好运，
我
我写道：" NS" <是ne ************ @ gmail.com>在消息中写道
新闻：11 ********************** @ o13g2000cwo.googlegr oups.com ......
我对css定位很新，对于DHTML弹出窗口的显示有疑问
这是我使用的基本HTML：
< html>
< head>
< script language =" JavaScript">
<！ -
函数hideObject（ ）{
document.getElementById（''showpopup''）。style.visib ility =" hidden";
}
//显示/隐藏指针对象的函数
函数showObject（id）{
document.getElementById（''showpopup''）。style.visibil ity =" visible";
}
// - - >
< / script>
< style>
.ratePopup {
宽度：400px;
border：1px solid＃000000;
background-color：#FFFFFF;
margin：0px 0px 0px 0px;
padding：0px 0px 0px 0px;
}
.rateHeader {
width：100％;
填充：5px 5px 5px 5 px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
font-weight：bold;
颜色：#FFFFFF;
background-color：＃514541;
}
.rateTitle {
宽度：100％;
填充：0px 5px 0px 5px;
font-family： Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
font-weight：bold;
颜色：＃000000;
}
.rateText {
宽度：100％;
填充：0px 5px 0px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
颜色：＃000000;
}
< / style>
< / head>
< body>
< p> ;测试DHTML< a href =" javascript ：showObject（）;"> pop-up< / a>链接。
< div id =" showpopup"风格= QUOT; z索引：1; visibility：hidden;">
< div class =" ratePopup">
< div class =" rateHeader"> Rate Information< / div>
< h1 class =" rateTitle">预购价格< / h1>
< p class =" rateText">在
预付款中大幅节省购买房价。< / p>
< p>< a href =" javascript ：hideObject（）;">关闭< / a> < / p>
< / div>
< / div>
< / body>
< / html>
<我的问题是弹出链接和一个简短的列表将在.jsp的循环中创建，从而在
页面上创建几个链接/列表
如何使用.css定位来显示链接旁边的弹出窗口而不是顶部的固定位置。
提前致谢。
弹出窗口的位置由JavaScript控制，因此IMO无法通过CSS控制。
不，它由html或生成html
的脚本以及使用内联样式或CSS设置的任何定位属性控制。
I相信这是剧本的来源：
http：/ /www.mattkruse.com/javascript/...ow/source.html
查看x和y属性，了解控制弹出窗口位置的可能方法
这不是来源。
" me"似乎相信这是一个弹出窗口，但所有脚本都是
来改变< div>的显示属性具有
id =" showpopup"的标签。属性。
然而，他对javascript中的问题是正确的。
脚本仅适用于id =" showpopup"的元素。你需要使脚本更加灵活。
我不知道javascript所以我不能告诉你
怎么样。我只回答是因为我离开了目标。
问候，
钢
" St？le S？ 2 b E" < OT ***** @ tdz.no>在消息中写道
news：42 ****** @ news.broadpark.no ...me写道：" NS" <是ne ************ @ gmail.com>在消息中写道
新闻：11 ********************** @ o13g2000cwo.googlegr oups.com ......
我对css定位很新，对于DHTML弹出窗口的显示有疑问
这是我使用的基本HTML：
< html>
< head>
< script language =" JavaScript">
<！ -
函数hideObject（ ）{
document.getElementById（''showpopup''）。style.visib ility =" hidden";
}
//显示/隐藏指针对象的函数
函数showObject（id）{
document.getElementById（''showpopup''）。style.visibil ity =" visible";
}
// - - >
< / script>
< style>
.ratePopup {
宽度：400px;
border：1px solid＃000000;
background-color：#FFFFFF;
margin：0px 0px 0px 0px;
padding：0px 0px 0px 0px;
}
.rateHeader {
width：100％;
填充：5px 5px 5px 5 px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
font-weight：bold;
颜色：#FFFFFF;
background-color：＃514541;
}
.rateTitle {
宽度：100％;
填充：0px 5px 0px 5px;
font-family： Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
font-weight：bold;
颜色：＃000000;
}
.rateText {
宽度：100％;
填充：0px 5px 0px 5px;
font-family：Arial，Helvetica，Geneva，sans-serif;
font-size：12px;
颜色：＃000000;
}
< / style>
< / head>
< body>
< p> ;测试DHTML< a href =" javascript ：showObject（）;"> pop-up< / a>链接。
< div id =" showpopup"风格= QUOT; z索引：1; visibility：hidden;">
< div class =" ratePopup">
< div class =" rateHeader"> Rate Information< / div>
< h1 class =" rateTitle">预购价格< / h1>
< p class =" rateText">在
预付款中大幅节省购买房价。< / p>
< p>< a href =" javascript ：hideObject（）;">关闭< / a> < / p>
< / div>
< / div>
< / body>
< / html>
<我的问题是弹出链接和一个简短的列表将在.jsp的循环中创建，从而在
页面上创建几个链接/列表
如何使用.css定位来显示链接旁边的弹出窗口而不是顶部的固定位置。
提前感谢。弹出窗口的位置由JavaScript控制，因此IMO无法通过CSS控制。
不，它由html或生成html的脚本控制
以及任何定位属性集使用内联样式或使用
CSS。
我在脚本中看不到设置OP要求的位置的CSS />
大约。
我相信这是剧本的来源：
http://www.mattkruse.com/javascript/...ow/source.html
查看x和y属性，了解控制弹出窗口
位置的可能方法
这不是来源。
如果它不是来源那么它就是为了同一目的。也许OP发现了一个修改版本的
。即使它不是完全相同的脚本，也可以免费获得
。我相信OP可能会使用作者在他的脚本中引用的定位
属性，如果没有，那么如果脚本能够，他至少会知道
满足他的需求。
我似乎相信这是一个弹出窗口，但所有脚本都会改变< div>的显示属性。具有
id =" showpopup"的标记。属性。
然而，他对javascript中的问题是正确的。
脚本仅适用于id =" showpopup"的元素。你需要使脚本更灵活。我不知道javascript所以我不能告诉你
如何。我只回答是因为我离开了目标。
如果有人认为最后一句话，那我就有一些傻瓜的金子我想要
到卖掉它们。
签名，
我
I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
function hideObject() {
document.getElementById(''showpopup'').style.visibil ity = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
document.getElementById(''showpopup'').style.visibil ity = "visible";
}
//-->
</script>
<style>
..ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
..rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
..rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
..rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="ratePopup">
<div class="rateHeader">Rate Information</div>
<h1 class="rateTitle">Advance Purchase Rate</h1>
<p class="rateText">Significant savings for purchasing your rate in
advance.</p>
<p><a href="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>
My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page
How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.
"NS" <ne************@gmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
function hideObject() {
document.getElementById(''showpopup'').style.visibil ity = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
document.getElementById(''showpopup'').style.visibil ity = "visible";
}
//-->
</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="ratePopup">
<div class="rateHeader">Rate Information</div>
<h1 class="rateTitle">Advance Purchase Rate</h1>
<p class="rateText">Significant savings for purchasing your rate in
advance.</p>
<p><a href="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>
My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page
How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.
The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.
I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position
of the popup
Look here for a possible alternative using CSS:
http://www.seoconsultants.com/css/menus/vertical/
Good Luck,
me
me wrote:"NS" <ne************@gmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
function hideObject() {
document.getElementById(''showpopup'').style.visib ility = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
document.getElementById(''showpopup'').style.visibil ity = "visible";
}
//-->
</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="ratePopup">
<div class="rateHeader">Rate Information</div>
<h1 class="rateTitle">Advance Purchase Rate</h1>
<p class="rateText">Significant savings for purchasing your rate in
advance.</p>
<p><a href="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>
My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page
How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS. No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with CSS.
I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position
of the popup
This is not the source.
"me" seems to believe this is a popup window, but all the script does is
to change the display property of the <div> tag that has the
id="showpopup". attribute.
However, he is right about the problem being in the javascript. The
script only works on elements with the id="showpopup". You need to make
the script more flexible. I do not know javascript so I cannot tell you
how. I only answered because "me" was way off target.
regards,
steel
"St?le S?b?e" <ot*****@tdz.no> wrote in message
news:42******@news.broadpark.no...me wrote:"NS" <ne************@gmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...I am relativly new to css positioning and have a question regarding the
display of a DHTML pop-up
Here is the basic HTML I am using:
<html>
<head>
<script language="JavaScript">
<!--
function hideObject() {
document.getElementById(''showpopup'').style.visib ility = "hidden";
}
// Show/Hide functions for pointer objects
function showObject(id) {
document.getElementById(''showpopup'').style.visibil ity = "visible";
}
//-->
</script>
<style>
.ratePopup {
width: 400px;
border: 1px solid #000000;
background-color: #FFFFFF;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.rateHeader {
width: 100%;
padding: 5px 5px 5px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #514541;
}
.rateTitle {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.rateText {
width: 100%;
padding: 0px 5px 0px 5px;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<p>Test the DHTML <a href="javascript:showObject();">pop-up</a> link.
<div id="showpopup" style="z-index:1; visibility:hidden;">
<div class="ratePopup">
<div class="rateHeader">Rate Information</div>
<h1 class="rateTitle">Advance Purchase Rate</h1>
<p class="rateText">Significant savings for purchasing your rate in
advance.</p>
<p><a href="javascript:hideObject();">Close</a> </p>
</div>
</div>
</body>
</html>
My problem is that the pop-up link and a short list to follow will be
created in a loop on a .jsp thus creating several links/lists on the
page
How can I use .css positioning to display the pop-up next to the link
rather than a fixed position at the top.
Thanks in advance.The position of the popup is controlled by JavaScript therefore IMO it
cannot be controlled by CSS.
No, it is controlled by the html or the script that generates the html
along with any positioning properties set with an inline style or with
CSS.
I see no CSS in the script that sets the position that the OP is asking
about.
I believe this is the source of the script:
http://www.mattkruse.com/javascript/...ow/source.html
Look at the x and y properties for a possible method to control the position of the popup
This is not the source.
If it''s not the source then it serves the same purpose. Perhaps the OP found
a modified version. Even if it isn''t the exact same script it is available
for free. I believe it may be possible for the OP to use the positioning
properties the author cites in his script, if not then he will at least know
if the script is capable of meeting his needs.
"me" seems to believe this is a popup window, but all the script does is
to change the display property of the <div> tag that has the
id="showpopup". attribute.
However, he is right about the problem being in the javascript. The
script only works on elements with the id="showpopup". You need to make
the script more flexible. I do not know javascript so I cannot tell you
how. I only answered because "me" was way off target.
If anyone believes that last sentence then I have some fool''s gold I''d like
to sell them.
Signed,
me
这篇关于CSS定位问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
