Difference between revisions of "Category:Techniques/fixedPositionLayout"

From Level Access Web Labs
Jump to navigation Jump to search
Line 3: Line 3:
 
     <style>
 
     <style>
 
   
 
   
       #header { text-align:center; color:#fff; background-color:#000; padding:40px; position:fixed; top:107px; width:100%; height:100px; width:80%; }   
+
       #fixedHeader { text-align:center; color:#fff; background-color:#000; padding:40px; position:fixed; top:107px; width:100%; height:100px; width:80%; }   
       #content { height:500px; width:100%; overflow:scroll; position:fixed; top:287px; left:10%; background-color:yellow; text-align:center; height:500px; width:80%; }  
+
       #fixedContent { height:500px; width:100%; overflow:scroll; position:fixed; top:287px; left:10%; background-color:yellow; text-align:center; height:500px; width:80%; }  
 
     </style>
 
     </style>
 
   </head>
 
   </head>
  
 
   <body>
 
   <body>
         <div id="header"> <p>Header content and links go here</p> <p>Tab through all the links to see the links on top to appear to flow under the header</p> </div>
+
         <div id="fixedHeader"> <p>Header content and links go here</p> <p>Tab through all the links to see the links on top to appear to flow under the header</p> </div>
  
         <div id="content">
+
         <div id="fixedContent">
 
           <div><a href="#">link 1</a></div>
 
           <div><a href="#">link 1</a></div>
 
           <div><a href="#">link 2</a></div>
 
           <div><a href="#">link 2</a></div>

Revision as of 16:52, 22 May 2018

Header content and links go here

Tab through all the links to see the links on top to appear to flow under the header

This category currently contains no pages or media.