slitaz-base-files rev 268

/var/www/index.html, /var/www/style.css: change layout with fixed header and footer, and scrollable content.
author Aleksej Bobylev <al.bobylev@gmail.com>
date Tue Apr 28 17:46:27 2015 +0300 (2015-04-28)
parents efac6599349a
children 3395a6b92646
files rootfs/var/www/index.html rootfs/var/www/style.css
line diff
     1.1 --- a/rootfs/var/www/index.html	Wed Apr 22 11:55:25 2015 +0300
     1.2 +++ b/rootfs/var/www/index.html	Tue Apr 28 17:46:27 2015 +0300
     1.3 @@ -1,16 +1,15 @@
     1.4  <!DOCTYPE html>
     1.5 -<html xmlns="http://www.w3.org/1999/xhtml">
     1.6 +<html>
     1.7  <head>
     1.8 +	<meta charset="utf-8" />
     1.9  	<title>SliTaz Web Server</title>
    1.10 -	<meta charset="utf-8" />
    1.11  	<link rel="stylesheet" type="text/css" href="style.css" />
    1.12  </head>
    1.13  <body>
    1.14  
    1.15 -<!-- Header -->
    1.16 -<div id="header">
    1.17 +<header>
    1.18  	<h1>SliTaz Web Server</h1>
    1.19 -</div>
    1.20 +</header>
    1.21  
    1.22  <!-- Content -->
    1.23  <div id="content">
    1.24 @@ -33,10 +32,9 @@
    1.25  <!-- End content -->
    1.26  </div>
    1.27  
    1.28 -<!-- Footer -->
    1.29 -<div id="footer">
    1.30 -    Copyright &copy; 2014 <a href="http://www.slitaz.org/">SliTaz GNU/Linux</a>
    1.31 -</div>
    1.32 +<footer>
    1.33 +    Copyright &copy; 2015 <a href="http://www.slitaz.org/">SliTaz GNU/Linux</a>
    1.34 +</footer>
    1.35  
    1.36  </body>
    1.37  </html>

     2.1 --- a/rootfs/var/www/style.css	Wed Apr 22 11:55:25 2015 +0300
     2.2 +++ b/rootfs/var/www/style.css	Tue Apr 28 17:46:27 2015 +0300
     2.3 @@ -1,6 +1,6 @@
     2.4  /* CSS style for SliTaz Network (minimal version) */
     2.5  
     2.6 -html { min-height: 102%; }
     2.7 +/*html { min-height: 102%; }*/
     2.8  body { font: 88% sans-serif, vernada, arial; margin: 0; }
     2.9  h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; }
    2.10  h1 a { color: #fff; text-decoration: none; }
    2.11 @@ -15,13 +15,14 @@
    2.12  
    2.13  /* Header */
    2.14  
    2.15 -#header {
    2.16 +#header, header {
    2.17 +	position: absolute; left: 0; right: 0; top: 0;
    2.18  	background: #222;
    2.19  	height: 40px;
    2.20  	border-bottom: 4px solid #afafaf;
    2.21  }
    2.22  
    2.23 -#header h1 {
    2.24 +#header h1, header h1 {
    2.25  	margin: 0;
    2.26  	padding: 8px 0 0 4px;
    2.27  	width: 250px;
    2.28 @@ -34,7 +35,7 @@
    2.29  	font-style: italic;
    2.30  }
    2.31  
    2.32 -#header h1 a:hover { 
    2.33 +#header h1 a:hover, #header h1 a:hover { 
    2.34  	color: #afafaf;
    2.35  }
    2.36  
    2.37 @@ -92,7 +93,9 @@
    2.38  /* Content */
    2.39  
    2.40  #content {
    2.41 -	margin: 40px auto;
    2.42 +	position: absolute; left: 0; right: 0; top: 44px; bottom: 1rem;
    2.43 +	overflow-x: hidden; overflow-y: auto;
    2.44 +	margin-bottom: 1px;
    2.45  	padding: 0 20px;
    2.46  	text-align: justify;
    2.47  	max-width: 720px;
    2.48 @@ -128,11 +131,16 @@
    2.49  
    2.50  /* Footer */
    2.51  
    2.52 -#footer {
    2.53 +#footer, footer {
    2.54 +	position: absolute; left: 0; right: 0; bottom: 0;
    2.55 +	height: 1rem;
    2.56 +	background-color: #fff;
    2.57  	text-align: center;
    2.58 -	padding: 20px;
    2.59 +	display: table-cell;
    2.60  	border-top: 1px solid #ddd;
    2.61  	font-size: 90%;
    2.62  }
    2.63  
    2.64 -#footer a { padding: 0 2px; }
    2.65 +/*#footer a, footer a { padding: 0 2px; }*/
    2.66 +
    2.67 +html, body { width: 100%; height: 100%; margin: 0; padding: 0; }