Move Menu Bar to Bottom + Make Sticky / Angular UI Problem - html

On Angular UI one page app, there is an overhead menu, side bar menu, and I am trying to implement a bottom menu bar.
In the component itself I have it as position: sticky:
#import '../../../styles/variables';
.bottom-bar {
position: sticky;
background-color: white;
overflow: hidden;
height: 65px;
width: absolute;
}
.menu-button {
width: 100%;
height: 100%;
&__text {
font-family: $font-sarabun, 'sans-serif';
font-weight: 500;
font-size: 16px;
letter-spacing: 0.05em;
#media (max-width: 992px) {
display: none;
}
}
}
.mat-button,
.mat-icon-button,
.mat-stroked-button {
color: inherit;
background: 0 0;
border-radius: 0;
vertical-align: 0px;
}
.menu-button-import {
margin-top: 15px;
float: left;
margin-left: 20px;
background-color: #ffffff;
color: $color-menu-item;
font-weight: 500;
min-width: 100px;
font-size: 18px;
letter-spacing: 1px;
position: relative;
border: 1px solid grey;
border-radius: 5px;
&__text {
font-family: $font-sarabun, 'sans-serif';
font-weight: 500;
font-size: 16px;
letter-spacing: 0.05em;
#media (max-width: 992px) {
display: none;
}
}
}
.menu-button-save {
margin-top: 8px;
background-color: #ffffff;
color: $color-menu-item;
font-weight: 500;
min-width: 100px;
font-size: 18px;
letter-spacing: 1px;
position: relative;
border: 1px solid grey;
border-radius: 5px;
}
.menu-button-export {
margin-top: 15px;
margin-left: 10px;
margin-right: 20px;
background-color: #0693e3;
font-weight: 500;
min-width: 100px;
font-size: 18px;
letter-spacing: 1px;
position: relative;
border: 1px solid grey;
border-radius: 5px;
color: white;
&__icon {
color: white;
}
}
In the app html the bottom-bar component is also sticky:
.bottom-bar{
position: sticky;
top: 50px;
}
However, when I run the app I am having to scroll down to see the bottom bar. When I zoom out I notice that the bottom bar is not at the bottom of the page.
I am trying to make it so that the bottom bar stays fixed at the bottom of the page even when scrolling.
Hopefully I described the problem clearly enough. Please advise on how I can fix the problem. Thanks.

Related

HTML element set to visible but still invisible

I am currently working on a website and I have an element that I have explicitly declared: display: inline-block and visibility: visible however, the element is still invisible. This is only occurring on mobile devices. The invisible element is <div id="clock">.
#font-face {
font-family: 'bitwise';
src: url('bitwise.ttf');
font-display: swap;
}
* {
font-family: 'bitwise', monospace;
margin: 0;
padding: 0;
outline: 0;
}
:root {
background-color: #008080;
}
body,
html,
.wrapper {
width: 100%;
height: 100%;
}
span {
color: #FFFFFF;
font-size: 18pt;
text-align: center;
display: inline-block;
}
h1 {
color: #FFFFFF;
text-align: center;
display: inline-block;
}
input {
font-family: 'bitwise', monospace;
background-color: #535353;
color: #FFFFFF;
font-size: 18pt;
overflow: hidden;
text-align: center;
line-height: inherit;
height: inherit;
}
img:not(.noresize) {
width: 35%;
height: 35%;
}
video {
width: 35%;
height: 35%;
}
a:link {
color: #EFCF7C;
}
a:visited {
color: #105733;
}
button {
background-color: #105733;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#back {
background-color: #660000;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
}
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
.center {
display: flex;
flex-wrap: wrap;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
align-items: center;
justify-content: center;
}
#start {
float: left;
}
#clock {
float: right;
position: relative;
text-align: center;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
#icons {
padding-top: 8px;
}
#content {
padding-top: 10px;
}
.break {
flex-basis: 100%;
height: 0;
}
#content {
width: 675px;
height: 300px;
}
#media screen and (max-width: 1079px) {
html,
body {
overflow: hidden;
}
#clock {
float: right;
position: relative;
bottom: 100px;
text-align: center;
display: inline-block;
visibility: visible;
}
#clocktime {
font-family: 'Arial', serif;
font-size: 13px;
color: #000000;
position: relative;
bottom: 23px;
left: 17px;
}
}
<div id="taskbar">
<div id="start"><img class="noresize" src="/assets/start.png"></div>
<div id="clock"><img class="noresize" src="/assets/clock.png">
<div id="clocktime"></div>
</div>
</div>
<div id="icons"><img class="noresize" src="/assets/icons.png"></div>
<div class="center"><img class="noresize" src="/assets/ie.png"></div>
<div class="center" id="content">
Content here.
</div>
Screenshot 1 - What the page should look like. Note the clock in the lower-right corner.
Screenshot 2 - What the page actually looks like on mobile.
Screenshot 3 - Chrome DevTools showing the element as being in a visible spot, but still not being visible.
I see that that css is only appliable when max-width is equal to 1079px.
Try to increase that number in inspector element to see what happens.
So it turns out I had overflow: hidden set on #taskbar and this means that any children inside of the taskbar will not display, even if they are in a "visible" area. Adding bottom: 32px to set it inside of the taskbar worked.
Updated CSS:
#taskbar {
position: absolute;
overflow: hidden;
bottom: 0;
width: 100%;
height: 27px;
background-color: silver;
box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #ffffff;
}
<snip>
#media screen and (max-width: 1079px) {
#clock {
bottom: 32px;
}
}

