I finally got a sticky footer to work with a push div. Unfortunately, I now have a strange block above my wrapper that has shown up. I would like to get rid of this of course.
Site in question:
http://print503.squarespace.com/gallery/
Basic HTML structure:
<body>
<div id = "wrapper">
[all content divs (dynamic/responsive)]
<div class = "push">
</div>
</div>
<div id = "footer">
</div>
</body>
Basic CSS Structure:
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#wrapper {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
z-index: 1;
}
.push {
opacity: 0;
height: 50px;
bottom: 0;
}
#footer {
background-color: #000;
height: 200px;
bottom: 0;
}
So I'm overriding the template for this squarespace site with my own HTML and CSS. I think the wrapper (named "#outerWrapper") is a background image. I don't know if this is what is causing the problem with the block at the top that now appears.
I've done hours of research and cannot figure out this issue. Would love some help. Thanks in advance.
Adding
#outerWrapper {
display: inline-block;
}
seems to fix it, if that's what you're going for (to get rid of the top black bar and have the background image show all the way to the top).
Related
I am trying to fix my footer to the bottom, despite where I am on the page. I tried
.home-footer{
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
}
but it only works if I take the footer outside of the body and position it right below the html element. How can I make this work while keeping it in the body?
EDIT I found the issue was that my body had transform: translateX(0). That seemed to be conflicting with the fixed footer, because as soon as I got rid of that, it worked. However, I need that rule, or else my slide in navigation breaks.
I found out the issue was a conflict between applying a transform to the body, and having a fixed footer. There appears to be an issue combining those two rules together like that. I resorted to using left positioning for my animation, rather than transform, and it fixed the issue. It's not ideal, but it worked.
Try this:
HTML:
<body>
<div class="container">
<footer>Your footer</footer>
</div>
</body>
CSS:
// wrapper in your body, where your footer will be in
.container {
position: absolute;
top: 30px;
}
footer {
position: relative;
bottom: 0;
width: 100%;
height: 20px;
}
Add this to your CSS:
html, body {
width: 100%;
height: 100%;
}
I am new to CSS and am looking for some help with the following.
I have an HTML page with the below structure at the beginning of its body.
Inside the body I have a form with the class "bgBanner".
The idea with this is to set a background image only for the form but not for the rest of the body.
When viewing this on the desktop everything looks ok but when viewing it on a mobile / smartphone everything gets cut off at the bottom edge of the screen and I don't get a scrollbar there.
Since I am new to this I guess one of my styles might overwrite another or I am using "overflow" the wrong way.
Can someone help me with this ?
My HTML:
<!-- ... -->
<body>
<div class="wrapper">
<?php require_once("includes/menu.php"); ?>
<section id="main">
<form id="frmLogin" class="bgBanner">
<!-- ... -->
My CSS:
html, body {
height: 100%;
overflow: auto;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
form, #main {
height: 100%;
overflow: auto;
}
#main {
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 8.33%; /* col-1 */
margin-right: 8.33%; /* col-1 */
overflow: hidden;
}
.bgBanner {
background-image: url('../images/banner-M.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
min-height: 600px;
}
Many thanks for any help with this,
Mike
I got this to work by removing the overflow from form and #main + by changing the CSS for html and body as follows:
html, body {
height: 100%;
width: 100%;
}
html {
overflow: auto;
}
This is working for me now on both desktop and mobile.
However, since I am new to this it might not be the best approach so if there are any comments please let me know.
Thanks !
Use #main {overflow-y: scroll}
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
Some time ago I started studying HTML and CSS. For purposes of study and practice, I am trying to create a simple web application of a game. The main interface of my application is very simple, containing only a header, a content area with login, and a footer. For purposes of demonstrating how I want my application looks like, here is a picture:
IMAGE, MIRROR 1, MIRROR 2.
In my progress in the development of HTML page with styling, I just running into this:
IMAGE, MIRROR 1, MIRROR 2.
What's bothering me now is because of the large white space that appears. I wish this place would go away, and that the background occupy it (the "conteudo" div). Here is the body of my HTML document:
<div id="conteiner">
<!-- CABEÇALHO -->
<div id="cabecalho">
<div class="centro">
<div id="logo">
BANCO DE DADOS <span>- FINAL FANTASY VIII</span>
</div>
</div>
</div>
<!-- CONTEÚDO -->
<div id="conteudo">
<div class="centro">
CONTEÚDO
</div>
</div>
<!-- RODAPÉ -->
<div id="rodape">
<div class="centro">
<div id="rodape-imagem">
<img src="recursos/imagens/griever.png" alt=""/>
</div>
<div id="rodape-autor">
DESENVOLVIDO POR <span>R.D.S.</span>
</div>
</div>
</div>
</div>
And here is my CSS stylesheet:
#font-face
{
font-family: "Runic";
src: url(../recursos/fontes/RUNIC.TTF);
}
*
{
margin: 0;
padding: 0;
}
html , body
{
height:100%;
}
#conteiner
{
min-height: 100%;
position: relative;
}
#cabecalho
{
background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));
height: 100px;
}
#logo
{
font-family: Runic;
font-size: 30px;
color: white;
line-height: 100px;
}
#logo span
{
color: rgb(153,179,206);
}
#conteudo
{
background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));
height: 200px;
}
#rodape
{
background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));
width: 100%;
height: 75px;
position: absolute;
bottom: 0;
left: 0;
}
#rodape-imagem
{
float: left;
position: relative;
left: 15px;
}
#rodape-autor
{
font-family: EngraversGothic BT;
color: rgb(153,179,206);
position: relative;
left: 30px;
line-height: 75px;
}
#rodape-autor span
{
color: white;
}
.centro
{
width: 900px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
border: 1px solid white;
}
Can anyone help me on this, and explain the reason for such possible solution?
Thanks!
EDIT - (20/03/2014)
I guess my question was not clear enough, so I'm editing to make it more clear and susceptible to a better understanding and resolution.
If you look at the second picture you will see a blank space. I wish this place was filled by the background of the div "conteudo". This div paints a background with a linear gradient. My intention is to make this div always placed after the header (cabecalho), and always has the size limit to the footer (rodape), ie, its height is over when the footer begins. It should stay that way even if the user resize the page. This feature would be possible to be implemented?
I modified "container" and "content" as follows:
/* ROOT */
#conteiner
{
height: 100%;
position: relative;
}
/* CONTENT */
#conteudo
{
height: 100%;
background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));
border: 1px solid red;
}
My background had increased height, however, it surpassed the footer, completely losing its layout.
Are you referring to the white space above the footer? If so, that's because you are giving the footer position:absolute. So it will stick to the bottom of the container with relative position.
The key concept here is Visual formatting model, learn more about it and you will solve your mysterious problem.
The plain solution is: give your content div a fixed height.
I'm trying to apply this method of the Sticky Footer: http://code.google.com/p/cleanstickyfooter/
It works great, however, I have one problem. The design for my particular site has a 34px margin at the top of the page. So I've tried a few ways of implementing it, either by doing body {margin-top:34px} or doing container {margin-top:34px}.
However, in both cases, the Sticky Footer gets messed up. When I try to compensate for the 34px, it doesn't ever seem to work out.
Any ideas?
Here's a Fiddle example: http://jsfiddle.net/jrZKb/
Using the Modern Clean CSS Sticky Footer, it's working (on FireFox and IE9):
http://jsfiddle.net/jrZKb/1/
<body>
<header> Header</header>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
header
{
background-color: green;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: blue;
}