position: absolute; text-align :right;

[jens1701]

Hallo everybody,

i got this little styling problem with a nested ol. This is the markup:

<ol class = "nav_main">
<li><a href="./index.html">start</a></li>
<li><a href="./pages/work.html">work</a>
<ol class = "nav_secWork">
<li><a href="./pages/comm.html">comm</a></li>
<li><a href="./pages/portfolio.html">portfolio</a></li>
</ol>
</li>
<li><a href="./pages/studies.html">studies</a>
<ol class = "nav_secStudies">
<li...
and this the corrosponding part of the layout css:
.nav {
position: absolute;
left:225px;
}
.nav * * ol{
position:absolute;
text-align:right;
margin: -21px 0px 0px -215px;
padding: 20px 120px 0px 0px;
background: url("../images/edge.png") no-repeat 178px top;
}

I need to accomplish two things here first kick the secondary nav out of the normal displaying order, so the first level nav is not interrupted by the secondary nav(the sec nav is place elsewhere), and second i need to align the elements in the secondary nav to the right. To alter the markup is not an option.

In the way i tried it above i got the problem, that it seems not possible to align elements in a container positioned with absolute: text-align: right; in .nav * * ol does not work.

Anybody got a clue how to solve this?

Greets

Jens

[jens1701]

Well i read in an other post that it is not possible to align in a positioned box...
so i need an other way to put them to the rigth side...

The problem is i can't separate the two navigations in the markup, because i need the dependency for a visible / hidden css driven hover effect.

[ray326]

I guess I'm missing something. You have a .nav selector but no "nav" classes in the HTML.

[WebJoel]

.nav * * ol{ -I am not familiar with this designation... :confused:

[ray326]

According to selectoracle:

Selector 1: *.nav * * ol

Selects any ol element that is a descendant of any element that is a
descendant of any element that is a descendant of any element with a class
attribute that contains the word nav.

Hmm. That last phrase is intriguing.

[WebJoel]

Selects any ol element that is a descendant of any element that is a
descendant of any element that is a descendant of any element with a class
attribute that contains the word nav. Say huh?? :confused: I guess I'll just pick my battles and this is not one... :cool:

[Kravvitz]

It selects any <ol> that is a 3rd or more generation child of an element that belongs to the "nav" class. You guys didn't know that?

jens1701, it's not clear to me what you want to do exactly. Could you show us an image of what you're trying to achieve?

[ray326]

The oracle makes it sound like "nav" is taken to be ".*nav.*" though.

[Kravvitz]

".*nav.*" ??? Huh?

*chuckles* So I'm the oracle?

[ray326]

http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py

RE - /.*nav.*/ - anything containing "nav".

[Kravvitz]

Oh! a RegExp.

No. It's not that simple.

[jens1701]

Hi everybody, :)

thx for the input, and sorry about being a little bit slacky at the code snipplets. :o

So here is the solution:

hint: .nav_main is a child of .nav
<div class="nav">

...some stuff
<h2>Navigation</h2>
<ol class="nav_main">
<li class="li_start"><a href="./index.html">start</a></li>
<li class="li_work">
<a href="./pages/work.html">work</a>
<ol class="nav_secWork">
<li><a href="./pages/com.html">com</a></li>
<li><a href="./pages/portfolio.html">portfolio</a></li>
</ol>
</li>
some stuff...
</ol>
some more stuff...
</div>

Hint: i apply a normalization on all pre formatted tags!
/* NAV: MAIN ******************************************* */
.nav {
max-width: 270px; /* shorten the hover field after links */
}
.nav>ol>li { /* 1. level Navigation list-items*/
padding-bottom: 29px; /* line space */
margin-left: 165px; /* intend works together with .nav>ol[class]>li>a padding-left */
}
.nav>ol>li>a { /* 1. level Navigation links */
padding-left: 25px; /* enlarge the hover field to the left */
}
.nav li>ol { /* 2. Level Navigation ordered list */
background: url("../images/edge.png") no-repeat right top;
position: absolute;
text-align: right;
left: 0px; /* reset position */
min-width: 160px; /* horizontal positioning*/
padding-top: 20px; /* make space for the picture*/
padding-right: 25px; /* make space for the picture*/
margin-top: -8px; /* overlapping this hover field with the link ones*/
}
.nav li>ol li>a {
padding-left: 0px; /* reset padding for 2. Navigation Links*/
}

Greets :D

Jens