User:Sevo/Sandbox1: Difference between revisions

Jump to navigation Jump to search
No edit summary
No edit summary
Line 2: Line 2:
<div>
<div>


     <!-- Top Row containing top border -->
     <!-- Top Row containing Top Elbow and Border -->
     <div style="position: relative;">
     <div style="position: relative;">


           <!-- Top Left Elbow -->
           <!-- Top Left Elbow -->
           <div style="width: 188px; height: 68px; ">[[Image:Sevo-LCARS_ElbowTopLeft_Blue.png]]</div>
           <div style="width: 188px; height: 68px; ">[[Image:Sevo-LCARS_ElbowTopLeft_Blue.png]]</div>
          <!-- Top Bar 1 -->
           <div style="position: absolute; top: 0px; left: 188px; width: 250px; height: 30px; background-color: #2350B5;"></div>
           <div style="position: absolute; top: 0px; left: 188px; width: 250px; height: 30px; background-color: #2350B5;"></div>


           <!-- Top Bar. Resizes with browser window. -->
           <!-- Top Bar 2. Resizes with browser window. -->
           <div style="position: absolute; top: 0px; left: 443px; right: 0px; height: 30px; background-color: #133D87; " ></div>
           <div style="position: absolute; top: 0px; left: 443px; right: 0px; height: 30px; background-color: #133D87; " ></div>
     </div>
     </div>
      
      
     <!-- Middle Row. Contains content. -->  
     <!-- Middle Row. Contains fluid Sidebar and Content. -->  
     <div>
     <div>


          <!-- CSS Table contains the actual sidebar and content divs. This allows the sidebar to resize according to Content's size and browser window. -->
           <div style="display: table;">
           <div style="display: table;">


          <div style="width: 150px; display: table-cell; background-color: #2350b5;">&nbsp;</div>
              <!-- Sidebar. Resizes height based on browser window and Content size. -->
          <div style="width: 38px; display: table-cell;">&nbsp;</div>
              <div style="width: 150px; display: table-cell; background-color: #2350b5;">&nbsp;</div>
 
              <!-- Margin div.  Creates 38px blank space between Sidebar and Content.  CSS Tables do not allow setting individual side padding or margins on a CSS Cell. Only for the entire CSS Table. -->
              <div style="width: 38px; display: table-cell;">&nbsp;</div>
 


  <!-- Content -->
      <!--  
          <div style="display: table-cell;">
              ================================ 
              Content  
              ================================
              -->
 
              <div style="display: table-cell;">
<p>Ayiana Yorval grew up in Najana City on Trill. It was a coastal city notable for its many pristine beaches, and the location of the famed Najana Library; one of the most extensive archives on the planet. As a child, her parents often took Ayiana and her sister Aleesia to the library and museum. It was these trips that first instilled a love of science in the young Trill. Ayiana spent many days playing or relaxing on the beach.</p>
<p>Ayiana Yorval grew up in Najana City on Trill. It was a coastal city notable for its many pristine beaches, and the location of the famed Najana Library; one of the most extensive archives on the planet. As a child, her parents often took Ayiana and her sister Aleesia to the library and museum. It was these trips that first instilled a love of science in the young Trill. Ayiana spent many days playing or relaxing on the beach.</p>


Line 30: Line 42:


<p>At the age of 23, she spent a few weeks being evaluated under a Joined field docent. She was given a good recommendation and was accepted for Joining. It took nearly a year find a suitable Symbiont to match her with. In the meantime, Ayiana continued her studies at Starfleet Academy. The symbiont Sevo shared a similar interest in the sciences - one of its previous hosts was a chemist. Upon the death of Sevo’s third host, it was transferred to Ayiana at the start of her final Academy year at the age of 24.</p>
<p>At the age of 23, she spent a few weeks being evaluated under a Joined field docent. She was given a good recommendation and was accepted for Joining. It took nearly a year find a suitable Symbiont to match her with. In the meantime, Ayiana continued her studies at Starfleet Academy. The symbiont Sevo shared a similar interest in the sciences - one of its previous hosts was a chemist. Upon the death of Sevo’s third host, it was transferred to Ayiana at the start of her final Academy year at the age of 24.</p>
</div>
              </div>
 
              <!-- Margin div.  Creates 38px blank space between Content and right side of page.  CSS Tables do not allow setting individual side padding or margins on a CSS Cell. Only for the entire CSS Table. -->
              <div style="width: 38px; display: table-cell;">&nbsp;</div>  


          <div style="width: 38px; display: table-cell;">&nbsp;</div>
           </div>
           </div>
            
            
     </div>
     </div>
      
      
     <!-- Bottom Row containing bottom border -->
     <!-- Bottom Row containing Bottom Elbow and Border -->
<div style="position: relative;">
    <div style="position: relative;">


           <!-- Bottom Left Elbow -->
           <!-- Bottom Left Elbow -->
           <div style="width: 188px; height: 68px; ">[[Image:Sevo-LCARS_ElbowBottomLeft_Blue.png]]</div>
           <div style="width: 188px; height: 68px; ">[[Image:Sevo-LCARS_ElbowBottomLeft_Blue.png]]</div>
    <div  style="position: absolute; top: 38px; left: 188px; width: 250px; height: 30px; background-color: #2350B5;"></div>


           <!-- Bottom Bar. Resizes with browser window. -->
           <!-- Bottom Bar 1 -->
    <div style="position: absolute; top: 38px; left: 443px; right: 0px; height: 30px; background-color: #133D87; " ></div>
          <div  style="position: absolute; top: 38px; left: 188px; width: 250px; height: 30px; background-color: #2350B5;"></div>
  </div>   
 
           
          <!-- Bottom Bar 2. Resizes with browser window. -->
          <div style="position: absolute; top: 38px; left: 443px; right: 0px; height: 30px; background-color: #133D87; " ></div>
    </div>   
   
<!-- End LCARS Container -->       
</div>
</div>