In this example, we’ll do exactly the same thing as in the first example, but with block (<div>) elements. I’ll skip the interim steps, and just show you the results (and the CSS used to achieve them).
The shortcode we’re using looks like this:
[<i></i>[bmlt_simple(1339674838##-##switcher=GetSearchResults&services=1045<strong style="color: red;">&block_mode=1</strong>)]]
.
Garrison, NY, 10524, USA
A New Start
7:00 PM
Sunday
O,BT,IW,RF,WC,BK,WEB,TC,VM
Brewster, NY, 10509, USA
Step It Up
7:30 PM
Wednesday
C,Rr,WEB,TC,VM
Wappingers, NY, 12590
Miracles Happen
7:30 PM
Wednesday
O,St,RA
Yorktown Heights, NY, 10598, USA
Yorktown Recovery
7:30 PM
Thursday
C,IP,WC,BK
Brewster, NY, 10509, USA
Step It Up
7:30 PM
Friday
C,Rr,WEB,TC,VM
Pawling, NY, 12594
Practicing Principles In Pawling
11:00 AM
Saturday
SD,St,BK,WEB,HY
Katonah, NY, 10536
Just for Tonight
7:30 PM
Saturday
JT,SD,WEB,TC,VM
The CSS for this is a bit more involved than for the <table>-based display:
div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_province, div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_nation, div#bmlt_simple_shortcode_demo_div span.c_comdef_search_results_zip { display:none; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_format_div { text-align:right; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meetings_div div.bmlt_alt_0 { background-color:#efefef; } div#bmlt_simple_shortcode_demo_div div { font-family:"Papyrus"; font-size:small; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_div { display:table; width:100%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_div div { float:left; padding:0.5em; display:table; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div { width:10%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div { width:10%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_town_div { width:10%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_name_div { width:20%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_time_div { width:5%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_weekday_div { width:5%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_address_div { width:30%; } div#bmlt_simple_shortcode_demo_div div.bmlt_simple_meeting_one_meeting_format_div { width:10%; }
The
display:table;
rules tell the <div> elements to react to their content; not their context. That means they won’t let the content overflow, like regular <div> (
display:block;
) elements behave.
- HOME
- More About the BMLT
- Basic BMLT Philosophy
- Where to Get A BMLT
- Who’s Using the BMLT?
- Frequently Asked Questions (FAQ)
- Sample BMLT Searches
- The [bmlt_tabs] Shortcode (The Special Tab Plugin)
- The [[SIMPLE_SEARCH_LIST]] Shortcode
- The [[BMLT]] Shortcode
- The [[BMLT_MAP]] Shortcode
- The [[BMLT_SIMPLE]] Shortcode
- The [[BMLT_SIMPLE]] Shortcode Example 1
- The [[BMLT_SIMPLE]] Shortcode Example 2
- The [[BMLT_SIMPLE]] Shortcode Example 3
- The [[BMLT_SIMPLE]] Shortcode Example 4
- The [[BMLT_QUICKSEARCH]] Shortcode
- The [[BMLT_TABLE]] Shortcode