水平UL和z指数问题的中心？ [英] Centering of horizonal UL and z-index problem?
问题描述
嗨
我在一个
容器中创建的标题遇到了一些麻烦。我有两个问题;首先，尽管在#header声明中尝试使用以下
，菜单（水平UL）将不会在周围标题中间
中心：
margin-left：auto;
margin-right：auto;
列表上方的图像可以使用''轻松居中text-align''属性，
但是这不是UL的任何想法吗？
其次，下拉菜单出现在其他内容的下方
页面，这是一个z-index问题，还是由于列表重叠了div
它在哪里？
这是显示问题的图像：
http ：//www.aoti12.dsl.pipex.com/problem.jpg
#container：红色边框
#header：绿色边框和蓝色背景
这是容器和标题/菜单的CSS：
----------- -------- -------------------------------------------------- -------
---------------
/ *这包含整个页面* /
#container {
位置：绝对;
宽度：100％;
边框：5px纯红色; / *用于测试目的* /
}
---------------------- -------------------------------------------------- ----
---------------
#header {
position：absolute; / *这意味着元素正好位于
页面上* /
宽度：100％; / *要填充的页面百分比* /
左：0;
背景颜色：蓝色;
边框：3px solid绿色;
}
/ *无序列表，即主要按钮* /
#header ul {
填充：0;
保证金：0;
list-style：none;
}
/ *列出项目，即菜单按钮* /
#header li {
float：left;
position：relative;
宽度：120px; / *每个''按钮''的宽度，应该是>比最大的文字* /
保证金：-1px; / *所以盒子不重叠* /
}
/ *列出项目链接，即主要按钮* /
#header li a {
font-family：arial，helvetica，serif;
display：block;
text-decoration：none;
font-weight：bold;
颜色：＃777;
background-image：url（" ../ images / button2。 gif"）;
background-repeat：repeat-x;
padding：2px;
border：0px solid #ccc; / *边框周围的按钮，设置为0 * /
border-width：0px 1px; / *仅在左侧和右侧放置边框* /
text-align：center;
font-size：11px;
}
/ *主要项目的悬停样式，即鼠标悬停时的主要按钮* /
#header ul li a：hover {
颜色：＃E2144A;
背景：＃f9f9f9;
}
/ *子菜单无序列表* /
#header li ul {
display：none;
position：absolute;
margin：0px 1px; / *所以子菜单左边不对齐* /
}
/ *子菜单列表项目* /
＃ header li ul li {
宽度：119px; / *比父菜单宽度小1个像素，这样它们匹配
up * /
}
/ *子菜单链接，即鼠标悬停时的子菜单按钮* /
#header li ul li a {
text-align：left;
font-weight：normal;
border：0px solid #ccc;
border-width：0px 1px 1px; / *顶部，侧面，底部* /
background-image：none;
}
/ * hover样式为sub -menu，即鼠标悬停时的子菜单按钮* /
#header li ul li a：悬停{
颜色：＃E2144A;
背景：＃f9f9f9;
}
/ *覆盖IE以外的浏览器的顶部和左侧，这将定位
$ b包含li的右上角$ b，而不是左下角* /
#header li> ul {
top：auto;
left：auto;
}
/ *列出嵌套在列表项下，制作菜单的魔力
''pop'' up * /
#header li：hover ul，＃header li.over ul {
display：block;
}
#header #content {
clear：left;
}
-------- -------------------------------------------------- ------------------
---
任何帮助非常感谢，我是通过试验学习CSS和错误，我已经''''''''''''''$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ >
Faz写道：我有两个问题;首先，菜单（水平UL）不会在周围的标题中居中，尽管尝试在#header声明中使用
：
margin-left：auto; margin-right：auto;
您是否设置了ul的宽度小于包含块的宽度
宽度？
图像列表上方很容易使用''text-align''
属性进行居中，但这不是UL的任何想法？
< img>是内联的，因此text-align适用。 < UL>是块级别，并且将
增加到包含块的宽度的100％，除非对它的默认显示属性进行了更改。
它是默认显示属性。
其次下拉菜单出现在页面内的其他内容下面，这是一个z索引问题，还是由于列表
重叠它所在的div？
我不知道。我们可以有一个网址吗？
这是容器和标题/菜单的CSS：
#header {position：absolute; / *这意味着元素正好位于页面上* /
/ *这也意味着#header被取出正常流量
文件* /
-
Brian（删除无效给我发电子邮件）
< a rel =nofollowhref =http://www.tsmchughs.com/target =_ blank> http://www.tsmchughs.com/
" Brian" <我们***** @ julietremblay.com.invalid>在消息中写道
news：sc ******************** @ bgtnsc04-news.ops.worldnet.att.net ... < blockquote class =post_quotes> Faz写道：我有两个问题;首先，菜单（水平UL）不会在周围的标题中居中，尽管尝试在#header声明中使用
：
margin-left：auto; margin-right：auto;
你是否为ul设置了一个小于包含块'
宽度的宽度？
列表上方的图像很容易使用''text-align''
属性居中，但这不是UL的任何想法？
< img>是内联的，因此text-align适用。 < UL>是块级别，并且除非对它的默认显示属性进行了更改，否则将包含块的宽度增加100％。
其次下拉菜单出现在页面内的其他内容下面，这是一个z索引问题，还是由于列表
重叠它所在的div？
我不知道。我们可以有一个网址吗？
这是容器和标题/菜单的CSS：
#header {position：absolute ; / *这意味着元素正好位于页面上* /
/ *这也意味着#header被取出
文件* /
-
Brian（删除无效给我发电子邮件）
http://www.tsmchughs.com/
http：//www.aoti12.dsl。 pipex.com/bethel/！test.shtml
nofollowhref =http://www.aoti12.dsl.pipex.com/bethel/css/main.css target =_ blank> http://www.aoti12.dsl.pipex.com/bethel/css/main.css
感谢您的帮助。容器是绝对的左右导航
栏和标题，而内容是相对的。我认为这是最好的
使用''绝对'来定位页面边缘的元素。
我还是无法设法居中容器内的标题，我在哪里？b $ b出错了？
下面的内容下面的下拉列表也会消失，为什么会这样？
我在定位和溢出时又读完了但是没有找到
的答案，或者我确实错过了它！
谢谢
Faz
下面的内容下方的下拉列表也会消失，这是为什么？
我似乎已经通过在标题上使用z-index值1修复了这个问题。
在Firefox 1.0PR中，菜单是罚款和所有子项目都可以选择但是在
IE6.0.2800中，如果你试图选择div底部
以下的子项目，它们就会消失。
http://dialspace.dial.pipex.com /prod/dialspace/town/pipexdsl/o/aoti12/bethel/！test.shtml
有什么想法吗？
谢谢
Faz
Hi
I''m having some real trouble with a header I have created within a
container. I have two problems; firstly the menu (a horizontal UL) will not
centre within the surrounding header, despite attempts to use the following
within the #header declaration:
margin-left: auto;
margin-right: auto;
The image above the list is easily centred using the ''text-align'' property,
but this is not true of the UL, any ideas?
Secondly the drop down menu is appearing beneath other content within the
page, is this a z-index issue, or is it due to the list overlapping the div
it is in?
Here is an image displaying the problems:
http://www.aoti12.dsl.pipex.com/problem.jpg
#container: red border
#header: green border and blue background
Here is the CSS for the container and header/menu:
----------------------------------------------------------------------------
---------------
/*This contains the whole page*/
#container {
position:absolute;
width:100%;
border: 5px solid red; /* for testing purposes */
}
----------------------------------------------------------------------------
---------------
#header {
position:absolute; /* This means the element is positioned exactly upon the
page*/
width:100%; /* percentage of the page to be filled horizontaly */
left:0;
background-color:blue;
border: 3px solid green;
}
/* Unordered Lists, i.e. main buttons */
#header ul {
padding: 0;
margin: 0;
list-style:none;
}
/* List items, i.e. menu buttons */
#header li {
float: left;
position: relative;
width:120px; /* width of each ''button'', should be > than largest text */
margin:-1px; /* so boxes don''t overlap */
}
/* List item links, i.e. main buttons */
#header li a {
font-family: arial, helvetica, serif;
display: block;
text-decoration: none;
font-weight:bold;
color: #777;
background-image: url("../images/button2.gif");
background-repeat:repeat-x;
padding: 2px;
border: 0px solid #ccc; /* border around buttons, set to 0 */
border-width:0px 1px; /* place border only on left and right sides */
text-align:center;
font-size:11px;
}
/* Hover Styles for main item, i.e. main buttons when mouse-over */
#header ul li a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* Sub-menu unordered lists */
#header li ul {
display: none;
position: absolute;
margin:0px 1px; /* So sub menu aligns on left not right */
}
/* Sub Menu list item */
#header li ul li {
width: 119px; /* 1 pixel less than parent menu width, so that they match
up*/
}
/* Sub Menu links, i.e. sub-menu buttons when mouse-over */
#header li ul li a {
text-align:left;
font-weight:normal;
border: 0px solid #ccc;
border-width: 0px 1px 1px; /* top, sides, bottom */
background-image:none;
}
/* Hover Styles for sub-menu, i.e. sub-menu buttons when mouse-over */
#header li ul li a:hover {
color: #E2144A;
background: #f9f9f9;
}
/* to override top and left in browsers other than IE, which will position
to the top right of the containing li, rather than bottom left */
#header li>ul {
top: auto;
left: auto;
}
/* lists nested under hovered list items, the magic that makes the menus
''pop'' up*/
#header li:hover ul, #header li.over ul {
display: block;
}
#header #content {
clear: left;
}
----------------------------------------------------------------------------
---
any help greatly appreciated, i''m learngin CSS throught trial and error, i
have been ''trialing'' this problem afr too long!
Thanks
Faz
Faz wrote:I have two problems; firstly the menu (a horizontal UL) will not
centre within the surrounding header, despite attempts to use the
following within the #header declaration:
margin-left: auto; margin-right: auto;
Have you set a width for the ul that is less than the containing block''s
width?
The image above the list is easily centred using the ''text-align''
property, but this is not true of the UL, any ideas?
<img> is inline, so text-align applies. <ul> is block level, and takes
up 100% of the containing block''s width unless changes have been made to
it''s default display properties.
Secondly the drop down menu is appearing beneath other content within
the page, is this a z-index issue, or is it due to the list
overlapping the div it is in?
I don''t know. Can we have a url, please?
Here is the CSS for the container and header/menu:
#header { position:absolute; /* This means the element is positioned
exactly upon the page*/
/* it also means that #header is taken out of the normal flow of the
document */
--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/
"Brian" <us*****@julietremblay.com.invalid> wrote in message
news:sc********************@bgtnsc04-news.ops.worldnet.att.net...Faz wrote:I have two problems; firstly the menu (a horizontal UL) will not
centre within the surrounding header, despite attempts to use the
following within the #header declaration:
margin-left: auto; margin-right: auto;
Have you set a width for the ul that is less than the containing block''s
width?The image above the list is easily centred using the ''text-align''
property, but this is not true of the UL, any ideas?
<img> is inline, so text-align applies. <ul> is block level, and takes
up 100% of the containing block''s width unless changes have been made to
it''s default display properties.Secondly the drop down menu is appearing beneath other content within
the page, is this a z-index issue, or is it due to the list
overlapping the div it is in?
I don''t know. Can we have a url, please?Here is the CSS for the container and header/menu:
#header { position:absolute; /* This means the element is positioned
exactly upon the page*/
/* it also means that #header is taken out of the normal flow of the
document */
--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/
http://www.aoti12.dsl.pipex.com/bethel/!test.shtml
http://www.aoti12.dsl.pipex.com/bethel/css/main.css
Thanks for your help. The container is absolute with the left and right nav
bars and header, whilst the content is relative. I thought this was best to
use ''absolute'' to position the elements around the edge of the page.
I still can not manage to centre the header within the container, where am I
going wrong?
Also the drop down lists disappear beneath the content below, why is this?
I have read up again upon positioning and overflow but have not found the
answer, or indeed I have missed it!
Thanks
Faz
Also the drop down lists disappear beneath the content below, why is this?
I appear to have fixed this by using a z-index value of 1 upon the header.
In Firefox 1.0PR the menu is fine and all sub-items selectable however in
IE6.0.2800 they disappear if you try to select a sub-item below the bottom
of the div.
http://dialspace.dial.pipex.com/prod/dialspace/town/pipexdsl/o/aoti12/bethel/!test.shtml
Any ideas?
Thanks
Faz
这篇关于水平UL和z指数问题的中心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
