From fb11bdca1992e965f502409a0e3161b8690bcd92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mike=20Schw=C3=B6rer?= Date: Fri, 29 Dec 2017 01:14:15 +0100 Subject: [PATCH] fix footer --- www/data/css/styles.css | 101 +++++++++++++++++++------------- www/data/css/styles_footer.scss | 41 +++++++++++-- www/data/css/styles_global.scss | 9 --- www/data/css/styles_header.scss | 39 ++++++------ www/fragments/header.php | 2 +- www/pages/blog_list.php | 3 + www/pages/main.php | 2 + 7 files changed, 118 insertions(+), 79 deletions(-) diff --git a/www/data/css/styles.css b/www/data/css/styles.css index 905681f..4187799 100644 --- a/www/data/css/styles.css +++ b/www/data/css/styles.css @@ -1,13 +1,6 @@ -html, body { - height: 100%; - margin: 0; } - body { - margin: 0; background-color: #EEE; - color: #CCC; - display: flex; - flex-direction: column; } + color: #CCC; } #content { padding-top: 64px; @@ -15,7 +8,6 @@ body { justify-content: center; line-height: 1.4; } -/*############################################################################*/ .content-responsive { margin-left: auto; margin-right: auto; } @@ -60,26 +52,26 @@ body { display: block; width: 100%; } -.headerdiv { +#headerdiv { background-color: #333; display: flex; border-bottom: 1px solid #111; box-shadow: 0 0 8px #000000; position: fixed; width: 100%; } - .headerdiv .logowrapper { + #headerdiv .logowrapper { flex: initial; margin: 0; padding: 0; height: 42px; } - .headerdiv .logowrapper .logo { + #headerdiv .logowrapper .logo { height: 30px; - margin: 4px 0px 8px 6px; + margin: 4px 0 8px 6px; flex: initial; } - .headerdiv .tabrow { + #headerdiv .tabrow { display: flex; flex: auto; } - .headerdiv .tabrow .tab { + #headerdiv .tabrow .tab { display: flex; justify-content: center; align-items: center; @@ -94,48 +86,73 @@ body { min-width: 64px; text-align: center; flex: initial; } - .headerdiv .tabrow .tab:hover { + #headerdiv .tabrow .tab:hover { cursor: pointer; background-color: #555; } - .headerdiv .tabrow .tab_split { + #headerdiv .tabrow .tab_split { flex: auto; } - .headerdiv .tabrow .tab_github { + #headerdiv .tabrow .tab_github { background-color: #4078c0; border-left: 1px solid #111; border-right: 1px solid #111; color: black; } - .headerdiv .tabrow .tab_github:hover { + #headerdiv .tabrow .tab_github:hover { background-color: #c9510c; color: black; } @media (max-width: 850px) { - .headerdiv { - position: static; } - - .logowrapper { - display: flex; - align-items: center; - justify-content: center; } - - .headerdiv { + #headerdiv { + position: static; flex-direction: column; } - - .tabrow { - flex-direction: column; } - - .tab { - border: 1px solid #000; - font-weight: bold; - margin: 5px 10px; } + #headerdiv .logowrapper { + display: flex; + align-items: center; + justify-content: center; } + #headerdiv .tabrow { + flex-direction: column; } + #headerdiv .tabrow .tab { + border: 1px solid #000; + font-weight: bold; + margin: 5px 10px; } #content { - padding-top: 0px; } } -#footerdiv { - margin-top: auto; - padding-bottom: 10px; - background-color: transparent; - text-align: center; } + padding-top: 0; } } +html, body { + margin: 0; + padding: 0; + height: 100%; } +#mastercontainer { + min-height: 100%; + position: relative; } + +#content { + padding-bottom: 60px; + /* Height of the footer */ } + +#footerdiv { + position: absolute; + bottom: 0; + width: 100%; + height: 60px; + /* Height of the footer */ + text-align: center; + left: 0; + right: 0; + margin: 0 auto; } + +@media (max-width: 767px) { + #footerdiv { + width: auto; } } +@media (min-width: 768px) { + #footerdiv { + width: auto; } } +@media (min-width: 992px) { + #footerdiv { + width: 724px; } } +@media (min-width: 1200px) { + #footerdiv { + width: 1170px; } } #footerdiv hr { margin-bottom: 5px; display: block; diff --git a/www/data/css/styles_footer.scss b/www/data/css/styles_footer.scss index 70881e6..b76d6b6 100644 --- a/www/data/css/styles_footer.scss +++ b/www/data/css/styles_footer.scss @@ -1,13 +1,42 @@ @import 'styles_config'; -#footerdiv { - margin-top:auto; - padding-bottom: 10px; - - background-color: transparent; - text-align: center; +html, body { + margin:0; + padding:0; + height:100%; } +// https://stackoverflow.com/a/19723677/1761622 + +#mastercontainer { + min-height:100%; + position:relative; +} +#headerdiv { + //... +} +#content { + padding-bottom:60px; /* Height of the footer */ +} +#footerdiv { + position:absolute; + bottom:0; + width:100%; + height:60px; /* Height of the footer */ + text-align: center; + + left: 0; + right: 0; + margin: 0 auto; +} + +//---------------------------------------------- + +@media(max-width:767px) { #footerdiv { width: auto; } } +@media(min-width:768px) { #footerdiv { width: auto; } } +@media(min-width:992px) { #footerdiv { width: 724px; } } +@media(min-width:1200px){ #footerdiv { width: 1170px; } } + #footerdiv hr { margin-bottom: 5px; display:block; diff --git a/www/data/css/styles_global.scss b/www/data/css/styles_global.scss index c59462f..2acd8bb 100644 --- a/www/data/css/styles_global.scss +++ b/www/data/css/styles_global.scss @@ -1,15 +1,8 @@ @import 'styles_config'; -html, body{ height:100%; margin:0; } - body { - margin: 0; background-color: $COL_BACKGROUND; - color: $COL_TEXT_NORMAL; - - display:flex; - flex-direction:column; } #content { @@ -20,8 +13,6 @@ body { line-height: 1.4; } -/*############################################################################*/ - .content-responsive { margin-left: auto; margin-right: auto; diff --git a/www/data/css/styles_header.scss b/www/data/css/styles_header.scss index eb08107..99fe265 100644 --- a/www/data/css/styles_header.scss +++ b/www/data/css/styles_header.scss @@ -1,6 +1,6 @@ @import 'styles_config'; -.headerdiv { +#headerdiv { background-color: #333; display: flex; border-bottom: 1px solid #111; @@ -16,7 +16,7 @@ .logo { height: 30px; - margin: 4px 0px 8px 6px; + margin: 4px 0 8px 6px; flex: initial; } } @@ -71,33 +71,30 @@ @media (max-width: 850px) { - .headerdiv { + #headerdiv { position: static; - } - - .logowrapper { - display: flex; - align-items: center; - justify-content: center; - } - - .headerdiv { flex-direction: column; - } - .tabrow { - flex-direction: column; - } + .logowrapper { + display: flex; + align-items: center; + justify-content: center; + } - .tab { - border: 1px solid #000; - font-weight: bold; + .tabrow { + flex-direction: column; - margin: 5px 10px; + .tab { + border: 1px solid #000; + font-weight: bold; + + margin: 5px 10px; + } + } } #content { - padding-top: 0px; + padding-top: 0; } } diff --git a/www/fragments/header.php b/www/fragments/header.php index b918cde..8da32fe 100644 --- a/www/fragments/header.php +++ b/www/fragments/header.php @@ -1,4 +1,4 @@ -
+
diff --git a/www/pages/blog_list.php b/www/pages/blog_list.php index a2634b4..8bb0b45 100644 --- a/www/pages/blog_list.php +++ b/www/pages/blog_list.php @@ -16,6 +16,7 @@ $allposts = Blog::listAllOrderedDescending(); +
@@ -47,5 +48,7 @@ $allposts = Blog::listAllOrderedDescending();
+ +
\ No newline at end of file diff --git a/www/pages/main.php b/www/pages/main.php index 9344831..917d467 100644 --- a/www/pages/main.php +++ b/www/pages/main.php @@ -9,6 +9,7 @@ +
@@ -20,5 +21,6 @@ +
\ No newline at end of file