分离导航栏和绝对定位 [英] Dissociated navigation bar and absolute positioning
问题描述
首先，这是一个帮助您弄清楚我在说什么的页面 ：
http://relinquiere.free.fr/test.html
你可以在源代码中看到这个页面，结构如下：
- 横幅
- 跳转到导航链接div
- 主要div with：
- 包含内容的div
- 单个ul中的导航链接
- 页脚
导航栏由三个级别的选项组成，但是在样式表中分离了一些
：第一个级别应该出现在
页面的顶部，接下来的两个级别应该出现在页面的左侧，
旁边的内容（右侧）。
这个效果非常好*如果*内容比侧栏长，但如果失败，页脚和侧栏重叠（如示例中所示）
。
可以anyo我想到一种方法来解决这个问题，还是应该放弃并将我的
单个导航栏分成两个列表？
谢谢。
2004年1月16日星期五16:05:08 +0000，Vincent< vincent。@ wanadoo.fr>写道：
首先，这是一个帮助你弄清楚我在说什么的页面 ：
http://relinquiere.free.fr/test.html
As你可以在这个页面的源头看到，结构是
以下：
- 一个横幅
- 一个跳到导航链接div
- 一个主要的div与：
- 包含内容的div
- 单个导航链接
- 页脚
导航栏由三个级别的选项组成，但是很友好
在样式表中分离：第一级应出现在页面顶部，接下来的两个级别应出现在页面左侧，
旁边的内容（在右边）。
这是你能做的。
< body>
< div id =" header">
标题内容
< / div>
< div i d =" main">
大盒子里的所有东西。
< / div>
< div id = " nav">
左侧导航条信息
< / div>
< div id =" footer"> ;
页脚内容
< / div>
< / body>
#header - 没有设置定位，只是默认静态。
#main - float：right;
#nav - float：left; （也可浮动：正确;如果您愿意，可以设置保证金
设置正确）
#footer - clear：both;
在两列上使用宽度百分比。将边距等添加到
div中，以便按照您的意愿对它们进行分隔。
Neal写道：周五，2004年1月16日16:05:08 +0000，Vincent< vincent。@ wanadoo.fr>写道：
这是你能做的。
< body>
< div id =" header">
Header Stuff
< / div>
< div id =" main">
大盒子里的所有内容。
< / div>
< div id =" nav">
左侧导航栏信息
< / div>
< div id =" footer">
页脚内容
< / div>
< / body>
#header - 没有设置定位，只是默认静态。
#main - float：right;
#nav - float：left; （也可以漂浮：正确;如果你愿意的话，
边距设置正确）
#footer - clear：both;
使用两个宽度的百分比列。在
div中添加边距等，以便按照您的意愿对它们进行分隔。
谢谢，但这不是我想要的。也许我不清楚我的
解释，这就是为什么我加入了一个例子
http://relinquiere.free.fr/test.html 。
导航栏基本上是一个列表：
< ul>
< li> A< ul1 />< / li>
< li> B< ul2 />< / li>
< li> C< ul3 />< / li>
< / ul>
我想在页面顶部的水平菜单中显示A，B，C
（横幅下面）和相应的子列表作为辅助垂直
左边的
菜单，即如果用户选择了选项A，他从服务器检索一个
页面P1，ul1应该显示为二级菜单，如果他是/>
选择B，他得到P2并显示ul2，依此类推。
我知道这可能听起来很奇怪，但背后的想法是，根据
到样式表，我可以如上所述，将我的导航列表显示为两个分离的
菜单，或者作为单个多级菜单。我认为
会很棒，但也许这是不可能的，因为我有这个与页脚重叠的问题。
On Sun，2004年1月18日11:49:07 +0000，Vincent< vincent。@ wanadoo.fr>写道：
我想在页面顶部的水平菜单中显示A，B，C
（横幅下方）和相应的子列表左侧的辅助垂直菜单，即如果用户选择了选项A，他从服务器检索页面P1，如果他选择B，则ul1应显示为辅助菜单，他得到P2并显示ul2，依此类推。
对。我想你是这么想的，如果用户从顶栏选择菜单1
（#mainbar），侧边栏（#scndbar）应显示相应的子菜单
结构那个菜单项。同时，你想要没有样式的页面
来显示整个结构。
你要做的就是拉出一个部分来漂浮在不同的位置，比这更好，这就是问题所在。如果你想让页脚清除#scndbar *和*内容div（其中一个可能更高或
比另一个更短，取决于内容） ，你将不得不
浮动#scndbar。因为高度是依赖于内容的，所以你不能在一个地方漂浮，而不是在代码中，你就会陷入困境。
接下来最好的事情是提取主要列表并先设置它，然后
使用左边栏的次要等列表然后把它放在
$ b $之后b列表。它将在没有样式的页面中解除，但你可以浮动它，
并让这个页脚在你喜欢的地方运行。 （或者你可以丢失页脚的
，但我不认为你想要那个。）
对不起，这是我能做的最好的做。在我看来你必须给出一些东西
up - 并且在无格式HTML中嵌套辅助列表似乎是最容易放弃的东西。
当然希望有一个定位的可能性，无论如何都要在所有内容的底部放置一个页脚，但我希望有很多东西。
First, here is a page to help you figure out what I''m talking about:
http://relinquiere.free.fr/test.html
As you can see in the source of this page, the structure is the following :
- a banner
- a skip-to-navigation-links div
- a main div with :
- a div with content
- navigation links in a single ul
- a footer
The navigation bar is made of three levels of options, but is kind of
dissociated in the stylesheet: the first level should appear on top of
the page, and the next two levels should appear on the left of the page,
next to the content (on the right).
This works pretty well *if* the content is longer than the side bar, but
if this fails, the footer and the side bar overlap (as in the example).
Can anyone think of a way to fix this, or should I give up and split my
single navigation bar into two lists ?
Thanks.
On Fri, 16 Jan 2004 16:05:08 +0000, Vincent <vincent.@wanadoo.fr> wrote:
First, here is a page to help you figure out what I''m talking about:
http://relinquiere.free.fr/test.html
As you can see in the source of this page, the structure is the
following :
- a banner
- a skip-to-navigation-links div
- a main div with :
- a div with content
- navigation links in a single ul
- a footer
The navigation bar is made of three levels of options, but is kind of
dissociated in the stylesheet: the first level should appear on top of
the page, and the next two levels should appear on the left of the page,
next to the content (on the right).
Here''s what you could do.
<body>
<div id="header">
Header Stuff
</div>
<div id="main">
Everything that goes in the big box.
</div>
<div id="nav">
The left nav bar info
</div>
<div id="footer">
The footer stuff
</div>
</body>
#header - no set positioning, just default static.
#main - float:right;
#nav - float:left; (could also float: right; if you prefered, with margins
set properly)
#footer - clear: both;
Use percentages for widths on the two columns. Add margins etc. to the
divs to space them as you''d like.
Neal wrote:On Fri, 16 Jan 2004 16:05:08 +0000, Vincent <vincent.@wanadoo.fr> wrote:
Here''s what you could do.
<body>
<div id="header">
Header Stuff
</div>
<div id="main">
Everything that goes in the big box.
</div>
<div id="nav">
The left nav bar info
</div>
<div id="footer">
The footer stuff
</div>
</body>
#header - no set positioning, just default static.
#main - float:right;
#nav - float:left; (could also float: right; if you prefered, with
margins set properly)
#footer - clear: both;
Use percentages for widths on the two columns. Add margins etc. to the
divs to space them as you''d like.
Thanks, but this is not quite what I want. Maybe I wasn''t clear in my
explanations, that''s why I joined an example at
http://relinquiere.free.fr/test.html.
The navigation bar is basically a list:
<ul>
<li>A<ul1/></li>
<li>B<ul2/></li>
<li>C<ul3/></li>
</ul>
I''d like to display A, B, C in a horizontal menu, on top of the page
(below the banner) and the corresponding sublist as a secondary vertical
menu on the left, i.e. if the user selected option A, he retrieves a
page P1 from the server and ul1 should appear as a secondary menu, if he
selects B, he gets P2 and ul2 is displayed, and so on.
I know this may sound weird, but the idea behind that is that, according
to the stylesheet, I could display my navigation list as two dissociated
menus as described above or as a single multi-level menu. I think that
would be great, but maybe this is just impossible, because of this
overlapping problem I have with the footer.
On Sun, 18 Jan 2004 11:49:07 +0000, Vincent <vincent.@wanadoo.fr> wrote:
I''d like to display A, B, C in a horizontal menu, on top of the page
(below the banner) and the corresponding sublist as a secondary vertical
menu on the left, i.e. if the user selected option A, he retrieves a
page P1 from the server and ul1 should appear as a secondary menu, if he
selects B, he gets P2 and ul2 is displayed, and so on.
Right. I think you want it so if the user chooses Menu 1 from your top bar
(#mainbar), the sidebar (#scndbar) should show the corresponding submenu
structure for that menu item. At the same time, you want the unstyled page
to show the whole structure.
What you''re trying to do is pull a section out to float at a different
location than it is at, which is the problem. If you want the footer to be
clear of the #scndbar *and* the content div (where one might be taller or
shorter than the other, depending on content), you''re going to have to
float #scndbar. Since the height is content-dependent, and you can''t float
something in a place it isn''t in the code, you''re stuck.
Next best thing is extracting the primary list and setting it first, then
use the secondary etc. list for the left bar and put it next, after the
list. It will be disassociated in the unstyled page but you can float it,
and have that footer work out where you like it. (Alternately you can lose
the footer, but I don''t think you want that.)
Sorry, it''s the best I can do. Looks to me like you have to give something
up - and the nesting of the secondary list in the unstyled HTML seems to
be what''s easiest to give up on.
Sure wish there was a positioning possibility to put a footer at the
bottom of all content regardless, but I wish for many things.
这篇关于分离导航栏和绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
