Hi spills.... The overlapping is expected behavior. The lift class just moves divs up and down with no regard to other divs (at least in the unstyled demos I provided). I'm thinking this should remain this way for more flexibility. Additional classes can be added to fix it though.
Check out these demos: http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-style.html http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-style2.html The first link adds a height and a background to the header div, but heights can sometimes be limiting. So I created a second demo (index- style2.html) which adds position:relative and a z-index to the header div. I also added the .clearfix class to the header div in order to clear the three span-# inside the header div. Hope this helps in your next project :^) On Jun 9, 12:04 pm, spills <[email protected]> wrote: > Thanks for the effort in your coding, having additional options with > vertical alignment could come in handy for some projects. I did notice > thathttp://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a... > does not render correctly in FF 3.0.10 on Windows though it might be > your previous code. > > Thanks again for you hard work! > > On Jun 8, 2:02 pm, speedunk <[email protected]> wrote: > > > Hello fellow Blueprinters... > > > So I did some major testing this weekend and decided to completely > > abandon my original code. Luckily, however, I did develop a better way > > to handle vertical alignment and (more imprtantly) vertical div > > reordering. Check out the revised code here: > > > Live > > Demo:http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a... > > Github:http://github.com/seankstewart/BP-Vertical-Positioning/ > > > The new code is more robust and easier to implement in my opinion, but > > feel free to hack it up and tell me what you think. > > > Basically, the vertical alignment functions just like the push-# and > > pull-# classes... I call them drop-# and lift-# and they are set to > > drop/lift at 1.5em intervals (to keep inline with Blueprint's default > > vertical alignment). This should be easy to follow for those of you > > familiar with Blueprint's push and pull classes. > > > The vertical div reordering is a bit more tricky. Here's the basic > > HTML... > > > <body> > > <div class="container"> > > <div class="move-5 span-24"> > > <div class="content span-18">CONTENT DIV</div> > > <div class="sidebar span-6 last">SIDEBAR > > CONTENT</div> > > </div> > > > <!-- Divs that are out of flow and reordered accordingly. > > --> > > <div class="ap span-24"> > > <div class="move">Position:Absolute Div #1</div> > > <div class="move">Position:Absolute Div #2</div> > > <div class="move">Position:Absolute Div #3</div> > > <div class="move">Position:Absolute Div #4</div> > > <div class="move">Position:Absolute Div #5</div> > > </div> > > </div> > > </body> > > > There are three new classes here to be aware of: (1).ap, (2).move, and > > (3).move-#. > > > The .ap class (ap stands for absolutely positioned) acts as a wrapper > > div for the div(s) that will be reordered. > > > The .move class should be applied to the div(s) inside the parent .ap > > div and adds a height to each div. The default height is 21em. I know > > what you are thinking, "if each .move div needs a set height doesn't > > that put restrictions on my design?", but it's honestly the only way > > this could work. > > > The .move-# class should be applied to the div that will visually > > follow the reordered div(s) in the layout, but comes first in the > > code. The # in the .move-# class corresponds to the number of .move div > > (s) added inside the .ap div. For example, if you add three divs with > > the class .move, the .move-# should be .move-3. The .move-# class also > > is set at 21em intervals to match the default height set in the .move > > class. > > > These default values can (and properly should) change for your > > project. > > > You just need to understand one thing. The padding-top set in .move-# > > class should be equal to the height of all .move div(s) that are > > included inside the .ap div. For example, the default padding-top > > of .move-5 is 105em which equals the default height of 5 .move divs (5 > > multiplied by 21). > > > Hope this makes sense and can be used in your next project. My > > apologizes for the complete revamp, but it was necessary after doing > > cross browser testing. The new code works great in IE 6, 7, & 8, FF 2 > > & 3, Safari and Opera. > > > On Jun 8, 11:01 am, spills <[email protected]> wrote: > > > > Blueprint already can do SEO to some degree see link below to a > > > previous thread however, the vertical alignment is an interesting > > > thought. > > > >http://groups.google.com/group/blueprintcss/browse_thread/thread/5a59... > > > > On Jun 4, 9:48 am, speedunk <[email protected]> wrote: > > > > > Hi all... > > > > > I've been working on a set of styles for blueprint which would allow > > > > for vertical alignment of columns as well as some div reordering for > > > > SEO pruposes. It's in the beginning stages at this point, with no > > > > documentation, but I wanted to put it out there to get some feedback. > > > > Feel free to download the code. Place the folder in the plugins > > > > directory of Blueprint for testing. > > > > >http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-a... > > > > > Vertical-alignment (the vertical-# & drop-# classes) > > > > The important thing to know when implementing vertical alignment is to > > > > make sure the vertical-# class and the highest drop-# class are the > > > > same. For example, if you have drop-8 on one column and drop-12 on > > > > another column, the vertical-# class would be vertical-12. See the > > > > uneven column pages for a working example. > > > > > I've added 24 vertical and drop classes (at 1.5em intervals) to match > > > > the span-24 blueprint provides; however the list could go on forever. > > > > 1.5em was chosen to keep with the default line-height provided by > > > > blueprint. > > > > > Div Reordering (lift-# class) > > > > These examples also apply a div reordering that can be used for SEO > > > > purposes on some projects. For example, you may want to code your > > > > content first and header last so that search engines pick up on the > > > > content first. Notice in the source... the header div is the last div > > > > within the container div, but appears at the top of the page. This can > > > > be accomplished by applying lift-# class on the header div. This is > > > > not fully tested, but could come in handy for those SEO fanatics out > > > > there. > > > > > Check it out and let me know what you all think about this. Hope it > > > > can be useful to the Blueprint community. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Blueprint CSS" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/blueprintcss?hl=en -~----------~----~----~----~------~----~------~--~---
