I had a footer on my site which stayed at the bottom of the visible screen at all times. I added the following piece of CSS to make the screen stay centered when the browser is resized:
CSS
position: absolute;
left: 50%;
transform: translateX(-50%);
min-width:600px;
And now the footer is no longer stuck to the bottom of visible screen. On pages with lots of content, the footer is at the very bottom of the page, but on pages with little content, it is just floating in the center of the page.
Here is the footer CSS:
Footer.css
#footer{
position:fixed;
bottom:0;
left:0;
right:0;
min-width:100%;
width:100%;
height:50px;
opacity:0.8;
}
And here is a before and after Image of what it did and now does look like:
Before & After
Can anyone help fix this?
Thanks!
The problem is caused by the translateX applied on the HTML tag, so try to remove that style from applying on the HTML tag.
In order t solve this try to add a wrapper for your content <div id="main"> and applying your style there #main{}.
Live example here:
https://jsfiddle.net/cwmz9r7u/1/
Generally how you have keep the footer at the bottom on the screen was good but if you move your content including the footer using translateX on HTML, your position is not kept any longer as your user case.
Related
I am currently building a website that uses two columns, inside a position fixed box to make the heights stay at 100%.
I need the content div to scroll down if the content is longer than the page (on 11/13" screens, page is responsive) - but by setting overflow scroll on the content, the background does not drop, and there is still content at the bottom of the page.
There are two links here, one is the page as it is, and the other is the page with extra content (to make it longer than your viewport)
Link 1 link 2
If you can help my solve this, i'll be thankful :)
Add Overflow:auto; It works fine. I checked it with that page.
The problem is the .bf_page is set to height: 100% - this is getting the full height of the body, however the div doesn't start at the top of the page so it continues under the bottom of the body tag for 100 or so pixels, meaning the last bit of content is getting chopped off (hope that makes sense?!).
The height of the logo (which is causing the page to extend) is 121px so you could do the following:
Change .bf_page's height to:
.bf_page {
height: calc(100% - 121px);
}
Set .bf_content_text to overflow: auto
I've tested that and it seems to work.
Taking out the "position: fixed;" on the '.bf_menu' class works for me, if you're having trouble getting the menu to stick to the top of the page, just hide the blockquote div with display:none.
Example:
<div id="wrapper">
<div id="content">
<div id="data">
</div>
</div>
</div>
#wrapper {
height:100vh;
width:100vw;
background-color:black;
position:absolute;
}
#content {
background-color:red;
height:80%;
width:80%;
position:relative;
overflow-y:auto;
}
#data {
background-color:yellow;
width:80%;
height:1000px;
}
http://jsfiddle.net/nGU8R/1/
When I do something like this for the footer css
footer {
position: fixed;
top:800px;
left:0;
width:100%;
height:80px;
}
When I resize the browser window from the bottom upward, of course, the footer does not move and does not overlap my main content which is great however, when viewing the site at different screen sizes, the footer being a fixed footer of course is at the bottom for some screen sizes then larger sizes it isn't at the bottom of course because it's fixed. So ultimately what would I would love to have is a footer like this:
footer {
position: fixed;
top:90%;
left:0;
width:100%;
height:80px;
}
Which creates a footer that stays at the bottom of the page regardless of resizing yet it can overlap content. I want to have a fixed footer that will always stay at the bottom yet never overlap content.
I could use media queries for popular sizes but of course at some sizes it won't work out.
Can anyone help me out?
footer {
position: fixed;
bottom:0;
left:0;
width:100%;
height:80px;
}
Then give your content a bottom padding of at least 80px. Why are you using top anyhow?
I am playing around with bigcommerce at the moment and I am trying to recreate the footer structure for the header. You can see here:
http://thespeedfactory.mybigcommerce.com/
If you look at the footer, how it is full width but the content is central within it.
I want the header to be exactly the same, black with pink/white highlights.
Ive tried moving around the structure within bigcommerce, but I am having a brain failure in getting it to do and look how I want despite knowing it is based around containers and margins.
Any guidance is appreciated.
If I understand you correctly, you want:
the header (#Header) to span the entire width of the page
the footer (#ContainerFooter) to span the entire width of the page
the header (and footer to have the same styling (colors, etc.)
the content area (#Wrapper) to stay a fixed width and centered on the page
To do this, add the following css:
#Container {width:100%;}
#Header {width:100%; margin:0, auto;}
The above css allows the header (by way of its parent container) to stretch the width of the browser page. You'll notice #Wrapper is shifted to the left. Add this:
#Wrapper {margin:auto;)
This centers the #Wrapper.
Your structure should be in place and now you can add your colors, etc. to the #Header to make it match the footer.
This is pretty basic html/css.
Just create a div, place a container in it and start styling.
HTML:
<div id="header">
<div id="container">
<p>content</p>
</div>
</div>
CSS:
#header {
width: 100%;
height:400px;
background:black;
position:absolute;
border-top:3px solid #ff25a7;
}
#container {
width:90%;
height:300px;
margin:0 auto;
}
#container p {
font-size:30px;
padding:10px;
color: #ff25a7;
}
Here's a jsFiddle to help you get started.
You can try giving the header the same class as the footer and afterwards (if the footer's position is absolute bottom), set the position to absolute top:0px;
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.
I want my footer to appear directly under the content which is containing the dropbox shawdow , the bottom border of the content has to be shown but the footer should appear below or in other words underneath the content , I can have a footer placed in my page but have no idea how to push the footer under the content with contents border visible
Any help regarding this will be useful to me
I need it to be done in html4 not in html 5
I have done the following for the footer in the style sheet as follows , now am able to push the footer underneath the content but i dont want the width of the footer to resize on window resize , the footer width has to be 100% no matter what , and in Internet Explorer am unable to use position :absolute , any help will be greatly appreciated
#footer
{
position:absolute;
top:718px;
z-index:-1;
width:100%;
left:0;
height:100px;
background: #EDEDED ;
}
Use CSS's z-index:
#content {z-index: 10;}
footer {z-index: 1;}
(Note the HTML5 element 'footer')