Home → Suggestions →

Better layout solution and/or additional HTML hooks for section listings

• Edit

Matthew Anderson

27 Feb, 2009 01:56 AM

If you have a ton of articles in one section and only a few in another, the layout starts to get messy. A .first or .last class on the LIs would allow me to clear them with some custom CSS. I'm open to any other solution that you guys think is appropriate though.

• Picture_3.png 334 KB

1. 1 Posted by Kyle Neath (Git... on 27 Feb, 2009 10:21 AM

   

   No harm in adding some extra classes. I've added a first-faq and last-faq to the <li> on each FAQ. Should show up next deploy (keep and eye on the changelog to see when it's deployed)

   • Edit

2. Kyle Neath (GitHub Staff) closed this discussion on 27 Feb, 2009 10:21 AM.

3. Matthew Anderson re-opened this discussion on 28 Feb, 2009 01:22 AM

4. 2 Posted by Matthew Anderso... on 28 Feb, 2009 01:22 AM

   

   Sorry, I should have been more specific. I want to clear every other category block, so I need that class on the parent of the one you placed it on. In the attached screenshot, I'd like Hub Customization to clear under Definitions

   ul.categories li.first-category { clear: left; }

   vs

   ul.categories ul.articles li.first-faq { clear: left; }

   • Edit

5. 3 Posted by Kyle Neath (Git... on 28 Feb, 2009 01:43 AM

   

   Hmm, well that's what's currently happening actually (notice "Using Widgets" alignment).
   

   There's a <div class="rule"></div> every two sections, so if you wanted to make that just a clearer on that page, you could add:

   .page-faqs_sections div.rule{ border:none; clear:both; }
   

   I don't think I'd like to add a class to the ul.categories since it wouldn't really be "first" or "last" since it repeats every 2 items.

   • Edit

6. 4 Posted by Matthew Anderso... on 04 Mar, 2009 04:58 AM

   

   Kyle,

   I don't want to be a pain, but I've only got one <div class="rule"></div> on that page and it won't help me with clearing the <li>s.

   I'm looking to clear every other <li> within <ul class="categories">

   Thanks for your continued help.

   • Edit

7. 5 Posted by Kyle Neath (Git... on 04 Mar, 2009 05:23 AM

   

   ah I see what you mean now, sorry for the confusion. Not sure what I was thinking earlier... in any case, there's some updates that'll come in the next deploy:

   • Added an 'even' and 'odd' class to each ul.categories li
   • Added a section-specific class to each ul.categories li

   So now you should get something like <li class="even section-setup_installation"> for the second category listed on our faqs page.

   • Edit

8. Kyle Neath (GitHub Staff) closed this discussion on 04 Mar, 2009 05:23 AM.