I'm stuck with a footer.
I have this code - https://jsfiddle.net/annaolsh/pLzv5sg5/13/
#footer {
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: orange;
text-align: center;
}
On a small screen the navbar is displayed on the top and footer is on the bottom - that's correct.
But on big screens when navbar is displayed vertically on the left side, footer disappears. Can't figure out how to display the footer. It doesn't need to be sticky: user needs to scroll down and see it (same as on small screens). Footer's width should be 100% of screen size.
Thank you!
In given code snippet positioning is off. There is some work to be done with position of each element on your page. The only node having position set is left menu and it's fixed.
The easiest fix would be to play with following css:
#footer {
position: relative;
clear:both;
padding: 1rem;
background-color: orange;
text-align: center;
}
Remove left, bottom and right. Just add position relative and clear:both.
DEMO:
https://jsfiddle.net/pLzv5sg5/14/
Add footer code inside content wrapper i.e container-fluid
use following CSS code for footer:
#footer {
padding: 1rem;
background-color: orange;
text-align: center;
}
https://jsfiddle.net/rppmvgeo/
Related
My footer is having some odd issues when the screen resolution gets to a certain point - it responds and works with the screen size, but only the upper half of the footer has a background. I have bottom set to 0; and position set to absolute but it just isn't looking good. Any help would be appreciated.
Link to webpage (be sure to play with the responsiveness to see what I'm talking about): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html
HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html
CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css
The issue I am seeing is in the .left and .right classes. You have a transform: translateY(25%); attribute on them which is pushing them down past their natural positions. If you want your footer to sit at the bottom of the page and have the same look they do now change your CSS like so:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(128,128,128,.3);
text-align: center;
border-top: 1px solid #232526;
}
.left, .right {
display: inline-block;
list-style-type: none;
width: auto;
font-size: 100%;
vertical-align: top;
bottom: 0;
margin-bottom: 0;
padding-bottom: 10px;
}
.right li {
text-align: left;
}
Basically I just removed all of the translate properties from those divs removed the margin-bottom from the uls and adding some padding-bottom to them. With the max-height removed from the footer tag the padding gives some space from the bottom of the page and expands the footer background so it doesn't leave a gap at the bottom.
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
so I have the following problem: I want to add a sidebar with a lot of content to my webpage. So the sidebar (div) should be scrollable and should also hide upon click.
To the right of the sidebar is my content. The content should always be to the right of the sidebar and the sidebar should never overlay parts of the content.
Here's my css:
div.sidebar {
position: fixed;
float:left;
left:0rem;
top:0rem;
bottom:1.2rem;
width:21rem;
background-color:rgb(110, 110, 110);
z-index:999;
overflow-y:scroll;
}
div.content {
border-width: 0;
margin: 2em;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: transparent;
font-size: 180%;
line-height: 130%;
}
If the css is like that with position:fixed (or absolute) the sidebar is scrollable and the body does not scroll. But the sidebar hides parts of the content.
If I remove the "position:fixed" from the .sidebar the content aligns right of the sidebar but the sidebar is not scrollable anymore (now the whole page has a scrollbar).
Specifying overflow: hidden for the body of the page didn't help. Neither did removing any of the left, top, bottom, float etc. tags. What am I missing?
How can I achieve a sidebar that is scrollable but does not overlay the content. Thanks in advance for any help!
I think I found a solution for you:
Wrap contents of sidebar into second div and add some class attribute - .fixed in my example. Now, we make .fixed div fixed, .sidebar div will take the space, so .content won't be overlapped by .fixed. Remember to set the same width for .fixed and .content, so they take the same space . Now, set width: auto in .content div, so it take all the space and overflow: hidden.
Now, when .sidebar has display: none, fixed will be hidden, and .content will take all their space :D
CSS:
div.sidebar {
/* take space on the left */
float:left;
width:20%;
margin-bottom:100%;
background-color:rgb(0, 0, 0);
}
div.fixed {
/* display fixed menu */
position:fixed;
width:20%;
left:0rem;
top:0rem;
bottom:1.2rem;
z-index:999;
rgb(110, 110, 110)
overflow-y:scroll;
}
div.content {
width:auto; /* take all the space */
overflow:hidden; /* try using without it and see what happens ;) */
border-width: 0;
background-color: transparent;
font-size: 180%;
line-height: 130%;
}
Working example: http://jsfiddle.net/z8dqhrf2/2/
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.
I'm currently having a problem with a website's footer.
When working on it at 100% size (normal size) the footer is nicely aligned. However, when I resize it it goes totally out of alignment and sits to the left, it needs to stay centred.
Screen shot:
Relevant CSS:
/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
clear: left;
width: 100%;
vertical-align: top;
background-color: #252B76;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
/* padding: 5px;*/
}
#footerUpper ul {
padding: 0;
margin: 25px 0px;
list-style: none;
}
#footerUpper li {
display: inline;
padding: 0 52px;
font-size: 14px;
font-weight: bold;
}
#footerUpper li a {
text-decoration: none;
color: #FFFFFF;
}
/* Main part of the footer */
#footer {
float: left;
width: 100%;
color: #252B76;
background-color: #89B0F1;
padding: 5px;
}
/* Table within the footer */
#footerTable {
width: 980px;
margin-left: 150px;
}
Thanks.
Without seeing more of the code, or a working example of it it's difficult to get too much of an idea about what's going wrong.
But I think a solution might be to have a static width on the inner-content, so for example the content that is mis-aligning itself, which I think is your "footerTable" - apply "margin:0 auto" to it to centre align it, this is assuming it's parent is 100% width, which I believe it is. Also, remove any other margin rules that apply to it.
It's because you're floating the footer to the left, and then there's no container of the footer which is centrally aligned. You can either:
Remove float: left and instead do a margin-left: auto; and margin-right: auto;
Make a container for your footer (or preferably your entire layout if it's all to be centrally aligned) and align the container to the center using margin-left: auto; and margin-right: auto;
There are of course other ways to centrally align block elements, but these are the most effective and recommended.
Since you have no reason to be floating the footer (so you say):
Remove the following styles:
float: left;
width: 100%;
Then, to make sure the table is centered, add this style:
text-align:center;
And you should find the footer stretches to the page width, no matter what zoom.