Media Query Won't Override Original Style

I have a media query to change the look of a footer when the site goes mobile, but, for some reason, it doesn't seem to want to take the media query styles over the original base style. The specific CSS code is as follows
.footy {
background-repeat: no-repeat;
background-image: url('../Images/LandingBottomRightCorner_FullSpan.png');
background-position-x: right;
min-height: 338px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
}
.footytext {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
margin: 13px;
}
.footytextelement {
color: white;
font-size: 18pt;
font-family: Arial;
font-weight: bold;
}
.joinnow {
border: 3px solid white;
border-radius: 12px;
font-style: italic;
margin: 10px;
}
.footytext a:hover {
text-decoration: none;
}
#media (max-width: 1279px) {
/*FOOTER APPEARANCE MOBILE*/
.footy {
background-repeat: repeat-x;
background-image: url('../Images/MBLLandingFooterGradient_ForRepeat.png');
height: 338px;
position: relative;
width: 100%;
overflow: hidden;
}
.footytext {
position: center;
text-align: center;
margin: 13px;
}
.footytextelement {
color: white;
font-size: 16pt;
font-family: Arial;
font-weight: bold;
}
.joinnow {
border: 3px solid white;
border-radius: 12px;
font-style: italic;
margin: 10px;
}
.footytext a:hover {
text-decoration: none;
}
}
The HTML being manipulated is:
<div class="footy">
<div class="footytext">
<div class="footytextelement">Make a plan.</div>
<div class="footytextelement">Get medications.</div>
<div class="footytextelement">Quit.</div>
<div class="footytextelement joinnow">Join Now!</div>
</div>
</div>
.footy {
background-color:red;
background-position-x: right;
min-height: 338px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
}
.footytext {
position: absolute;
bottom: 0;
right: 0;
text-align: center;
margin: 13px;
}
.footytextelement {
color: white;
font-size: 18pt;
font-family: Arial;
font-weight: bold;
}
.joinnow {
border: 3px solid white;
border-radius: 12px;
font-style: italic;
margin: 10px;
}
.footytext a:hover {
text-decoration: none;
}
#media (max-width: 1279px) {
/*FOOTER APPEARANCE MOBILE*/
.footy {
background-color:green;
background-position-x: right;
background-position-y:bottom;
height: 338px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
overflow: hidden;
}
.footytext {
position: center;
bottom: 0;
right: 0;
text-align: center;
margin: 13px;
}
.footytextelement {
color: white;
font-size: 18pt;
font-family: Arial;
font-weight: bold;
}
.joinnow {
border: 3px solid white;
border-radius: 12px;
font-style: italic;
margin: 10px;
}
.footytext a:hover {
text-decoration: none;
}
}
<div class="footy">
<div class="footytext">
<div class="footytextelement">Make a plan.</div>
<div class="footytextelement">Get medications.</div>
<div class="footytextelement">Quit.</div>
</div>
</div>
Your max-width in media query should be 768px as standard.
You have given 1279px which means no matter whether you are in mobile device or desktop, media query css will apply everywhere.
With that media's condition you are saying: apply these styles above 1279px.
Use min-width and max-width to get more control.
example:
#media (max-width: 719px) {...}
#media (max-width: 1023px) {...}
More information: MDN LINK

