Hi Seona,
Why not make the entire nav element (mainNav) positioned absolute? I'd
probably use a <div> to contain the parent <ul> (if you are not already
doing this). I'd start with something like:
.mainNav {
/* nav at top right of screen */
position: absolute;
top: 0px;
right: 0px;
}
The sub modules would then be rendered inside the parent nav. The sub
modules can also have a left margin to control indent:
.subMod {
margin-left: Xpx; /* or use Xem to scale with screen
resolutions/font sizes */
}
I hope this is the info you are after?
=] Rob
Seona Bellamy wrote:
Hi guys,
I'm in a bit of a bind here. I have a nested list that I have no
control over - it's coming out of the CMS with this hierarchy and I
can't change that. Here is an example of the unstyled list:
- Main Navigation
--- Page 1
--- Page 2
--- Page 3
--- Subscriber Modules
----- Module 1
----- Module 2
----- Module 3
----- Module 4
So as you can see, Subscriber Modules sits at the same level as the
pages and has its own sub-list of modules.
The trouble comes when I get asked to have the "two lists" (pages and
subscriber modules) displaying side-by-side. I've managed to give the
two "top level" <li>'s (Main Navigation and Subscriber Modules)
different classes, so I can treat them differently from standard list
items, but making them line up beside each other is proving problematic.
First I tried:
.mainNav {
float: left;
}
.subMod {
float: right;
}
The trouble with this is that the .subMod list is only moved off to
the right from where it was - it still sits below all the pages. The
only way to get it level with the top of the .mainNav list would be to
move it a set amount upwards, and since there can be a variable number
of pages that is just not practical.
So then I tried:
.mainNav {
position: relative;
}
.subMod {
position: absolute;
top: 0;
right: 0;
}
This works fine to get them lining up correctly, but since there are
more subscriber modules than pages the bottom of the list doesn't
appear in the correct place. So I went searching for information on
"clearing" absolutely positioned elements. I found this page
(http://www.shauninman.com/archive/2006/05/22/clearance_position_inline_absolute)
which looked promising, but it requires setting the position of the
tallest element to relative and in this case that is the one that
needs to be absolute.
Can anyone suggest a way that I can bring these two lists into the
format I've been requested to?
Cheers,
Seona.
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
--
*Rob Turner*
Company Leader
www. f l e x a d a t a .com <http://flexadata.com>
------------------------------------------------------------------------
*+1 415 448 7652*
*+61 7 3040 1337*
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
begin:vcard
fn:Rob Turner
n:Turner;Rob
org:Flexa Pty Ltd
email;internet:[email protected]
title:Company Leader
tel;work:+61 7 3040 1337
tel;cell:+61 4 0115 9060
x-mozilla-html:TRUE
url:http://flexadata.com
version:2.1
end:vcard
