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 :)
Related
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 have quite an annoying problem, for which I don't seem to be able to find an easy fix. Consider the following HTML:
<html>
<body>
<div id="page">
<!-- Some HTML here -->
<div id="menu"><!-- Some stuff here --></div>
<!-- Some HTML here -->
</div>
</body>
</html>
With the following CSS:
body {
text-align: center;
}
#page {
margin: 0px auto;
max-width: 1200px;
}
#menu {
width: 100%;
padding: 0px 2000px;
margin-left: -2000px;
}
This would give a centered page div, with a menu bar in there. Thing is, whenever the browser width becomes > 1200px, the div will not grow any further, but the menu div must at all times stretch all the way to the window edges. And the problem with this approach now is, that I get a horizontal scrollbar because the menubar is bigger than the screen. So, I am looking for a solution for this. Something that disables the scrollbar from having impact on the horizontal scrollbar would do. Disabling the horizontal scrollbar isn't an option however, since the content must be scrollable on small devices as well...
I am aware that I could fix this by pulling the menu bar outside of the page div, but that is hard, since I am editing a Drupal theme and I want this change to have as little impact as possible.
Thanks in advance for any suggestions!
What you mean is that you want the div to stay 100% width all the way but to have scrolling inside of it? If so then you should have a wider div inside the main div.
Something like this-
<div id="full-width">
<div id="scrolling-div">
</div>
</div>
<style type="text/css">
#full-width {
float:left;
width:100%;
height:500px;
overflow-x:visible;
}
#scrolling-div {
float:left;
width:300%;
height:500px;
}
</style>
I tested this code, it works :)
You can easy fix this by setting your html and body styling like this:
html, body {
overflow-x:hidden;
}
body {
margin: 0;
}
This should do it with the current code you have now.
I would like to make a page with two columns of fixed width, each with their own background color, strechting over the entire height of the page, even when scrolling down for large content. A simple drawing for clarification: https://dl.dropbox.com/u/3060536/twocol.png
I have found several solutions that almost do what I want.
Putting height:100% everywhere, looks great as long as you don't scroll: this seems to be relative to the height of the screen (the background disappears when scrolling down for longer texts).
Putting height:100% on html and body, and min-height:100% on one of the divs, I can make one column fill the entire height. But this needs to be done directly below body, and hence it seems not combinable with the centered two-columns lay-out that I want.
Putting padding-bottom:100000px and margin-bottom:-100000px in the columns and overflow-y:hidden in the parent, works fine if everything fits on the screen, but it entirely removes the option to scroll down if the text doesn't fit on the screen.
So none of the above does what I want. What is the proper way to do this?
You could probably get some idea here.. if position:relative does not bother you, try this.
<html>
<head>
<title>sample</title>
</head>
<body style="height:100%;">
<center>
<div style="position:relative; width:900px; height:100%;">
<div style="position:relative; float:left; background-color:blue; width:200px; height:auto; min-height:100%;">
'//some texts or controls
</div>
<div style="position:relative; float:left; background-color:green; width:700px; height:auto; min-height:100%;">
'//some texts or controls
</div>
</div>
</center>
</body>
</html>
Have a look at blog post. It took me a while to understand how it works but it does and it's great.
I've not tested this, and im pretty sure the left: 50%; margin-left: -450px doesn't work very well to center the elements. but its been a while since ive done html.
#background: {
position: fixed;
top: 0;
bottom: 0;
width: 900px;
left: 50%;
margin-left: -450px;
background-color: red;
}
#background div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background-color: blue;
}
And the HTML
<div id="content"></div>
<div id="background"><div></div></div>
Update
As I said, it was untested. It turns out I forgot to include the height or bottom for #background, possibly something else too.
Here's an example of the idea that does work http://jsfiddle.net/bEuTU/
I am new to css and html. I made an application, and the pages in html and css. These are the images of my pages:
and the second one is home page, that is user page
This is my .css file code snippet:
body{
background-color:#D8D8D8;
background-image:url("../images/spring.png"), url("../images/security.png");
background-size:200px 100px, 200px 100px;
background-repeat:no-repeat, no-repeat;
background-position:top right, bottom right;
margin-right:200px;
margin-left:15px;
}
Problem: As you can see the images are not align same in the two pages, and I need the second image to be at the bottom of the page like the first one which is at top most of the page. Can any body guide me how to do it. I am sorry for the language as it is terrible. Thank you.
I dont know how it works for you (two background image at same object), but you can use this code:
<html>
<head>
<style>
img.first_image { position: absolute; top: 0px; }
img.second_image { position: absolute; bottom: 0px; }
body
{ background-color:#D8D8D8;
background-size:200px 100px, 200px 100px;
background-repeat:no-repeat, no-repeat;
background-position:top right, bottom right;
margin-right:200px;
margin-left:15px;
height:100%;
}
</style>
</head>
<body>
<img src="../images/spring.png" class="first_image" />
<div>
<!-- every things you need -->
</div>
<img src="../images/security.png" class="second_image" />
<body>
</html>
Add height:100% to the body and html.
try something like
body,html {height: 100%; width: 100%;}
#image-id {position: absolute; bottom: 0; right: 0;}
it seems to be that the body isn't the full height of the page
try
body{
background-color:#D8D8D8;
background-image:url("../images/spring.png"), url("../images/security.png");
background-size:200px 100px, 200px 100px;
background-repeat:no-repeat, no-repeat;
background-position:top right, bottom right;
margin-right:200px;
margin-left:15px;
height:100%;
}
That might be a little too much, though ... it might be worth setting it to height:95%; if it causes scroll-bars to appear
Set both pictures to position fixed. Then the first one to top right and the second one to bottom right.
Then you have the pictures at every time in the wished position, even when the page content gets longer and is scrollable.
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>