html - How to vertically align (justify) multiple elements -

-

i not quite sure how want going try. want vertically align 3 different elements, 3 wrapped in individual divs. code:

.service_info {    margin-top: 45px;    clear: both;    background-color: #ffffff;    font-family: "source-sans-pro", sans-serif;  }  .title_text_serviceinfo {    margin-top: 85px;    margin-left: 60px;    padding-bottom: 20px;    color: #333132;    font-size: 24px;    font-family: "source-sans-pro", sans-serif;  }  .service_info_times {    margin-top: -110px;    margin-left: 200px;    font-size: 18px;    line-height: 175%;    border-left: 5px solid #0b496f;    padding-left: 20px;    color: #333132;  }  .service_info_events {    postion: fixed;    left: 300px;    top: 20px;    font-size: 18px;    line-height: 175%;    color: #333132;  }
<!--service information-->    <section class="service_info">    <h2 class="secondary_header"> when gather </h2>      <h3 class="title_text_serviceinfo"> sunday </h3>     <div class="service_info_times">      <ul>        <li>7:00am</li>        <li>8:30am</li>        <li>9:00am</li>        <li>10:15am</li>        <li>4:00pm</li>      </ul>    </div>      <div class="service_info_events">      <ul>        <li>men's prayer</li>        <li>fellowship time</li>        <li>sunday school</li>        <li>worship service</li>        <li>revolution student ministries</li>      </ul>    </div>      <h3 class="title_text_serviceinfo"> monday </h3>    <div class="service_info_times">      <ul>        <li>6:00pm</li>      </ul>    </div>      <div class="service_info_events">      <ul>        <li>precept bible study</li>      </ul>    </div>      <h3 class="title_text_serviceinfo"> tuesday </h3>    <div class="service_info_times">      <ul>        <li>9:15am</li>      </ul>    </div>      <div class="service_info_events">      <ul>        <li>p.e.a.r.l.s. (lady's ministry</li>      </ul>    </div>      <h3 class="title_text_serviceinfo"> wednesday </h3>    <div class="service_info_times">      <ul>        <li>7:00am</li>        <li>7:00pm</li>        <li>7:00pm</li>        <li>7:00pm</li>      </ul>    </div>      <div class="service_info_events">      <ul>        <li>stronger senior</li>        <li>clc</li>        <li>club 56</li>        <li>house of prayer</li>      </ul>    </div>  </section>

feel free me correct other errors...i started learning how code website.

here image of want final product be: (i have link since new site.)

fujifame.com/art260/

edit: @gcyrillus has codepen that's cleaner: http://codepen.io/gc-nomade/pen/raovxv

i managed hack code submission. hope helps out code needs rewritten. based on image have, should have 2 columns of divs. day of week should in first column div , events should in second. add css property foat:left; second column divs, , clear them using css property clear: if arent moving down next column. hope gives head start! here go.

.header{ clear:both; }  .service_info {    margin-top: 45px;      background-color: #ffffff;    font-family: "source-sans-pro", sans-serif;  }  .title_text_serviceinfo {    margin-top: 100px;    margin-left: 60px;    /*padding-bottom: 20px;*/    color: #333132;    font-size: 24px;    font-family: "source-sans-pro", sans-serif;    float:left;    clear:left;    width:140px;  }  .service_info_times {    margin-top: 20px;    /*margin-left: 200px;*/    font-size: 18px;    line-height: 175%;    border-left: 5px solid #0b496f;    padding-left: 20px;    color: #333132;    float:left;    clear:right;  }  .service_info_events {    font-size: 18px;    line-height: 175%;    color: #333132;    clear:right;  }    .secondmargin{ margin-top:40px; }  .thirdmargin{ margin-top:80px; }
<section class="service_info">    <div id = "header">      <h2 class="secondary_header"> when gather </h2>    </div>      <h3 class="title_text_serviceinfo"> sunday </h3>     <div class="service_info_times">      <ul>        <li>7:00am men's prayer</li>        <li>8:30am fellowship time</li>        <li>9:00am sunday school</li>        <li>10:15am worship service</li>        <li>4:00pm revolution student ministries</li>      </ul>    </div>          <h3 class="title_text_serviceinfo secondmargin"> monday </h3>    <div class="service_info_times">      <ul>        <li>6:00pm precept bible study</li>      </ul>    </div>      <h3 class="title_text_serviceinfo secondmargin"> tuesday </h3>    <div class="service_info_times">      <ul>        <li>9:15am p.e.a.r.l.s. (lady's ministry)</li>      </ul>    </div>      <h3 class="title_text_serviceinfo"> wednesday </h3>    <div class="service_info_times">      <ul>        <li>7:00am stronger senior</li>        <li>7:00pm clc</li>        <li>7:00pm club 56</li>        <li>7:00pm house of prayer</li>      </ul>    </div>  </section>


Comments

Post a Comment

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

-
i want check scene image against 2 train images. that, detect features , compute descriptors of both training images. before detecting, computing , matching scene image, delete matches of train1 , train2. because these matches won't facilitate matching of scene image train1 , train2. so, match train1 train2 , vector of matches trainidx , queryidx. how can delete these matches in keypoints-vector , descriptor matrix of train1 , train2? best regards, dwi i have done below: std::vector<cv::keypoint> keypoints[2]; cv::mat descriptor[2]; std::vector< cv::dmatch > matches; /* write code generate keypoints, descriptors , matches here... keypoint[0] -> train image 1 keypoints keypoint[1] -> train image 2 keypoints descriptor[0] -> train image 1 descriptors descriptor[1] -> train image 2 descriptors matches -> matched between train image 1 , 2 */ // logic keep unmatched keypoints , corresponding descriptor
Read more

java - Could not locate OpenAL library -

-
i writing game using slick2d library, uses lwjgl. lwjgl version 2.9.3. using netbeans 8. i tried adding sounds game, example music track on main menu. problem is, exception when run game, despite game still compiling , running except sound of course: sat mar 21 01:23:57 edt 2015 error:could not locate openal library. org.lwjgl.lwjglexception: not locate openal library. @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:156) @ org.lwjgl.openal.al.create(al.java:102) @ org.lwjgl.openal.al.create(al.java:206) @ org.newdawn.slick.openal.soundstore$1.run(soundstore.java:295) @ java.security.accesscontroller.doprivileged(native method) @ org.newdawn.slick.openal.soundstore.init(soundstore.java:292) @ org.newdawn.slick.music.<init>(music.java:156) @ org.newdawn.slick.music.<init>(music.java:75) @ view.mainmenu.init(mainmenu.java:58) i didn't include rest of error states error happens in game code. the
Read more

sorting - opencl Bitonic sort with 64 bits keys -

-
i used nvidia sdk bitonic sort , works great me. 32 bits (uint) need ulong keys. have typically 2^14 keys @ time , power of 2. searched on not find kernel designed ulong. i tried modified nvidia sdk bitonic sort using ulong keys not work. kernel not crash after de call clenqueuendrangekernel got error : cl_invalid_command_queue can tell me how modify bitonic sort or radixsort, or can sort ulong keys? i running nvidia quadro 4000 opencl 1.1 cuda 6.5.20 full_profile used original nvidia sdk bitonicsort.cl i used"ulong" keys , value input , ouput instead of "uint" thanks helping i made work-around suit need. used 30 bits of key , 18 high bits of value sorting. changed comparators (2 lines): '#define mask 0xffffc000 // suit need from this: if( (*keya > *keyb) == dir ) this: if(((*keya > *keyb)||((*keya == *keyb)&&((*vala & mask)> (*valb & mask)))) == dir ) it works fine. but, still, it's work-a
Read more