Thanks for the effort in your coding, having additional options with vertical alignment could come in handy for some projects. I did notice that http://www.seankstewart.com/blueprint/blueprint/plugins/bp-vertical-alignment/index-uneven.html 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 -~----------~----~----~----~------~----~------~--~---
