I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
Related
Long time learner, first time poster.
Here's my dev site: http://kcyc.webstuffdepot.com
I'm using a bit of jquery to add a class - 'sticky-header' - to the header of the site. Sticky-header makes the header scroll with the user. Here's my CSS:
.sticky-header {
z-index: 99999;
position: fixed;
width: 100%;
border-bottom: 1px solid #ccc;
min-height: 60px !important;
background: #fff;
}
I've used this setup many times with the same Genesis theme and it's been great. With this application, however, something weird is happening. As you scroll, the header flickers in and out, interacting with elements below it.
The part of the header that blinks in and out is always consistent, as though it is being interrupted by an unseen page element. I can't find any page element that is consistent throughout the site that would be causing this behavior.
I'm wondering if you fine fellows could point something out to me, or know some aspect of the CSS I'm trying to use that's causing confusion in the display.
You would have to set the width and position on your wrapper div as well because you are floating your aside and setting it at a width of 50%.
Since the wrapper div does not have a set width, the wrapper doesn't know what width to take (50% of what?). The wrapper div also needs to be relative to the header position to inherit the z-index. I used the below code and it fixed the problem.
.sticky-header .wrap {
padding: 10px 0px;
width: 100%;
position: relative;
}
I'm trying to get a simple page layout where the navbar sits vertically along the right side of the user's window, taking up no more than 20% of the available space. The remaining 80% of space to the left is used for content.
I want the entire page to be resizable, so no matter how big or small the browser window is (within reason), the content will resize to the user's screen. Everything works and resizes great, but there's one problem with the navBar. Here's a CSS excerpt:
body{
background-color: #111111;
font-family: Roboto;
color: #cccccc;
font-weight: 300;
font-size: 14pt;
height: 100%;
}
#content{
width: 80%;
float: left;
}
#navBar{
width: 20%;
height: 100%;
background-color: #00C9FF;
float: left;
position: absolute;
}
#welcome{
background-color: #222222;
text-align: center;
margin: 1%;
}
The Problem:
If I leave the code above as is, the navBar renders on the right side of the screen, as it should, but it is not 100% the height of the browser window. Note it still resizes when the browser window's WIDTH is changed.
If I set navBar's position to absolute (position: absolute) the navbar renders exactly how it should render, except it floats to the left side of the browser, basically making it on the complete opposite side of where it should be.
Demo: http://codepen.io/anon/pen/YPyvzO (remove position: absolute to see where the navBar SHOULD render)
I have tried several different things including setting "HTML" in CSS to height: 100% and several different position properties for navbar, all to no avail. I'd like for this to be done only in CSS, but I'm not sure if it's possible.
Add the following:
position: absolute;
right: 0;
to #navBar. One thing that took me a long time to understand is that position: absolute overrides everything, even floats.
when you resize the browser the width and height change, so for this purpose you have to use media query in CSS and in this you have to tell the browser that in this width the navbar should be in given width. and another option is that you can use bootstrap, in bootstrap you not write too much css. and all the work become easy.
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
Working with a Wordpress theme, and needed to have the blue blur background stay with the slider when the browser window is re-sized. I have achieved that goal, but I have noticed that when you narrow the browser, everything does not stay centered there is a large space on the left. What would be the best way to remedy this?
http://www.stringcreative.ca/wp/
The sites a bit of a mess, you need to have the wrappers with the image, then the containers the same size centered
#wrapper {
background: #000b1a url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat fixed top center;
}
#header_container {
margin: 0 auto;
height: 117px;
width: 960px;
position: relative;
}
dont need a lot of the position's set to absolute, and margins at - to get it to fit.
also look into the 960 Grid System. i use it all the time, and saves me loads of time getting the site to fit. hope this helps
It's because your solution for centered the slider is inelegant, and relies on fixed widths and absolute positioning to make it look right.
To fix it, you need to change a few things.
Change #homebgw to:
#homebgw {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% -117px transparent;
height: 411px;
width: 100%;
}
Change #header to:
#header {
background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% 0;
height: 100px;
margin: 0 auto;
padding-bottom: 35px;
width: 1400px;
}
Quite simply, you don't need absolute positioning to solve the issues you posted above. If you're using absolute positioning and negative margins to correct center alignment issues, you're probably doing something wrong. Keep it simple, and Google how to achieve the results you desire. The net is full of helpful documentation to achieve these basic results without hacking up your code with fixes ;)
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}