User:Ccsmith/sandbox/wiki

Breadcrumb

SEO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae nulla quis urna ultricies malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum maximus ultrices. Aliquam libero mauris, venenatis et nisl quis, condimentum hendrerit ipsum. Cras imperdiet iaculis metus, sit amet porta dui ultricies id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent tortor leo, scelerisque dictum dolor sit amet, sodales suscipit leo. Nunc porttitor sapien feugiat ex sagittis, sed porta ante dignissim. Ut in enim dolor. Donec pretium, ligula vel malesuada rutrum, risus sapien pharetra ex, ac aliquam velit nisi at augue. Nam sit amet nibh a purus condimentum blandit at at tellus. Nam semper enim tortor, a ullamcorper nisl tempor sit amet. Nullam sagittis lobortis velit ac suscipit. Integer non lorem quis velit mollis lacinia. Nullam at pellentesque mi. Sed in consectetur nibh.

Morbi sit amet justo neque. Ut lacinia scelerisque augue eu varius. Curabitur hendrerit ac dui sed fermentum. Maecenas aliquet quam vitae sem varius elementum. Aliquam volutpat odio at turpis sodales eleifend. Suspendisse posuere metus nec placerat dignissim. Etiam sit amet felis metus. Pellentesque odio tellus, sollicitudin eu elementum eget, laoreet vitae lorem. Integer ultrices dignissim diam, vel tincidunt felis pharetra eget. Morbi sit amet euismod ipsum. Phasellus pulvinar ligula quis nunc interdum consequat. Aenean sed bibendum leo. Nam mauris dolor, vestibulum in accumsan ut, pharetra non ligula. Donec nec sodales diam. Integer viverra libero a consequat commodo.

Etiam justo enim, dapibus at lorem pellentesque, sodales fermentum nisi. Ut blandit nisl sed sagittis cursus. Cras euismod erat eros, in auctor sem blandit sed. Nam feugiat felis et augue gravida, nec lacinia sem pharetra. Pellentesque ac fringilla nulla, nec sollicitudin dolor. Fusce in pulvinar ante. Cras euismod sit amet enim vel venenatis. Pellentesque enim lorem, consectetur eu luctus nec, volutpat sit amet odio. Maecenas rutrum porta elit, non laoreet dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam pharetra ante ac ex consequat, ac egestas nisi vehicula. Vivamus pretium ut ante vitae sodales. Aenean a suscipit lorem.

Quisque velit nisi, pretium non auctor a, varius non dui. Vestibulum vel est eu massa ullamcorper dignissim in nec orci. Sed et magna augue. Donec quis augue mi. Praesent auctor tortor vel hendrerit aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed quam nulla, ornare a cursus non, pretium tempor libero. Cras suscipit sodales lectus nec eleifend. Nulla facilisi. Sed bibendum porta eros, eu dictum nibh ultrices eget.

Curabitur tortor ipsum, hendrerit eu semper et, aliquam sit amet lacus. In pretium nisl et mauris pellentesque tempus quis vitae augue. Suspendisse tempus sollicitudin tellus, et mollis mi placerat in. Curabitur faucibus placerat tristique. Aenean condimentum hendrerit mi quis luctus. In hac habitasse platea dictumst. Vivamus est nisl, gravida eu orci ut, faucibus hendrerit orci. Morbi nec placerat est. Aliquam quis felis tincidunt, luctus nulla vel, congue diam. Praesent nec ultricies sem. Nulla nunc enim, laoreet vel lectus in, mattis gravida risus. Aenean id felis non sapien viverra tincidunt vitae vitae nunc. Morbi non fermentum neque. Phasellus lorem dui, rhoncus nec enim non, rhoncus finibus purus. Sidebar



button


template:SearchRecords

SPANISH

Plantilla:Buscar registros

PORTUGUESE

Predefinição:Registros de pesquisa

ITALIAN

Madulo:Record ricerca

FRENCH

Modèle:Dossiers de recherche

GERMAN

Vorlage:Suche Datensätze

SWEDISH

Mall:Sökning register

Flexbox is basically a program for the layout of pages in the Wiki. It centers and spaces items on a page without percentages, positioning, or tables. Here are a few examples of its capabilities for formatting pages in the Wiki.

