Horizontal Family tree with CSS and HTML - reversed -


i've searched web , foud example of family tree here in codepen:

i want same thing, rotated 180 degrees. want start family tree 16 members , descending (16-8-4-2-1) left right.

how can achieve using/editing code? stackoverflow says need accompany code link, i'm pasting html here.

html:

<div id="wrapper"><span class="label">root</span> <div class="branch lv1"> <div class="entry"><span class="label">entry-1</span>   <div class="branch lv2">     <div class="entry"><span class="label">entry-1-1</span>       <div class="branch lv3">         <div class="entry sole"><span class="label">entry-1-1-1</span></div>       </div>     </div>     <div class="entry"><span class="label">entry-1-2</span>       <div class="branch lv3">         <div class="entry sole"><span class="label">entry-1-2-1</span></div>       </div>     </div>     <div class="entry"><span class="label">entry-1-3</span>       <div class="branch lv3">         <div class="entry sole"><span class="label">entry-1-3-1</span></div>       </div>     </div>   </div> </div> <div class="entry"><span class="label">entry-2</span></div> <div class="entry"><span class="label">entry-3</span>   <div class="branch lv2">     <div class="entry"><span class="label">entry-3-1</span></div>     <div class="entry"><span class="label">entry-3-2</span></div>     <div class="entry"><span class="label">entry-3-3</span>       <div class="branch lv3">         <div class="entry"><span class="label">entry-3-3-1</span></div>         <div class="entry"><span class="label">entry-3-3-2</span>           <div class="branch lv4">             <div class="entry"><span class="label">entry-3-3-2-1</span></div>             <div class="entry"><span class="label">entry-3-3-2-2</span></div>           </div>         </div>         <div class="entry"><span class="label">entry-3-3-3</span></div>       </div>     </div>     <div class="entry"><span class="label">entry-3-4</span></div>   </div> </div> <div class="entry"><span class="label">entry-4</span></div> <div class="entry"><span class="label">entry-5</span></div> </div> </div>

i'm still working on fixing line curves got work adjusting css on codepen link posted. i'll update code/link improve it.

edit: got working! see link , attached code. : enter image description here http://codepen.io/anon/pen/ovqxgg

//------- {{ variables }} -------//  $white: #eee9dc; $bg: #2e6ba7;  $horizontal-gutter: 100px; $border-radius: 10px;  $entry-min-height: 60px;  $label-width: 150px; $label-height: 30px; $label-border-radius: 5px;   //------- {{ styles }} -------//  *, *:before, *:after {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; }  body {   min-width: 1200px;   margin: 0;   padding: 50px;   color: $white;   font: 16px verdana, sans-serif;   background: $bg;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; }  #wrapper {   position: relative; }  .branch {   position: relative;   margin-right: $horizontal-gutter + $label-width;   &:before {     content: "";     width: $horizontal-gutter / 2;     border-top: 2px solid $white;     position: absolute;     right: -$horizontal-gutter;     top: 50%;     margin-top: 1px;   } }  .entry {   position: relative;   min-height: $entry-min-height;   &:before {     content: "";     height: 100%;     border-right: 2px solid $white;     position: absolute;     right: -($horizontal-gutter / 2);   }   &:after {     content: "";     width: $horizontal-gutter / 2;     border-top: 2px solid $white;     position: absolute;     right: -($horizontal-gutter / 2);     top: 50%;     margin-top: 1px;   }   &:first-child {     &:before {       width: $border-radius;       height: 50%;       top: 50%;       margin-top: 2px;       border-radius: 0 $border-radius 0 0;     }     &:after {       height: $border-radius;       border-radius: 0 $border-radius 0 0;     }   }   &:last-child {     &:before {       width: $border-radius;       height: 50%;       border-radius: 0 0 $border-radius 0;     }     &:after {       height: $border-radius;       border-top: none;       border-bottom: 2px solid $white;       border-radius: 0 0 $border-radius 0;       margin-top: -$border-radius + 1px;     }   }   &.sole {     &:before {       display: none;     }     &:after {       width: $horizontal-gutter / 2;       height: 0;       margin-top: 1px;       border-radius: 0;     }   } }  .label {   display: block;   min-width: $label-width;   padding: 5px 10px;   line-height: $label-height - 5px * 2;   text-align: center;   border: 2px solid $white;   border-radius: $label-border-radius;   position: absolute;   right: 0;   top: 50%;   margin-top: -($label-height / 2); }

-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more