I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
Related
This code appears in a siteorigin layout builder in the header widget area. There are four elements, and #4 is a search box. When you type anything into the box, the suggested results appear under the content below.
I tried a z-index on the header, the widget, assigning a special class to the widget with a high z-index, and got nothing.
https://www.carmelchamber.org/
Any thoughts please, because I'm stuck.
Thank you!
Luke
This was a tough one to locate. Please, try adding to Custom CSS:
.panel-row-style,
.elementor-section {
-webkit-transform: none !important;
}
That's to override a rule in the parent stylesheet.
This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!
After a few days of hounding google for an answer, I am hoping some genius out there is able to help me on this tricky problem im having.
Overall what I am trying to achieve is a 1 page website with a very large bg image that uses jquery to scroll between each div ( which is effectively the same as a 'page', set to 100% height ).
My problem is..
I have a body background image, that is approx 5000px height.
I have 3 divs that I want each to be 100% height of the browser window.
Thus when scrolling from div to div the body bg is underneath.
I cannot set the BODY to 100% height as that will simply 'cut off' my bg image to the browser height.
I need to keep my bg image in its full length.
Is there any possible way to achieve this?? I read somewhere you can set an ID to your BODY element however Im not sure that would be effective for what im trying to achieve?
I know some one out there has an answer :)
Mush appreciated
I have seen you example code now, and I think i found the problem.
You forgot to make the html tag 100% in height, this results in your problem. Try to do like this:
html, body { height: 100%; }
I made a jsFiddle demostation here: http://jsfiddle.net/Allan/Vx9dC/
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!
Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.