two items centered side by side of unequaled width
Here is an example of what would be a major problem in trying to position an image that is a fixed width (as is the case will all images in the Wiki) next to a flexible box of text. Then couple this with trying to place them side by side and center the both of them in the middle of the page. This would be a very difficult to accomplish with positioning or with tables, but is very easy with Flexbox.  Get Involved  Explore all the different ways you can help build the wiki through wiki projects and other local activities. Here is the coding:  Get Involved  Explore all the different ways you can help build the wiki through wiki projects and other local activities.



Creating columns of equal width
Here is all the counties of New Hampshire placed in three columns with no percentages of fixed widths required
 * Belknap
 * Carroll
 * Cheshire
 * Coös

Here is the coding:
 * Grafton
 * Hillsborough
 * Merrimack
 * Rockingham
 * Strafford
 * Sullivan
 * Belknap
 * Carroll
 * Cheshire
 * Coös


 * Grafton
 * Hillsborough
 * Merrimack
 * Rockingham
 * Strafford
 * Sullivan

space around
Main Page Research Help Wiki Help Get Involved Main Page Research Help Wiki Help Get Involved

display flex w/text-align:center
The links above almost line up, but are a little bit different. Space around is equal space between the items, but this arrangement is centered items inside equal wide boxes. Which is better looking is a judgment call.

space between
Main Page Research Help Wiki Help Get Involved

display flex w/flex:1 in each line
Main Page Research Help Wiki Help Get Involved

display flex w/flex:1 and justified-content:center
Main Page Research Help Wiki Help Get Involved

display flex w/text-align:center
Main Page Research Help Wiki Help Get Involved

Flexbox table w/cell widths equal
 Beginning Dates for Major County Records Birth* Marriage Death* Court Land Probate Census 1882 1882  1880  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo mollis turpis in aliquam. Vivamus semper nibh quis dui dapibus pellentesque. Vivamus ultrices enim vitae pretium lacinia. Quisque vestibulum euismod est, a congue velit placerat ut. Aenean blandit feugiat odio, nec sagittis tellus convallis non.

 Birth* Marriage Death* Court Land Probate Census

#|<< Previous Chapter Next Chapter >>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed elementum urna. Ut mollis, justo eget ornare finibus, lorem leo tempus orci, nec tincidunt est sem nec velit. Sed in ligula erat. Sed imperdiet leo vitae neque imperdiet, eu accumsan enim tempor. Nulla lacinia, ex sed placerat rutrum, ligula dui posuere massa, et consectetur dui est ultricies ipsum. Pellentesque turpis ipsum, ultrices et arcu eget, bibendum pretium ante. Etiam fringilla, risus faucibus fringilla ullamcorper, augue lectus cursus metus, nec efficitur ipsum neque ut lectus.

Try these out

 Exercises

Enter exercise questions here

Check your answers

 Quick Quiz

Enter quiz questions here

Check your answers

#|<< Previous Chapter Next Chapter >>

Get Involved in Wiki <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)"> <div style="flex:0; order:4; display:flex; align-items:center; justify-content:center; background: linear-gradient(lightgray, white); margin-left:-10px; min-width:200px; height:30px; border:1px solid black">Help:Wiki Help <div style="width:22px; height:22px; background:linear-gradient(-225deg, lightgray, white); border-bottom:2px solid black; border-left:2px solid black; transform:rotate(45deg)">

Main Page Research Help Wiki Help Get Involved

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED

<div style="width: 0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 20:06 Gardendale Alabama Family History Center ( diff | hist ).. (+87) .. Rickgwilliams ( talk | contribs | block )  ( Opening Hours and Charges for copying )  [ rollback 1 edit ] ( Tag Visual edit )

<div style="width:0; height: 0; border-top: 10px solid transparent; border-left: 10px solid black; border-bottom: 10px solid transparent; float:left; margin-right:10px"> m ! 19:20 Artical title (dif | hist) . . (+272)  . .  ccsmith (talk | contribs | block) (summary) [rollback 2 edits] ( Tag Visual edit)

MAIN PAGE RESEARCH HELP WIKI HELP GET INVOLVED