simple css layout

simple_css_layout.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>           
  <head>                 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">                 
    <title>simple css layout           
    </title>                 
    <!--- <link rel="stylesheet" type="text/css" href="size.css"> --->             
    <!--- <link rel="stylesheet" type="text/css" href="color.css"> ---> 
    <style type="text/css">
    /* CSS Document color.css 
     *
     * include into html between <head> and </head> 
     *  <link rel="stylesheet" type="text/css" href="color.css">     
     * 
     */
 
    body { background-color:#0d0; color:#08c; }
    #head { background-color:#d22; color:#08c; }
    #top { background-color:#aaa; color:#08c; }
    #middle { /* not used */ }
    #left { background-color:#d66; color:#08c; }
    #center { background-color:#ddd; color:#08c; }
    #center-top { background-color:#333; color:#eee; }
    #center-middle { /* use colors in #center */ }
    #center-bottom { background-color:#88f; color:#33d; }
    #right { background-color:#daa; color:#08c; }
    #bottom { background-color:#fdd; color:#08c; }
    #footer { background-color:#009; color:#08c; }
 
    /* color if selected */
    ::-moz-selection { background-color:#d00; color:#08c; } /* Firefox */
    ::selection { background-color:#d00; color:#08c; }  /* IE, Opera, etc. */
 
    /* CSS Document size.css
     *
     * include into html between <head> and </head> 
     *  <link rel="stylesheet" type="text/css" href="size.css">    
     *   
     */
 
    body    { border:0; margin:10; padding:0; height:65%; max-height:95%; overflow:auto;}
    #head   { position:relative; max-width:100%; height:50px;    overflow:auto; }
    #top    { position:relative; max-width:100%;                 overflow:auto; }
    #middle { position:relative; max-width:100%; min-height:100%; overflow:auto; }
 
    #left   { position:absolute; top:0px; bottom:0px; left:0px;   width:200px; overflow:auto; height:100%; max-height:100%;  }
    #right  { position:absolute; top:0px; bottom:0px; right:0px;  width:200px; overflow:auto; height:100%; max-height:100%;  }
    #center { position:absolute; top:0px; bottom:0px; left:200px; right:200px; overflow:auto; height:100%; max-height:100%;  }
 
    #center-top    { position:relative; top:0px;    width:100%; overflow:auto; }
    #center-middle { position:relative;             width:100%; overflow:auto; }
    #center-bottom { position:absolute; bottom:0px; width:100%; overflow:auto; }
 
    #bottom { position:relative; height:50px; bottom:0px; width:100%; overflow:auto; }
    #footer { position:relative;              bottom:0px; width:100%; overflow:auto; }
 
    </style>
 
  </head>           
  <body>                   
    <div id="head" class="normal">    head               
    </div>              
    <div id="top" class="normal">    top               
    </div>              
    <div id="middle" class="normal">                  
      <div id="left" class="normal">    left                   
      </div>                  
      <div id="center" class="normal">                
        <div id="center-top" class="normal">    center-top               
        </div>                               
        <div id="center-middle" class="normal">    center-middle               
        </div>                            
        <div id="center-bottom" class="normal">    center-bottom               
        </div>                            
      </div>                  
      <div id="right" class="normal">    right                   
      </div>              
    </div>              
    <div id="bottom" class="normal">    bottom      
    </div>               
    <div id="footer" class="normal">    footer             
    </div>           
  </body>
</html>

Tweets from pichat

Tweets from 600infos

simple css layout

Navigation

Search

Toolbox

Translate

Advertisment