我正在尝试创建一个主要依赖于CSS的小工具提示脚本.我无法弄清楚的一点是如何根据它与浏览器边缘的距离来定位div.
当div出现时,我希望它检查它与顶部,底部,左侧和右侧的距离.例如,如果没有足够的空间在工具提示链接上方显示div,则应将其放置在链接下方.
基本上我希望div能够"了解"它的位置并知道去哪里确保它是可见的.
谢谢
我正在做一个网站,其中图像需要在文本内容旁边呈现 - 一种伪的双列布局,因为图像和文本来自单个html源.
通过将图像作为自己的段落并浮动它,我发现了一种非常简单的方法.如果没有这些额外的段落并且仅将额外的CSS归因于图像,是否仍然有更简单的方法(关于html)？
如果浮动图像与文本在同一段落中,则带有和不带图像的段落的宽度将不同.
编辑:基本上,我在寻找简单的HTML标记,尽可能定位像图像这样.CSS可能很复杂;)
CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }
Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>
Is the above possible with this HTML?
<p><img src="image.jpg" /></p>
我正在尝试将元素放在元素的左侧,但是我似乎无法使它们具有相同的高度并且彼此对齐.跨度似乎总是略高一些.
有人有任何想法吗？
闪耀*
编辑:HTML部分
<label for="name">Username: </label>
<input type="text" name="name" id="name" value="" maxlength="15"/>
<span id="box" style="display:none"></span>
CSS
span.box{
position:absolute;
width:100px;
margin-left:20px;
border:1px;
padding:2px;
height: 16px;
}
input.name {
width: 115px;
height: 14px;
}
我有这个HTML源代码:
<!DOCTYPE html>
<html>
<head>
<title>Stylish Web Page</title>
<style type="text/css">
body { padding: 0; margin: 0; }
div.table { display: table;}
div.tableRow { display: table-row;}
div.tableCell { display: table-cell;}
div.contentWrapper { width: 100%; height: 760px; position: relative;
margin: 0 auto; padding: 0; }
div.footerBar { width: inherit; height: 60px; background-image: url("BarBG.png");
background-repeat: repeat-x; position: absolute; bottom: 0; }
</style>
</head>
<body>
<div class="table contentWrapper">
<div class="tableRow"> </div>
<div class="footerBar"> </div>
</div>
</body>
</html>
页脚应该出现在页面的底部,它在Opera和Chrome中都是这样; 但是,在Firefox中,页脚后面有很多空房间.我究竟做错了什么？怎么解决？
这是一个截图:蓝色突出显示是页脚.
(请注意:"position:fixed"不是我想要的;我希望页脚显示在页面底部,而不是浏览器窗口.)
我在我的页面上使用z-index(不再需要链接),并且它无法正常工作:它不会将某些div放在所有其他div之上...
您可以通过单击左侧或右侧栏中的某个项目自行查看.然后,掩码将淡入,但在其下方显示消息框.我已经尝试了很多,但我无法将消息框显示在所有其他人之上......
我该怎么做才能解决这个问题？ [注意:下面第2个问题!]
如果您不想检查页面,则消息框位于其他一些div中:
<div>
<div>
<div>message box</div>
</div>
</div>
CSS定位是这样的:
.window {
position: fixed;
left: 0px;
top: 0px;
z-index: 100;
}
我使用position:fixed,因为position:绝对不是绝对的,div不是与body对齐,而是某种其他方式. 有没有办法重新定位它和绝对位置呢？
我希望我的页面始终在浏览器中居中而不影响内容(例如align-text:center; does).我想以我的包装器为中心..我该怎么做？
简化现有页面:
<div id="wrapper">
<div id="header">
Music Heaven
</div>
<div id="topmeny">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="bottom">
SiteAdmin
</div>
</div>
整个小提琴:http://jsfiddle.net/EndQb/
我不需要一个有效的解决方案,但我正在寻找能够通过一些有用的提示/链接推动我走向正确方向的人:
我有一个带有基准的图像(可以是例如十字或点或任何简单的几何形状).图像源本身以某种方式点亮,使得人不喜欢所得到的图像,但基准的对比度非常好.接下来,我对该基准(矢量数据格式)及其标称位置进行了清晰的几何描述.
现在我希望OpenCV在图像中找到基准并返回其真实的当前位置(以及可能的基准点的旋转).
如何使用OpenCV完成这项工作？我发现的教程总是使用复杂的模式,如面部和图片,这些模式没有针对基准检测本身进行优化,因此它们都使用非常复杂的学习/描述方法.
使用PyQt4,当我隐藏窗口并在之后显示它时,它出现在另一个位置(至少在Linux上).示例代码:
#!/usr/bin/python3
from PyQt4.QtGui import *
app = QApplication([])
widget = QWidget()
widget.setLayout(QVBoxLayout())
label = QLabel()
widget.layout().addWidget(label)
def hideShow():
widget.hide()
widget.show()
widget.layout().addWidget(QPushButton('Hide/Show', clicked = hideShow))
widget.show()
app.exec_()
窗口消失并出现,但略低于原始位置的右侧.我认为它被实际小部件周围窗口管理器框架的大小所取代.
如何将窗口放置在确切的位置？为什么它会移动？它不应该留在原地吗？
我在我的网页中有以下HTML,我希望将侧边栏固定在左侧.它在Chrome中工作正常,但Firfox没有将侧边栏显示为固定:
<div id="sidebar">
<!-- Logo -->
<div >
<h1>Heading</h1>
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#target1" >About</a></li>
<li><a href="#target2" >Works</a></li>
<li><a href="#target3" >Our Team</a></li>
<li><a href="#target4" >Contact</a></li>
</ul>
</nav>
</div>
上面代码的CSS是:
#sidebar
{
position: fixed;
top: 0;
padding: 3em 1.35em 1em 1.15em;
height: 100%;
width: 12em;
background: #364050 ;
box-shadow: inset -0.1em 0em 0.35em 0em rgba(0,0,0,0.15);
}
请给我一些解决方案,以便侧边栏在Firefox中保持固定.
DOWNVOTERS请先评论.
我的HTML就像这样 - ;
<div class="wrapper">
<div class="header">
this is the header
<div class="hdr-lnks">
<a href="#">home</a>
</div>
</div>
</div>
我的css是这样的:
.hdr-lnks {
position:fixed;
}
为什么当我设置时position: fixed,div会消失吗？