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 © 2014 <a href="http://www.slitaz.org/">SliTaz GNU/Linux</a> 1.31 -</div> 1.32 +<footer> 1.33 + Copyright © 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; }