HTML Body spaced?

My body on my site is smaller on all edges for some reason, i have no idea why, here is my site to preview what the spaces / edges are doing: csgodice.co.uk, here is my css code, if you need my html i will edit it and add the html but i think its the css:
CSS:
#font-face{
font-family: "coolvetica"; /* You can name the font whatever you like here */
src: url('fonts/coolvetica rg.ttf') format('truetype'); /* Font directory and format */
}
#header {
margin-right: 50px;
height: 6%;
width: 100%;
border-radius: 3px;
background-color: #FA5858;
}
#logo {
height: 60px;
width: 250px;
}
#steamLogon {
float: right;
margin-top: 0px;
}
#navbar {
float: right;
margin-top: 13px;
margin-right: 100px;
}
#navbar a {
margin-left: 50px;
height: 20px;
width: 70px;
display: align-block;
font-weight: 200;
font-size: 22px;
text-align: center;
text-decoration: none;
color: white;
font-family: coolvetica;
}
#navbar .dropdown {
margin-left: 50px;
height: 20px;
width: 70px;
display: align-block;
font-weight: 200;
font-size: 22px;
text-align: center;
text-decoration: none;
color: white;
font-family: coolvetica;
}
.logout {
font-family: coolvetica;
background-color: #e6e6e6;
font-weight: 300;
height: 25px;
width: 160px;
border: 2px solid #f2f2f2;
}
.logout:hover {
font-family: coolvetica;
font-weight: 300;
font-size: 14px;
color: #262626;
height: 25px;
width: 160px;
background-color: #FA5858;
border: 2px solid #f2f2f2;
}
.account {
font-family: coolvetica;
font-size: 14px;
color: #262626;
height: 20px;
margin: auto;
width: 153px;
background-color: #e6e6e6;
border: 2px solid #f2f2f2;
}
.account:hover {
font-family: coolvetica;
font-size: 14px;
color: #262626;
height: 20px;
width: 153px;
background-color: #FA5858;
border: 2px solid #f2f2f2;
}
/* Dropdown Button */
.dropdown-content {
display: none;
border-radius: 3px;
position: absolute;
height: 45px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown-toggle:hover .dropdown-content {
display: block;
}
#diceholder {
height: 50%;
width: 85%;
margin: auto;
margin-top: 100px;
background-color: #404040;
}
/* Account.php */
.trade-url {
display: align-block;
font-family: coolvetica;
font-size: 24px;
color: #1a1a1a;
margin-top: 50px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
I assume you mean that the body has a margin and you'd like to remove it - if so, try adding this CSS:
body {
margin: 0;
}

css parts are missing when loading from wwwroot

I published a working version of my site to my wwwroot folder, but when I open the website some of the design is missing.
I looked in devTools (sources) in chrome and noticed that there are parts of my css that are missing, when I open the css manualy from the wwwroot folder I see that the parts are actualy there.
What might cause a selective css load?
The missing part of my css file:
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
The whole css file as published to the wwwroot folder:
.menu_item {
color: #FFFFFF;
border-top: 4px solid #B6B5B5;
display: inline-block;
font-family: Arial;
font-variant: small-caps;
font-weight: normal;
padding: 5px 2px 0px 2px;
text-decoration: none;
/* font-weight: bold; */
letter-spacing: 2px;
margin: 5px;
}
#Top {
border-bottom: chocolate 8px solid;
/* margin-bottom: 3%; */
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
a {
text-decoration: none;
color: #5E5E5E;
}
#Logo {
color: #5E5E5E;
font-family: 'Reenie Beanie', cursive;
display: inline-block;
margin-right: 3vw;
background: url(http://www.elinorart.com/Gallery/latest%20artworks/slides/93.jpg) no-repeat, #5E5E5E;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 {
font-size: 70px;
margin: 5% 0;
}
h1:hover {
color: chocolate;
}
a:hover, a div:hover {
color: chocolate;
}
#menu_bar {
display: inline-block;
}
#contact_text {
width: 50%;
margin-left: auto;
margin-right: auto;
padding-bottom: 10px;
/* font-weight: 600; */
font-size: 16px;
/* font-family: -webkit-pictograph; */
color: #5E5E5E;
/* letter-spacing: 0px; */
}
#bottom_left p {
padding: 0px 49px 0 64px;
}
#bottom_center p {
padding: 0px 62px 0 30px;
}
#contact_details {
padding-bottom: 10px;
color: #5E5E5E;
font-size: 16px;
}
#pageFooter {
font-size: 0.8em;
color: #5E5E5E;
text-align: center;
font-family: Arial;
margin-top: 10%;
}
li {
line-height: 24px;
font-family: Arial;
color: #1C1C1C;
font-size: 16px;
list-style-type: none;
}
.exhibit_name {
color: black;
}
#page {
text-align: center;
background-color: rgb(232, 232, 232);
}
.page_content {
font-family: Arial;
/*text-align: initial;*/
/* background-color: rgb(232, 232, 232); */
/* padding-top: 3%; */
}
p {
font-size: 16px;
font-family: Arial;
}
#media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
body.about_me {
background-color: green;
}
.borderClass {
border-color: chocolate;
}
#contactDiv {
display: inline-block;
}
td {
vertical-align: top;
}
.contact_field {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
font-size: 16px;
font-family: Arial, cursive;
width: 322px;
height: 24px;
}
.contact_field_desc {
font-size: 14px;
padding: 4px;
font-family: Arial;
text-align: left;
}
.send_form {
border-bottom-width: 1px;
border: 1px solid #5E5E5E;
border-radius: 4px;
padding: 5px 28px;
}
body {
margin: auto;
}
#Facebook {
/* width: 100%; */
/* text-align: center; */
/* margin-left: 40%; */
/* margin-top: 3%; */
display: inline-flex;
margin-top: 2%;
}
#fb-root {
/*float: left;*/
vertical-align: central;
margin-right: 10px;
}
#fb-root2 {
/*float: right;*/
vertical-align: central;
margin-left: 10px;
}
.fb_iframe_widget {
/* margin-right: 13px; */
/* float: left; */
padding-right: 10%;
}
.exhibitions {
width: 40%;
margin: 0 5%;
float: left;
/*text-align: left;*/
}
.wrapper {
display: inline-block;
width: 45%;
text-align: left;
}
.exhibitions_wrapper {
padding-right: 3%;
}
ul {
padding: 0px;
}
ul li ul li {
list-style-type: initial;
padding-bottom: 10px;
}
.exhibitions_year {
/* margin-left: -5%; */
font-family: 'Reenie Beanie', cursive;
font-size: 37px;
/* line-height: 1px; */
margin: 14px 0;
color: orange;
color: chocolate;
font-weight: 500;
letter-spacing: 4px;
}
.bottom_sections {
width: 25%;
/* height: 100%; */
vertical-align: top;
text-align: left;
display: inline-block;
/* padding: 2%; */
}
.bottom_content {
/* padding: 0 10%; */
text-align: center;
}
.buttom_text {
font-size: 13px;
line-height: 25px;
padding: 0 10%;
text-align: left;
}
#AboutMe p {
font-size: 13px;
line-height: 25px;
}
.contact_info {
display: inline-block;
width: 19%;
vertical-align: top;
padding-left: 30px;
}
#exhibitions_wrapper {
width: 70%;
}
#AboutMe .wrapper {
border-right: 1px solid lightgray;
padding-right: 30px;
}
h3 {
padding-top: 3%;
margin: 12px 0;
font-variant: small-caps;
font-size: 37px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
h4 {
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
}
h5 {
margin-top: 30px;
/* padding: 15px; */
border-bottom: 1px solid black;
font-size: 24px;
color: dimgrey;
font-variant: small-caps;
font-weight: normal;
text-align: center;
}
h2 {
/* padding: 0; */
margin-top: 12px;
font-variant: small-caps;
font-size: 32px;
font-weight: normal;
color: dimgrey;
letter-spacing: 10px;
font-family: Arial;
}
#AboutMe .contact_field {
width: 187px;
}
input {
margin-bottom: 15px;
}
.gallery_homepage {
height: 550px;
position: absolute;
z-index: 2;
top: 0;
left: 0;
}
.gallery_homepage div {
height: 550px;
}
#layer {
background: url(http://s14.directupload.net/images/111129/44ga9qid.png);
height: 550px;
background-repeat: repeat;
position: absolute;
z-index: 3;
width: 100%;
top: 0;
left: 0;
}
#slide {
position: relative;
z-index: 1;
}
.menufixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99999;
border-bottom: chocolate 8px solid;
background-color: rgb(0, 0, 0);
box-shadow: 0 0 10px black;
}
Thanks!
There can be many reasons for it:
Your CSS rule might be overridden by inline style
It may be overridden by other preceding rule (in the later lines) in the same CSS file
You might be over ridding the css using ' !important' (this can be seen in dev tools)
You might have an error in your CSS file such as wrong syntax or missing ';' after rule or missing '{' or '}' at the beginning or end block of rules
Last but not least you might not be including the (correct) CSS file properly in the html
Hope this helps.
I just had a similiar problem: I updated a HTML and a CSS file and uploaded it to the server. When reloading in the browser, the updates in the HTML file showed but those in the CSS didn't. That was because of the way the browser (in my case Chrome) is caching. When opening in an Inkognito-Tab or deleting the cache it did work.

