Lightbox with flexible width and tab top - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Width

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Width

Description

Lightbox with flexible width and tab top

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  ovokuro</title> 
  <style>

:root {<!-- www.  jav a 2  s  .  c  om-->
   --alternatetablecolor: #f9f9f9;
   --headerbackgroundcolor: #efefef;
   --headerfontcolor: #333;
   --bordercolor: #dddddd;
   --defaultfontcolor: #222;
}
.lightbox {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   text-align: center;
}
div#preferencesholder {
   background: #fff;
   display: inline-block;
   text-align: left;
   max-height: 75%;
   max-width: 90%;
   overflow: hidden;
   padding: 0px;
   border: 1px #000 solid;
   -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
   box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
   margin-top: 100px;
}
div#preferencescontent {
   overflow-y: scroll;
   max-height: 80%;
   margin: 10px;
   width: 100%;
}
div.sidemenu {
   background-color: var(--headerbackgroundcolor);
   width: 100%;
   text-align: center;
}
div.sidemenu div.menuitem {
   padding: 10px;
   font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
   display: inline-block;
   margin: 0px -2px 0px -2px;
}
div.sidemenu div.menuitem img {
   max-height: 30px;
   vertical-align: middle;
}
div.menuitem:hover {
   background-color: #d0d0d0;
   cursor: pointer;
}
div#helpcontent {
   max-width: 550px;
   margin: 0 auto;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="lightbox" id="preferencesdiv"> 
   <div id="preferencesholder"> 
    <div class="sidemenu"> 
     <div id="deviceoverviewbutton" class="menuitem">
       Device overview 
     </div> 
     <div id="irulesbutton" class="menuitem">
       Defined iRules 
     </div> 
     <div id="certificatebutton" class="menuitem">
       Certificates 
     </div> 
     <div id="logsbutton" class="menuitem">
       Logs 
     </div> 
     <div id="preferencesbutton" class="menuitem">
       Preferences 
     </div> 
     <div id="helpbutton" class="menuitem">
       Help 
     </div> 
    </div> 
    <div id="preferencescontent"> 
     <div id="helpcontent"> 
      <div id="helpcontent"> 
       <h2>Tips and tricks</h2> 
       <h3>Filtering for pool members being down</h3> 
       <p>this is a test this ai as dfa sd fa sd fa sd fa sd fa sd faasdf </p> 
       <p>asdf as df as df asd fa sdf a sdf asd fasd fasd fasdf a sdf asd f asd f</p> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials