[英]CSS - Tableless Menu Bar on fluid layout and centered
I am trying to make a tableless menu bar using some png images with transparencies.我正在尝试使用一些带有透明胶片的 png 图像制作一个无表格的菜单栏。 The menu bar is nested inside a wrapper with min/max widths and centers itself using auto left/right margins.
菜单栏嵌套在具有最小/最大宽度的包装器内,并使用自动左/右边距居中。 Ideally I'd like 1 section to adjust itself length wise with a background repeat-x.
理想情况下,我希望 1 部分使用背景重复 x 来调整自身长度。 Since the png's have transparency value they cannot overlap each other as that would increase the visibility on the overlapping sections.
由于 png 具有透明度值,因此它们不能相互重叠,因为这会增加重叠部分的可见性。
I tried absolute positioning but that forces you to have a horizontal starting location which is unavailable in the fluid layout.我尝试了绝对定位,但这会迫使你有一个水平的起始位置,这在流体布局中是不可用的。 Wrapper style:
包装样式:
margin-left: auto;
margin-right: auto;
min-width: 960px;
max-width: 1260px;
padding: 0px 20px 0px 20px;
overflow: visible;
Working design with tables: http://jsfiddle.net/f35UK/带表的工作设计: http://jsfiddle.net/f35UK/
Images (I used base64 in the code but just in case):图片(我在代码中使用了 base64 但以防万一):
use list items for your menu.为您的菜单使用列表项。 for an example on how to set this you can view a project i am currenly working on:
有关如何设置的示例,您可以查看我正在处理的项目:
http://basenharald.nl/3d/ in the source search for "navigatie" below that you will find the UL navigation http://basenharald.nl/3d/在下面的“navigatie”源搜索中,您将找到 UL 导航
also open http://basenharald.nl/3d/css/style.css in the source search for "#nav".还在源搜索“#nav”中打开http://basenharald.nl/3d/css/style.ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ。 This is the css part to set the navigation.
这是用于设置导航的 css 部件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.