i want that my text eg. "registration" which is the topmost text and is a heading,to remain fixed on the screen and then when i scroll "registration" should remain intact at the top of the screen and all other text should go beneath it while scrolling. how can i do this???? please reply soon... Thanks to all for your time in advance.
I'm not sure do I understand correctly what you are trying to achive, but i'll give it a shot. If you are trying to create fixed position header you can use the same technique like in fixed footer. You can find more info in this fixed footer documentation
And here goes the example code:
<!-- IE in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Fixed footer</title>
<style type="text/css">
body{
margin:0;
padding:0 0 <length> 0;
}
div#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:<length>;
}
#media screen{
body>div#footer{
position: fixed;
}
}
* html body{
overflow:hidden;
}
* html div#content{
height:100%;
overflow:auto;
}
</style>
<div id="footer"> footer </div>
<div id="content"> content </div>
You can use position: fixed; in CSS. It's recognized by pretty much every browser, except for IE6... but you shouldn't try to make stuff work there anyway.
.stayOnTop
{
position: fixed;
top: 0; /* to place it on top */
left: 0; /* to place it in the left corner, that'd be the most logical place; although this obviously isn't necessary, you could want to put it in the right corner or somewhere else and whatever /longcomment */
}
You want probably want to set the css attribute position to fixed for this. Of course this behaviour is somewhat commonly seen with most browsers on most systems simply with the tag!
You should set your element's position property to "fixed" in your css.
#registration_element
{
position:fixed;
top:0px;
}
this link should help
Use style position:fixed.
Here comes the example.
<style>
#idOfDiv {
position: fixed;
width: 100px;
background: #FFF;
z-index: 999;
}
</style>
<div id="idOfDiv"> TEST </div>
Related
I use position:fixed on the bottom bar (it's a fixed contact menu).
<style>
.bottom-menu {
width:100%
height:50px
background-color:#e3e3e3;
position: fixed;
bottom: 0
}
</style>
<div class="bottom-menu">
some text and social icon
</div>
On Windows Phone with IE, there is an issue.
After 50% scrolling, my bottom-menu begins to vibrate, also slows down, and it takes a few seconds to return to bottom.
You missed the semicoloms after width:100% and height 50px
Also there is no position:fixed ? You should post the whole code :)
<style>
.bottom-menu {
width:100%;
height:50px;
background-color:#e3e3e3;
position: fixed;
bottom: 0
}
</style>
<div class="bottom-menu">
some text and social icon
</div>
Also make sure you have <!DOCTYPE html> at the beginning of your documents because this also can cause troubles in some browsers.
Also the ; at the End of an CSS Document in unnecessary :)
I have not been able to get any of the solutions to work.
The footer keeps on leaving a gap at the bottom of this page
The footer leaves a gap of white space.
I have tried
#footer {
position:absolute;
bottom:0;
}
and it seems to make it worse...
Any ideas?
UPDATE:
still can't get it to work. tried setting the height of the body and wrapper. tried all code below. and it just ends up overlapping
Try this...
#footer-wrap {
position: fixed;
bottom: 0;
width: 100%;
}
Here you go:
#footer {
position:fixed;
bottom:0;
left:0;
width:100%;
}
Based on your question I don't think you want to use position: fixed because if your page were to get any taller (to the point that vertical scrolling was required), the footer would stay attached to the bottom of the page wherever you went. I think what you want is this:
<style>
.footer-wrap{position: absolute; bottom: 0px; width: 100%;}
body{overflow: hidden;}
</style>
You need to add the overflow: hidden on the body because the 100% width on the footer will create a horizontal scroll.
The footer is an automatically defined element in HTML5 you basic page should look like this and everything should be place
<!DOCTYPE html>
<html lang="en">
<head>
<title>Place title here</title>
<meta charset="utf-8">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>
A good CSS configuration for each could be something like
<style>
header {
background-color:place color here;
}
nav {
background-color:place color here;
}
main {
background-color:place color here;
}
footer {
background-color:place color here;
}
</style>
NOTE:Footer and header should be same color as the body color makes page more presentable
I was able to fix it by setting a bottom margin in the post
article.post-72.page.type-page.status-publish.hentry {
margin-bottom: 124px!important;
}
and adding some height and overflow the the footer
.footer-wrap {
height: 115px;
overflow: hidden;
}
Try this:
#footer {
position:fixed;
bottom:0;
width:100%;
}
I believe that is what you are after. Position absolute relates to the document whereas position fixed relates to the screen view.
EDIT
Assuming your footer has a height of 50px say, you need to add a margin to an element that is above the footer in the DOM, some sort of wrapper ideally that appears on every page of your site (this makes the most sense structurally.
Even if you add this element yourself assuming you have access to a template.
So it could look something like this:
<header></header>
<div class="content">
//wrap all of your main content block here
</div>
<footer></footer>
Then for the css add margin-bottom:70px to the .content wrapper
I might be a little late, but I stumbled upon this today and I know the solution for it.
Just use: display:flex;
This'll make this white space vanish. Hope this helps someone.
I'm recreating my layout with bootstrap because I want my website to be responsive.
I have my layout like this now:
<div id="container">
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
This is the css code for container and the footer:
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#content{
padding: 0 0 4em; /* Footer height padding */
}
div#footer{
bottom: 0;
position:absolute;
z-index:0;
background:#000000;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
But I got a problem (You can see the current code + setup right here):
Once I resize the page like the footer is right under the header (it's on top of the content area text, I need to put the right padding in there). After that click the menu icon (in mobile view) and the footer is on top of the menu, which isn't meant to be so.
Just like this:
What's supposed to happen is that the menu is above the footer.
I tried fixing it with z-index:-20; but then I can't click the links in the footer anymore... So that solution won't work.
Can you help me?
You should add z-index to your nav-bar, like so:
.navbar {
...
z-index: 1;
}
for div#footer footer give z-index=-1 and you will get it like this
To fix this problem :
It's better to Use ( header, content, footer) in separate container.
In line (42) in your style.css file your code should be like this:
UPDATE
the new code and make at least the footer in a separate container.
div#footer {
bottom: 0;
background: #000000;
margin-left: auto;
margin-right: auto;
}
hope this will help you.
Answered by: MichaB
The solution was to add z-index:1; to the navbar. This fixed the problem.
I am using an image (in an <img> tag) as a background. I want it to always be the furthest back object. But my paragraph isn't showing up because it is covered up by the image.
I know it has something to do with the z-index, but I can't get it working.
HTML
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>
<body>
<img src="images/final2.gif" class="stretch" alt="" />
<p>This is the first paragraph in the body of your new HTML file!</p>
asdfas
</body>
</html>
CSS
body {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
width:100%;
height:100%;
z-index:-1;
}
p {
color:red;
}
It seems like the image should be fixed, not the body.
body,html {
height: 100%;
}
.stretch {
width:100%;
height:100%;
position: fixed;
top:0;
left:0;
z-index:-1;
}
http://jsfiddle.net/xYqsT/
The paragraph or content in front if it needs to have position: relative, otherwise anything with a z-index takes precedence.
You can do this in pure CSS, yes even for ancient browsers. This should cover IE5.5+:
body {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
background-image:url('images/final2.gif');
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/final2.gif',sizingMethod='scale');
}
The filter is for IE8-. Taken from here, and original spec found here.
EDIT
Aspect ratio not preserved using the filter ... very true, it does not scale preserving ratio the same way that background-size:cover; does. This is a very good article, though, about different methods to use:
http://css-tricks.com/perfect-full-page-background-image/
They provide multiple CSS-only, as well as jQuery, methods. One is bound to provide what you want.
I can't recommend highly enough using backstretch.js. I've used it for a lot of projects as there is no real solution to preserving aspect ratio of an image in CSS. If you're only supporting IE9+ then by all means, PlantTheIdea's answer is the best. But for anyone that is coming here and needs to preserve aspect ration for IE8- and if they need to use an <img> instead of background-image then use this great little plugin.
You can use it as a total background with just one line:
$.backstretch('https://img.jpg');
Or you can set it as the background on any element:
$("#demo").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");
You can also pass multiple images into the function and other parameters to create slideshows etc.
DEMO
you need to set the image as a background-image
body {
width: 100%;
height: 100%;
background: url('images/final2.gif') repeat;
}
you can use background-size to size the image appropriately (stretching it to 100%)
You might want to pop all your page content inside an element (or several elements), and give them a z-index higher than your background <img>.
E.g.
HTML
<body>
<img src="images/final2.gif" class="stretch" alt="" />
<main>
<p>This is the first paragraph in the body of your new HTML file!</p>
<!-- All page content goes in here. -->
</main>
</body>
</html>
CSS
main {
position:relative;/* So that it behaves as if it were position:static, but still gets a z-index */
z-index: 1;
}
<body style="min-height:2000px;">
<div id="test" style="position:relative;bottom:0;">
some dynamically changed content
</div>
</body>
What do i expect:
-If #test height is greater or equal to body's it should stick to bottom (as it happens now cuz of block model)
-If #test height is less than body's it should however stick to bottom, having white space above it. (which doesn't happen, #test doesn't stick to bottom).
-Using position:absolute is not acceptable as then #test will not influence body height when #test is higher than body.
-Using position:fixed is not acceptable as then #test will stick to bottom of window, not body.
Q: Can I get what I expect using css only? How?
Sorry for poor English, however I think the question is easy to understand.
Thank you.
P.S.: I need that in css because some dynamically changed content is changed via js and I want to avoid recalculating #test div position each time it changes.
UPD:
I've also tried some display:inline-block; vertical-align:bottom; stuff still no result.
UPD2:
Thank you guys, still it seems, that easiest way is just to add a couple of lines to my javascript to recalculate body height on #test height change.
I know it's an old question, but you could try doing:
top: 100%;
transform: translateY(-100%);
Transform operates with the size of the element itself, therefore it will climb back to the container at the very bottom. You can use letters for all 3 axis.
Because of the dynamic height nature of #test you cannot do this with CSS alone. However, if you're already using jQuery, a quick .height() call should be able to get you what you need (#test height needs to be subtracted from positioning it 2000px from the top).
<style>
body {
min-height: 2000px;
}
#test {
position: relative;
top: 2000px;
}
</style>
<script>
var testHeight = $("#test").height();
$( "#test" ).css({
margin-top: -testHeight;
});
</script>
The only two pure-CSS ways to create sticky footer of dynamic height I know are using flexboxes (no support in IE9-, unfortunately) and using CSS tables:
html, body {
height: 100%;
margin: 0;
}
body {
display: table;
width: 100%;
min-height:2000px;
}
#test {
display: table-footer-group;
height: 1px; /* just to prevent proportional distribution of the height */
}
It is very much possible using relative position. this is how you do it.
Assume height of your footer is going to be 40px. Your container is relative and footer is also relative. All you have to do is add bottom: -webkit-calc(-100% + 40px);. your footer will always be at the bottom of your container.
HTML will be like this
<div class="container">
<div class="footer"></div>
</div>
CSS will be like this
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.footer{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
Live example here
Hope this helps.
#footer{
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE6 */
* html #footer{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
JSFiddle: http://jsfiddle.net/As3bP/ - position: fixed; is the obvious way of doing this, and if this affects your layout, try posting your problems here. It'd be easier to modify the CSS of your content than trying to find another way of doing this.
The IE6 expression is not good for speed at all but it works, read about that here: http://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-7-avoid-css-expressions-7202.html
EDIT Read your edits, please forget the above. To be stuck at the bottom of the body, it'd be easy to position it in your HTML. This is simple stuff, please post example code if you need further help. Positioning something at the bottom of the page, by default, positions at the bottom of the page.
JSFiddle: http://jsfiddle.net/TAQ4d/ if you really actually need that.
short answer: No YOU can't do this with pure css because it is just the reversed direction to the normal flow of page (I mean bottom to top);
you can use this plugin which is very easy to use stickyjs;
use it with bottomSpacing: 0
EDIT
this plugin uses position: fixed too!
then I think you should write it down by yourself or have someone to write it for you :D
if u dont want to use position:absolute; left:0; bottom:0; then u may try simple margin-top:300px;...
Yes it is Posiible with CSS only:
HTML:
<body>
<div id="test">
some dynamically
changed content
</div>
</body>
CSS:
body{
line-height: 2000px;
}
#test{
display: inline-block;
vertical-align: bottom;
line-height: initial;
}
JSFiddle
If you want to have the text on the bottom of the screen then you can use:
body {
line-height: 100vh;
margin: 0px;
}
here are solution I come up with
<ul class="navbar">
<li> Welcome <i></i></li>
<li> Portfolio <i></i></li>
<li> Services <i></i></li>
<li> Blogs <i></i><i class="arrow right"></i>
<ul class="subMenu">
<li> Why Did Mint Net CMS Born <i></i></li>
<li> Apply AJAX and Mansory in gallery <i></i></li>
<li> Why did Minh Vo create Mint Net CMS <i></i></li>
</ul>
</li>
<li> About <i></i></li>
<li> Contact <i></i></li>
<li> Estimate <i></i></li>
</ul>
<style>
.navbar {
display: block;
background-color: red;
height: 100px;
}
li {
display: table-cell;
vertical-align: bottom;
height: 100px;
background-color: antiquewhite;
line-height: 100px;
}
li > a {
display: inline-block;
vertical-align: bottom;
line-height:initial;
}
li >ul {
display: none;
}
</style>
We do like that:
Html:
<body>
<div id="bodyDiv">
<!-- web site content is here -->
</div>
</body>
<footer>
<!-- Footer content is here -->
</footer>
Jquery:
$( document ).ready(function()
{
$('#bodyDiv').css("min-height",screen.height);
});`
dynamically change content element min-height attribute according to screen resolution.
Old post, I know, but yet another solution would be to create a wrapper for your content with a minimal height of 100vh - footerHeight
this solution requires that you know the height of the footer...
<body>
<div class="wrapper">
your content
</div>
<div class="footer">
footer content
</div>
</body>
and your css would look like this:
.wrapper {
min-height: calc( 100vh - 2em );
}
.footer {
height: 2em;
}