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. 16  3461 
On Fri, 16 Jan 2004 16:05:08 +0000, Vincent <vincent.@wanad oo.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.@wanad oo.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.@wanad oo.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.
First: neat idea! I like your approach, dissasociating style from
content in this strict manner.
Second: tricky problem!
My idea is surely not perfect, but I can not think of a better:
Try it the other way round: put the whole navigation bar on the left
side (floating, not absolutely positioned) an just position the first
level of list-items abolutely to the position at the top of the page.
Now the navigation-ul should prevent the footer from overlaying the menu
and the first level is in the desired position.
I have not got the time to check it out, but the remaining problem
should be to put the sub-levels of the first-level-li back into the
top-ul to prevent it from beein smaller than its content. So you may
have to position the links inside the first-level list-items instead of
the list-items themselves absolutely.
I hope this helped more than it confused!
ICHwesen
Neal wrote: On Sun, 18 Jan 2004 11:49:07 +0000, Vincent <vincent.@wanad oo.fr> wrote:
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.
This is it, exactly.
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.)
You mean, I could have two different lists, one for the main bar, and
one for the secondary bar, right ? Yes, I thought of that too, but it's
what I'd like to avoid: I wish I could keep all the navigation stuff
bundled together. Well, if possible...
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.
Thanks anyway !
ICHwesen wrote: First: neat idea! I like your approach, dissasociating style from
content in this strict manner.
Thanks ! I like the idea too :-) but as you can see, it has some severe
drawbacks !
Second: tricky problem!
You bet !
My idea is surely not perfect, but I can not think of a better:
Try it the other way round: put the whole navigation bar on the left
side (floating, not absolutely positioned) an just position the first
level of list-items abolutely to the position at the top of the page.
Now the navigation-ul should prevent the footer from overlaying the menu
and the first level is in the desired position.
I have not got the time to check it out, but the remaining problem
should be to put the sub-levels of the first-level-li back into the
top-ul to prevent it from beein smaller than its content. So you may
have to position the links inside the first-level list-items instead of
the list-items themselves absolutely.
I'm not sure I understood you. Let's take an example, if you don't mind.
Here is a two-level list (this is enough for our discussion):
<ul id="mainbar">
<li>A
<ul id="second1"><l i>A1</li><li>A2</li><li>A3</li></ul>
</li>
<li>B
<ul id="second2"><l i>B1</li><li>B2</li><li>B3</li></ul>
</li>
</ul>
The goal is to have options A, B horizontally displayed on top of the
page, while either list #second1 or #second2 is vertically shown at left
of the page, depending on the user having chosen option A or B.
If I'm right, you suggested me to float #mainbar on the left, then to
absolutely position the li A and B at the top of the page, and finally
to restore #second1 or #second2 back on the left, inside #mainbar.
Wow ! This *is* tricky ! Then I need even more of your help to achieve
that...
In article Vincent wrote: First, here is a page to help you figure out what I'm talking about:
http://relinquiere.free.fr/test.html
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).
Quite a nice idea.
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).
I don't think there is any way to deal with this whitout extra markup and
fixed measure for height of menu. At least I can't find way. You can put
extra div to .content, and float it left, and make it height same as your
menu.
Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/
Biggest problem is that it requires height of menu to be known.
should I give up and split my single navigation bar into two lists ?
Rather make your footer narrower. I'm not big fan of over long navigation
menus, but this seems good way to do one.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
Lauri Raittila wrote: I don't think there is any way to deal with this whitout extra markup and
fixed measure for height of menu. At least I can't find way. You can put
extra div to .content, and float it left, and make it height same as your
menu.
Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/
Works fine in Mozilla Firebird 0.7.
IE 6.0 messes it up thanks to its insistence on large default line
spacing between list items. It requires a height of 34em on the floated
div, rather than 23em.
Biggest problem is that it requires height of menu to be known.
I assume styling the list fully will at least avoid the IE problem, so
that there doesn't remain any browser specific problems, only the menu
height knowledge one?
How does one reduce the spacing in IE on list items? line-height will do
it, but only with silly small values which don't work in other browsers.
Margin & padding don't seem to be the problem. Furthermore, adding a
border to see what's going on really confuses things, as the added
spacing then vanishes :/
--
Michael
m r o z a t u k g a t e w a y d o t n e t
In article Michael Rozdoba wrote: Lauri Raittila wrote:
I don't think there is any way to deal with this whitout extra markup and
fixed measure for height of menu. At least I can't find way. You can put
extra div to .content, and float it left, and make it height same as your
menu.
Example (that is not tested on IE, propably needs some tweaking):
http://www.student.oulu.fi/~laurirai/www/css/splitmenu/
Works fine in Mozilla Firebird 0.7.
IE 6.0 messes it up ... It requires a height of 34em on the floated
div, rather than 23em.
Was that only problem? Then it was surprisingly easy ;-)
Biggest problem is that it requires height of menu to be known.
I assume styling the list fully will at least avoid the IE problem, so
that there doesn't remain any browser specific problems, only the menu
height knowledge one?
I think so.
How does one reduce the spacing in IE on list items? line-height will do
it, but only with silly small values which don't work in other browsers.
I looked, and it was this good old white space bug. It works now in
IE5.5, not pixel perfectly, but that could be fixed using Tantek hack. I
wouldn't bother though, as it doesn't break. (after I changed it a
bit...)
Margin & padding don't seem to be the problem. Furthermore, adding a
border to see what's going on really confuses things, as the added
spacing then vanishes :/
Try background color or outline instead border next time, they work even
when border changes relations.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: Dave Patton |
last post by:
Using my About page as an example:
http://members.shaw.ca/davepatton/about.html
What is the best/proper way to markup a page such as
this that has "the main body" and "a navigation menu"?
It has been suggested before that I should have the
navigation menu at the end of the HTML, so that a
screen reader doesn't have to read it to get to
the content, with the possible exception of having
|
by: Marek Mand |
last post by:
How to create a functional *flexible* UL-menu list
<div>
<ul>
<li><a href=""></li>
<li><a href=""></li>
<li><a href=""></li>
</ul>
</div>
(working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
|
by: Josh Renaud |
last post by:
Hey everyone.
First the requisite links:
site: http://www.joshrenaud.com/bodies/index.html
css: http://www.joshrenaud.com/bodies/stylesheets/style.css
I have a UL that I'm using for a horizontal navigation bar on a website. It
looks decent in most browsers I've checked, except for IE5.
|
by: Michael Jaeger |
last post by:
Dear ciwah,
I'm in the process of designing a German school web site, and I need the
help of you experts.
I wrote the navigation (CSS based, no javascript), which looks OK in IE,
Firefox and Opera.
Now I would like to place a picture at the outer right side of the
navigation bar, and this is where it gets tricky. I experimented with a
div container, I tried using a layer, but the design always turned out
|
by: horusprim |
last post by:
Is there a CSS absolute positioning rendering bug in FF1.02 and IE 6?
I have been experimenting with precision absolute positioning in CSS.
The following test content was used in the experiment:
"This sentence is to be about nine words long. I hope this test suite
works. Mary had a little lamb and its fleece was white as snow."
Next a macro was used to divide the content into equal sentence
fragment spans of the 12 characters each...
| | |
by: nishac |
last post by:
Can anyone suggest me how to make my drop down menu work in IE7 too.Its working in other browsers.On mouse over the submenus should be displayed.Am attaching my css code hereby.Anyone please check and give a positive reply.
menu
HOme products support.....
| |
submenus
p1 A
p2 B..
p3...
/*================= STYLES FOR THE PRIMARY NAV...
|
by: Mark |
last post by:
hi, i'm trying to position something in the top right corner of a
container, but i can't seem to figure out how to get it working.
here's the html
<div class='thumb'><a href='image.jpg'><img src='photos/thumbs/
bigsmile.jpg'></a><a class='del' href='?p=gallery&del=2'>x</a></div>
where 'thumb' is my container, and 'del' should be aligned to the top
right. here's the css
|
by: slaterino |
last post by:
Hello,
I'm hoping someone can help me with a couple of queries. I am in the
process of designing a site which I have uploaded to:
http://www.cca-ltd.co.uk/New/index.html, but I currently have 2
problems.
Firstly, the navigation bar (Home, About Us, Training, etc.) looks
fine on a full screen browser but when I decrease the size of the
screen the tabs roll onto the next line. Is there anyway I can make
this navbar static?
|
by: tburger |
last post by:
Hey everyone-
This is my first post at The Scripts, but I've used the forums before for other programming issues. Hopefully, someone has some solid styling advice for me.
I've now been dealing with XHTML/CSS for about a week. I'm trying to set up a website for my dad, and this navigation menu is driving me nuts.
I designed this part of the site on Firefox 2.0.
Here's the link: http://www.yalestartups.com/tburger/test.html
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
| | |
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