Overlapping Slider Image When Resizing Window

When resizing my window to check the responsiveness of a Wordpress site that I'm working on I noticed that when moving up to a larger window size, all of a sudden my slider in the header overlaps on top of the content below it. Once you resize the window to a smaller size it corrects itself. What's the deal?
Here's my code for the slider and the content below it:
#slideshow_cont { width: 646px; float: left; margin-right: 0px; margin-bottom: 10px; position: relative; }
#slideshow { width: 646px; min-height: 280px; }
.slide_box { display: none; position: absolute; top: 0; left: 0; }
.slide_box_first { display: block; width: 646px; height: 280px;}
.slide_box img { display: block; width: 646px; height: 280px; }
.slide_box iframe { display: block; width: 646px; height: 280px; }
.slide_box_title { padding: 8px 10px; font-size: 20px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; text-transform: uppercase; background-color: #fff; height: 23px; }
.slide_box_title a { color: #222; text-decoration: none; }
.slide_prev { position: absolute; top: 132px; left: 0; cursor: pointer; z-index: 30; }
.slide_next { position: absolute; top: 132px; right: 0; cursor: pointer; z-index: 30; }
.home_box { float: left; width: 313px; background-color: #fff; margin-bottom: 0px; margin-right: 0px; }
.home_box img,
.home_box iframe { width: 313px; height: 196px; }
.home_box_last { margin-right: 0; }
.home_box_cont { padding: 5px 5px; text-align: center; }
.home_box_cont h3 { font-size: 20px; margin: 0px 0 10px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; text-transform: uppercase; }
.home_box_cont h3 a { color: #222; text-decoration: none; }
.home_box_cont h3 a:hover { text-decoration: none; color: #f2664f; }
.home_box_text .home_box_cont { text-align: center; font-size: 18px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 300; background-color: transparent;}
.archive_title { background-color: #F5F5F5; padding: 10px 8px; margin-bottom: 20px; font-size: 16px; }