[英]layout problems with CSS position
hey guys i'm trying to create a navigation system similar to the one you can find on starbucks.com. 嘿伙计们,我正在尝试创建一个类似于你在starbucks.com上找到的导航系统。 Here is the link to my sample: http://dl.dropbox.com/u/73992/js_tests/test.htm I am accomplishing the effect with navigation sample on the bottom but as you can see there are positioning problems.
以下是我的示例链接: http : //dl.dropbox.com/u/73992/js_tests/test.htm我正在底部完成导航示例的效果,但正如您所看到的那样存在定位问题。 You can find the CSS in the source code.
您可以在源代码中找到CSS。 I figured this is the best way to test it.
我认为这是测试它的最佳方法。 Thank you in advance for any help I can get it.
提前感谢您提供的任何帮助。
as per the suggestion here's the css 按照这里的建议是css
*
{
margin:0;
padding:0;
}
#nav
{
position:relative;
margin-top:3em;
margin-left:3em;
}
#nav ul
{
list-style-type:none;
}
#nav ul li
{
position:relative;
margin-top:10px;
}
#nav ul li ul li
{
margin-top:0px;
}
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
border-bottom:none;
z-index:20;
}
.content
{
position:relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
}
.content form
{
display:block;
margin:10px 10px 10px 10px;
}
.content p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.gallery
{
margin:10px 10px 10px 10px;
background-color:#ffffff;
border:solid 1px black;
}
.gallery img
{
display:inline-block;
margin:10px 5px 10px 0px;
float:left;
}
/*
This next section is identical but represents what happens w/ the absolute positioning.
*/
.content2
{
position:absolute;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
top:30px;
z-index:-5;
}
.content2 form
{
display:block;
margin:10px 10px 10px 10px;
}
.content2 p
{
text-align:left;
display:block;
margin:10px 10px 10px 10px;
}
.clear
{
clear:both;
}
if this helps this is what I am trying to accomplish 如果这有助于这是我想要完成的
Give this a try. 试一试。 Change the position from absolute to relative, and remove the 30px top margin.
将位置从绝对更改为相对,并删除30px上边距。 You should be able to get the same effect as the 3 examples above yours.
您应该能够获得与您上面的3个示例相同的效果。
.content2
{
position: relative;
width:300px;
background-color:#F7FF88;
border:solid 5px black;
z-index:-5;
}
[EDIT] [编辑]
First off, remove the "border-bottom:none;" 首先,删除“border-bottom:none;” so your h1 will still have bottom borders for that tabbed effect.
所以你的h1仍然会有标签效果的底部边框。
#nav ul li h1
{
font-size:15px;
font-weight:bold;
text-align:center;
color:#000000;
background-color:#F7FF88;
border:solid 5px black;
width:100px;
height:30px;
z-index:20;
}
Give your h1 a class, let's say "tabbed" 给你的h1上课,让我们说“标签”
<li><h1 class="tabbed">Ex. 1</h1>
And probably use some negatives for your CSS. 并且可能会为CSS使用一些底片。
h1.tabbed {
position:absolute;
top:-28px;
}
Give this one a try. 尝试一下这个。
Put display:inline;
放置
display:inline;
on li
在
li
And float:left;
float:left;
on ul
在
ul
I think it's your big problem, if I had understand well your problem. 如果我理解你的问题,我认为这是你的大问题。
float : left can solve your positioning problem. float:left可以解决您的定位问题。 You have to add just two lines in your css
你必须在你的CSS中只添加两行
#nav ul li {
float: left;
margin: 0 15px;
position: relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.