change display of secondary menu without changing HTML?
public
group: Zen Task Force
heather - Sun, 2008-07-20 15:15
is it possible to change the location of the search and secondary menu to "appear" on top of header... without changing the HTML?
i can't seem to manage it... this is what i'm trying to do:
| Attachment | Size |
|---|---|
| secondary-nav.jpg | 9 KB |
No
I don't think this is possible without HTML.
You'd need to absolutely
You'd need to absolutely position it. But in order to do that you'd need to be sure that its nearest positioned ancestor ('relative' or 'absolute') is #page. Since #navbar is a child element of #main (which needs position:relative) in order to put the sidebars in the right place (I believe), this is going to be tricky.
Another option is if you know the height of the #header, you could add a margin to the top of the #header which is the same height as the #secondary div and then absolutely position the #secondary using a negative top value. Something like this (totally untested and made up):
#header {
height: 6em;
margin-top: 2.5em;
}
#secondary {
height: 2.5em;
overflow: hidden;
position: absolute; /* this will position it relative to the #main element /
left: 0; / align the left edge with the left edge of #main /
top: -8.5em; / place the top edge 8.5 em (#header height + top/bottom margin) above #main */
}
Spend a bunch of time messing with this in Firebug to see what you can get. Firebug has a really cool feature where you can click on a numeric css attribute (like "6em") and you can hit the arrow up/down keys to increment/decrement it. I use this a lot for pixel perfect positioning.
You could use the same technique to float the #search div up there too.
negative!
ah ha!
i didn't think of a negative top margin... i did try both absolute (which couldn't get above the header) and position:fixed (where it doesn't scroll)... but i didn't think of a negative top margin...
i edited the html :)
but i'll give this a whirl!
Noooooo! Editing the HTML is
Noooooo! Editing the HTML is like pulling the stickers off the Rubik's Cube! :-)
(joking, of course... but there is always that puzzle-solving aspect to Zen theming)