弹出显示 [英] popup with display
问题描述
您好，
我遇到了css类型弹出窗口的问题。
它在Mozilla 1.6和IE6.0中没有做我想要的它根本不工作
。
html代码如下：
< div class =" themenkueche" id =" tk">
< h1> Themenk& uuml; chen< / h1>
< p>
< ; a href =" ./ hits4kids / hits4kids.html" target =" main">
< img src =" ./ images / hitsfuerkids.gif"宽度= QUOT; 178" height =" 100"
border =" 0" alt =" Hits fuer Kids"
< span>点击f& uuml; r Kids< br> Leckere Sachen< / span>
< / a> ;
< / p>
< / div>
这样的CSS：
#tk span {
显示：无;
}
#tk a：悬停跨度{
显示：块;
位置：相对;
宽度：174px;
左：-150px;
顶部：-80px;
margin-top：3px;
margin-bottom：3px;
填充：5px;
z-index：100;
背景色：＃6780C7;
颜色：＃081B50;
字体：11px Verdana， Arial，Helvetica，sans-serif;
font-weight：bold;
text-align：left;
}
您可以在以下网址看到：
www .rossmeier.de / Test / main2.html
www.rossmeier.de/Test/main.css
我不希望侧面的其他部分位于链接跳下
当我用鼠标浏览图像时，
。我希望弹出窗口显示在IE浏览器中。我的代码错在哪里？任何想法？
感谢您的帮助。
干杯
Olli
Hello,
i''m having trouble with a css type popup.
It''s not doing what i want in Mozilla 1.6 and in IE6.0 it''s not working
at all.
The html code looks like this:
<div class="themenkueche" id="tk">
<h1>Themenküchen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits für Kids<br>Leckere Sachen</span>
</a>
</p>
</div>
And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}
you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css
I don''t want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?
Thank you for helping.
Cheers
Olli
推荐答案
Oliver写道：
你好，
我遇到了css类型弹出窗口的问题。
这不是我做的事情想要在Mozilla 1.6
好的。指出。那应该是什么呢？预期成绩？我想b / b
假设你想要这样的div，对吗？究竟在哪里？
和IE6.0中它根本不起作用。
HTML代码如下：
< div class =" themenkueche" id =" tk">
< h1> Themenk& uuml; chen< / h1>
< p>
< a href =" ./ hits4kids / hits4kids。 HTML" target =" main">
< img src =" ./ images / hitsfuerkids.gif"宽度= QUOT; 178" height =" 100"
border =" 0" alt =" Hits fuer Kids">
< span>点击f& uuml; r Kids< br> Leckere Sachen< / span>
< / a>
< / p>
< / div>
这是最右上角的图像。
和这样的CSS：
#tk span {
显示：无;
}
#tk a：悬停跨度{
显示：块;
为什么要制作量程显示块？请解释。
位置：相对;
宽度：174px;
左：-150px;
顶部：-80px;
margin-top：3px ;
margin-bottom：3px;
填充：5px;
z-index：100;
为什么z指数为100？如果你使用的z-index为100，那么从理论上来说它将是b / b
意味着你在同一堆叠级别/上下文中有一堆99个其他定位的
图层。是这样吗？为什么z-index
无论如何要开始？
背景色：＃6780C7;
颜色：＃081B50;
字体：11px Verdana，Arial，Helvetica，sans-serif;
不建议绝对长度值单位，特别是因为
MSIE浏览器;你在css代码中随处可见。 ％或em for
字体大小是最好的，值得推荐，因为这些单位值是相对且可扩展的
。
font-weight：bold ;
只做必要的声明和不继承的声明。
这里，p有font-weight：bold;已经。调试的第一步是
，以尽可能简化和澄清代码。有一些
技术可以使样式表优化并且更加健壮。你很明显
肯定需要使用它们。
text-align：left;
}
你可以在：
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css
你的css文件完全有效吗？因为此声明无效：
..leckerkochen {
职位：绝对;
剩余：240;
并且将属于CSS的错误条件。没有宣布任何单位。
当我用鼠标浏览图像时，我不希望侧面的其他部分位于链接上跳下来。我希望弹出窗口出现在IE浏览器中。我的代码错在哪里？有什么想法吗？
感谢您的帮助。
干杯
Olli
Hello,
i''m having trouble with a css type popup.
It''s not doing what i want in Mozilla 1.6
Ok. Noted. And what was it supposed to do exactly? Expected results? I
assume you want to position such div, right? So where exactly?
and in IE6.0 it''s not working at all.
The html code looks like this:
<div class="themenkueche" id="tk">
<h1>Themenküchen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits für Kids<br>Leckere Sachen</span>
</a>
</p>
</div>
This is the top-right most image.
And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
Why make the span display block? Please explain.
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
Why a z-index of 100? If you use a z-index of 100, then it would
logically suppose, mean that you have a stack of 99 other positioned
layers at the same stacking level/context. Is that so? And why a z-index
to begin with anyway?
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
Absolute length value units is not recommendable, specially because of
MSIE browsers; you use these everywhere in your css code. % or em for
font-size is best, is recommendable because these unit values are
relative and scalable.
font-weight: bold;
Only make declaration that are necessary and which are not inherited.
Here, the p has font-weight: bold; already. First step when debugging is
to simplify and clarify the code as much as possible. There are
techniques to make a stylesheet optimized and more robust. You obviously
would need to use them for sure.
text-align: left;
}
you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css
Is your css file entirely valid? Because this declaration is invalid:
..leckerkochen {
position:absolute;
left: 240;
and will fall under error conditions for CSS. No unit declared.
I don''t want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?
Thank you for helping.
Cheers
Olli
您需要先回答几个问题。
顺便说一句，我可以向你保证这个功能非常糟糕：
功能newWindow（地址）{
window.open（地址，" _image"，" width = 400，height = 600，left = 100，top = 100"）;
}
窗口名称不能以下划线_开头：这不是值得推荐的。
如果顶部是100而高度是600，那么窗口会溢出
800x600和1024x728用户的工作区因为你不认为
标题栏（〜= 18px），窗口[重新]调整边框（4px），windows任务栏
（28px或更多：用户可自定义）和任何其他工具栏，Mozilla
用户可以*强制*通过user.js文件呈现。这是我的情况，顺便说一句。
您的代码使这样的窗口不可调整大小，您的代码将关闭
滚动条即使内容溢出请求的窗口尺寸：
这不再推荐，因为它不会促进
内容的可访问性。
DU
You need to answer a few questions first.
Btw, I can assure you taht this function is quite bad:
function newWindow(address) {
window.open(address,"_image","width=400,height=600 ,left=100,top=100");
}
Window name can not start with an underscore "_": this is not recommendable.
If the top is 100 and height is 600, then the window will overflow the
workarea of users with 800x600 and 1024x728 because you do not consider
the titlebar (~=18px), window [re-]sizing borders (4px), windows taskbar
(28px or more: user customizable) and any other toolbar that Mozilla
users can *force* to be rendered via the user.js file. That is my case, btw.
Your code make such window non-resizable and your code will turn off
scrollbars even if the content overflows requested window dimensions:
this again is not recommendable as it does not promote accessibility to
content.
DU
Oliver写道：
你好，
我遇到了css类型弹出窗口的问题。
它在Mozilla 1.6中没有做我想要的
好的。指出。那应该是什么呢？预期成绩？我想b / b
假设你想要这样的div，对吗？究竟在哪里？
和IE6.0中它根本不起作用。
HTML代码如下：
< div class =" themenkueche" id =" tk">
< h1> Themenk& uuml; chen< / h1>
< p>
< a href =" ./ hits4kids / hits4kids。 HTML" target =" main">
< img src =" ./ images / hitsfuerkids.gif"宽度= QUOT; 178" height =" 100"
border =" 0" alt =" Hits fuer Kids">
< span>点击f& uuml; r Kids< br> Leckere Sachen< / span>
< / a>
< / p>
< / div>
这是最右上角的图像。
和这样的CSS：
#tk span {
显示：无;
}
#tk a：悬停跨度{
显示：块;
为什么要制作量程显示块？请解释。
位置：相对;
宽度：174px;
左：-150px;
顶部：-80px;
margin-top：3px ;
margin-bottom：3px;
填充：5px;
z-index：100;
为什么z指数为100？如果你使用的z-index为100，那么从理论上来说它将是b / b
意味着你在同一堆叠级别/上下文中有一堆99个其他定位的
图层。是这样吗？为什么z-index
无论如何要开始？
背景色：＃6780C7;
颜色：＃081B50;
字体：11px Verdana，Arial，Helvetica，sans-serif;
不建议绝对长度值单位，特别是因为
MSIE浏览器;你在css代码中随处可见。 ％或em for
字体大小是最好的，值得推荐，因为这些单位值是相对且可扩展的
。
font-weight：bold ;
只做必要的声明和不继承的声明。
这里，p有font-weight：bold;已经。调试的第一步是
，以尽可能简化和澄清代码。有一些
技术可以使样式表优化并且更加健壮。你很明显
肯定需要使用它们。
text-align：left;
}
你可以在：
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css
你的css文件完全有效吗？因为此声明无效：
..leckerkochen {
职位：绝对;
剩余：240;
并且将属于CSS的错误条件。没有宣布任何单位。
当我用鼠标浏览图像时，我不希望侧面的其他部分位于链接上跳下来。我希望弹出窗口出现在IE浏览器中。我的代码错在哪里？有什么想法吗？
感谢您的帮助。
干杯
Olli
Hello,
i''m having trouble with a css type popup.
It''s not doing what i want in Mozilla 1.6
Ok. Noted. And what was it supposed to do exactly? Expected results? I
assume you want to position such div, right? So where exactly?
and in IE6.0 it''s not working at all.
The html code looks like this:
<div class="themenkueche" id="tk">
<h1>Themenküchen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits für Kids<br>Leckere Sachen</span>
</a>
</p>
</div>
This is the top-right most image.
And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
Why make the span display block? Please explain.
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
Why a z-index of 100? If you use a z-index of 100, then it would
logically suppose, mean that you have a stack of 99 other positioned
layers at the same stacking level/context. Is that so? And why a z-index
to begin with anyway?
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
Absolute length value units is not recommendable, specially because of
MSIE browsers; you use these everywhere in your css code. % or em for
font-size is best, is recommendable because these unit values are
relative and scalable.
font-weight: bold;
Only make declaration that are necessary and which are not inherited.
Here, the p has font-weight: bold; already. First step when debugging is
to simplify and clarify the code as much as possible. There are
techniques to make a stylesheet optimized and more robust. You obviously
would need to use them for sure.
text-align: left;
}
you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css
Is your css file entirely valid? Because this declaration is invalid:
..leckerkochen {
position:absolute;
left: 240;
and will fall under error conditions for CSS. No unit declared.
I don''t want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?
Thank you for helping.
Cheers
Olli
您需要先回答几个问题。
顺便说一句，我可以向你保证这个功能非常糟糕：
功能newWindow（地址）{
window.open（地址，" _image"，" width = 400，height = 600，left = 100，top = 100"）;
}
窗口名称不能以下划线_开头：这不是值得推荐的。
如果顶部是100而高度是600，那么窗口会溢出
800x600和1024x728用户的工作区因为你不认为
标题栏（〜= 18px），窗口[重新]调整边框（4px），windows任务栏
（28px或更多：用户可自定义）和任何其他工具栏，Mozilla
用户可以*强制*通过user.js文件呈现。这是我的情况，顺便说一句。
您的代码使这样的窗口不可调整大小，您的代码将关闭
滚动条即使内容溢出请求的窗口尺寸：
这不再推荐，因为它不会促进
内容的可访问性。
DU
You need to answer a few questions first.
Btw, I can assure you taht this function is quite bad:
function newWindow(address) {
window.open(address,"_image","width=400,height=600 ,left=100,top=100");
}
Window name can not start with an underscore "_": this is not recommendable.
If the top is 100 and height is 600, then the window will overflow the
workarea of users with 800x600 and 1024x728 because you do not consider
the titlebar (~=18px), window [re-]sizing borders (4px), windows taskbar
(28px or more: user customizable) and any other toolbar that Mozilla
users can *force* to be rendered via the user.js file. That is my case, btw.
Your code make such window non-resizable and your code will turn off
scrollbars even if the content overflows requested window dimensions:
this again is not recommendable as it does not promote accessibility to
content.
DU
Oliver写道：
Oliver wrote:
你好，
我遇到了css类型弹出窗口的麻烦。
这不是我做的事情想要在Mozilla 1.6和IE6.0中它根本不工作
HTML代码如下：
< div class = " themenkueche" id =" tk">
< h1> Themenk& uuml; chen< / h1>
< p>
< a href =" ./ hits4kids / hits4kids。 HTML" target =" main">
< img src =" ./ images / hitsfuerkids.gif"宽度= QUOT; 178" height =" 100"
border =" 0" alt =" Hits fuer Kids">
< span>点击f& uuml; r Kids< br> Leckere Sachen< / span>
< / a>
< / p>
< / div>
这样的CSS：
#tk span {
显示：无;
}
#tk a：悬停跨度{
显示：阻止;
位置：相对;
宽度：174px;
左：-150px;
顶部：-80px; <保证金最高价：3px;
保证金底部：3px;
填充：5px;
z-index：100;
背景颜色：＃6780C7;
颜色：＃081B50;
字体：11px Verdana，Arial，Helvetica，sans-serif;
font-weight：bold;
text-align：left;
} <你可以在以下网址看到：
www .rossmeier.de / Test / main2.html
www.rossmeier.de/Test/main.css
我不希望旁边的其他部分位于链接跳转当我用鼠标浏览图像时。我希望弹出窗口出现在IE浏览器中。我的代码错在哪里？有什么想法吗？
感谢您的帮助。
干杯
Olli
Hello,
i''m having trouble with a css type popup.
It''s not doing what i want in Mozilla 1.6 and in IE6.0 it''s not working
at all.
The html code looks like this:
<div class="themenkueche" id="tk">
<h1>Themenküchen</h1>
<p>
<a href="./hits4kids/hits4kids.html" target="main">
<img src="./images/hitsfuerkids.gif" width="178" height="100"
border="0" alt="Hits fuer Kids">
<span>Hits für Kids<br>Leckere Sachen</span>
</a>
</p>
</div>
And the CSS like this:
#tk span {
display: none;
}
#tk a:hover span {
display: block;
position: relative;
width: 174px;
left: -150px;
top: -80px;
margin-top: 3px;
margin-bottom:3px;
padding: 5px;
z-index: 100;
background-color: #6780C7;
color: #081B50;
font: 11px Verdana, Arial, Helvetica, sans-serif ;
font-weight: bold;
text-align: left;
}
you can see it at:
www.rossmeier.de/Test/main2.html
www.rossmeier.de/Test/main.css
I don''t want the other parts of the on the side located links jump down
when i go over the images with a mouse. And i want the popup appear in
the IE. Where am i wrong with my code? Any ideas?
Thank you for helping.
Cheers
Olli
您的标记代码中到处都有不正确的嵌套。首先声明
a doctype声明，最好是严格HTMl 4.01以获得最佳和
一致的跨浏览器布局结果（这将触发MSIE 6进入
标准兼容的渲染模式）然后验证您的标记代码
W3C质量保证：
有效DTD列表：
http://www.w3.org/QA/2002/04/valid -dtd-list.html
使用Doctype声明激活正确的布局模式
http://www.hut.fi/u/hsivonen/doctype.html
W3C验证器：
http://validator.w3.org/
你绝对需要先解决不正确的嵌套问题。
常见验证问题：
错误的嵌套元素
http://www.htmlhelp.com/tools/valida。 ..s.html #nocking
你的CSS代码也有点不合逻辑。
如果themenkueche元素是abs。定位，然后他们的孩子应该b
不需要进一步定位。这个css规则似乎过度约束
，应该避免IMO。
..themenkueche p {
margin-top： 3px;
保证金底部：3px;
}
肯定有其他方式，更简单和交叉浏览器
达到你想要的效果。
DU
You have improper nesting everywhere in your markup code. First declare
a doctype declaration, preferably strict HTMl 4.01 for best and
consistent cross-browser layout results (this will trigger MSIE 6 into
standards compliant rendering mode) and then validate your markup code
W3C Quality Assurance:
List of valid DTDs:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html
W3C validator:
http://validator.w3.org/
You absolutely need to fix the incorrect nestings issues first.
Common Validation Problems:
Incorrect Nestings of Elements
http://www.htmlhelp.com/tools/valida...s.html#nesting
Your CSS code is also a bit illogical.
If themenkueche elements are abs. positioned, then their children should
not need to be positioned further. This css rule seems over-constraining
and should be avoided IMO.
..themenkueche p {
margin-top: 3px;
margin-bottom:3px;
}
There is for sure other ways, much more simpler and cross-browser to
achieve what you want.
DU
这篇关于弹出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
