CSS Fixed Element Positioning and Link - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Fixed Position

Description

CSS Fixed Element Positioning and Link

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum d</title> 
  <style>
body {<!--from w  w  w  .  ja  va 2s .c  o m-->
   background-color:Chartreuse;
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center;
}

.main {
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   width:100%;
   height:100%;
   position:absolute;
   bottom:0;
   margin:0;
}

ul {
   list-style-type:none;
   position:fixed;
   bottom:0;
   margin:0;
   padding:0;
   background-color:yellow;
}

li {
   float:left;
}

li a,
.dropbtn {
   display:inline-block;
   color:blue;
   text-align:center;
   padding:15px 17px;
   text-decoration:none;
}

li a:hover,
.dropdown:hover .dropbtn {
   background-color:pink;
}

li.dropdown {
   display:inline-block;
}

ul li {
   position:relative;
}

.dropdown-content {
   display:none;
   position:absolute;
   bottom:31px;
   left:0;
   background-color:OrangeRed;
   min-width:161px;
   box-shadow:0px 9px 17px 0px grey;
}

.dropdown-content a {
   color:BlueViolet;
   padding:13px 17px;
   text-decoration:none;
   display:block;
   text-align:left;
}

.dropdown-content a:hover {
   background-color:Chartreuse;
}

.dropdown:hover .dropdown-content {
   display:block;
}

input#gobutton {
   position:relative;
   top:51%;
   left:51%;
   transform:translate(-51%, -51%) cursor: pointer;
   padding:6px 26px;
   background:yellow;
   border:2px solid blue;
   -moz-border-radius:11px;
   -webkit-border-radius:11px;
   border-radius:11px;
   -webkit-box-shadow:0 0 5px pink;
   -moz-box-shadow:0 0 5px OrangeRed;
   box-shadow:0 0 5px grey;
   color:BlueViolet;
   font-size:2.2em;
}

input#gobutton:hover,
input#gobutton:focus {
   background-color:Chartreuse;
   -webkit-box-shadow:0 0 2px yellow;
   -moz-box-shadow:0 0 2px blue;
   box-shadow:0 0 2px pink;
}

#LeftTable {
   position:absolute;
   width:26%;
   min-width:26%;
   left:51px;
   top:51px;
   bottom:51%;
   Right:100px;
   border:2px;
   color:OrangeRed;
   font-weight:bold;
   background-color:grey;
   opacity:0.6;
   filter:alpha(opacity=51);
   border:2px solid BlueViolet;
   padding:6px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="main"> 
   <table id="LeftTable"> 
    <tbody> 
     <tr> 
      <td width="20%"></td> 
      <td width="80%" id="test"> 
       <table> 
        <tbody> 
         <tr> 
          <td>Lore</td> 
         </tr> 
         <tr> 
          <td>Lore</td> 
         </tr> 
        </tbody> 
       </table> </td> 
     </tr> 
    </tbody> 
   </table> 
   <table class="gobutton" align="center"> 
    <tbody> 
     <tr> 
      <td> 
       <div class="b_left"></div> 
       <div class="b_middle"> 
        <input id="gobutton" type="submit" value="LISTEN"> 
        <a href="https://www.google.com"> </a> 
       </div> 
       <div class="b_right"></div> </td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

Related Tutorials