How do you get a div position fixed where it also doesn't overlay on top of another div?
For example:
<html>
<body>
<div style="background-color:black; height:200px;">
</div>
<div style="background-color:blue; height:400px;">
</div>
</body>
</html>
What I want is for the top div to always be at the top but not to block any part of the bottom div. For an example: http://twitter.github.com/bootstrap/
The black menu at the top always stays at the top while not obscuring the view of any other div. I examined the topbar css on that website and plugged it into my own test document but I can't get the desired effect. What else do I need to do besides "position:fixed;"?
The top bar in your example does start obscuring things once you start scrolling. However, in your case, I think you should just add a padding to the top of your body equal to the height of your black bar. That way, everything is pushed down and it won't cover anything else up.
Here is a simple example of how it could be done
http://jsfiddle.net/fk3wY/3/
So basicly:
body {
padding-top:40px;
}
#top {
position:fixed;
top:0px;
left:0px;
height:40px;
width:100%;
}
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/
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 am trying to create a 'back to top' image, it needs to stick to the bottom right corner of the page.
I have created the div with the image but I do not know what is the best way to make it permanently stay at the bottom of the page. Is it best to use absolute positioning?
Also, I want the div to only appear when the user has scrolled past a certain point, and to fade in (or something similar?)
I have looked online but can't find anything that does what I want. I tried simply getting the div to stick to the bottom but the tutorials I have been using show how to create footers, rather than just one small graphic, so it doesn't work as well.
What are the best practices for this? Any help appreciated!
How about this:
http://jsfiddle.net/uRN64/1
HTML
<div id="log" style='display:none; position:fixed; bottom:0px; right:0px; width:200px background-color:red;'>Back To Top</div>
<div style='height:1200px; background-color:orange'>Try Scrolling me</div>
JS
$(function(){
$(window).scroll(function() {
$('#log').toggle($(document).scrollTop() > 100);
});
})
To fade:
Change: $('#log').toggle($(document).scrollTop() > 100); to
$(document).scrollTop() > 100 ? $('#log:hidden').fadeIn() : $('#log:visible').fadeOut();
Let say you have a div
<div class="bottom">Your Img</div>
Apply fixed position to the div as we want the div to appear fixed.
By doing so we can freely move the div to our desired area.
Then by applying CSS property right:0; and bottom:0; we can move the div to the right most and the bottom most position on the page.
HTML:
<div class="bottom"></div>
CSS:
.bottom
{
width:100px;
height:30px;
background-color:Gray;
border:1px solid black;
position:fixed;
right:0;
bottom:0;
}
Here is a Live Example
I want to make a website where the (dynamic in height) header and footer have a fixed position. The content should start directly beneath the header. I made a quick example. (Yellow and red top positions are the same, I want the yellow DIV to start beneath the red DIV.)
If you set the header position to fixed, the content DIV is placed at the same top position of the header.
For example, if you use float, you can use clear: both to reset the position, is there also a possibility for position: fixed?
I know this is an old post, but have recently come across this issue myself. So just thought I would share my solution (although I haven't fully tested it yet - add disclaimer here).
I created another container (div) below the fixed one (top of page), with the same settings, class etc and content.
Then I added a style to reset this second div to position:static, visibility:hidden. You don't really need to hide it, as it is completely covered by the fixed div; but just in case it's an older browser which doesn't recognise position:fixed.
Anyway this will give you a buffer area above your content that should always be the correct height. Downside is that if there is dynamic content then this will be included twice in your page for this area, but you need that content to make sure the hidden div is the right height.
Not a perfect solution, but the best I can come up with ... bar using javascript.
CSS Only Solution
Use some way to pad the space the header takes up at the top of the screen:
padding-top:
margin-top:
position:relative + top:
Then have a separate CSS style sheet to change height for regular viewports versus mobile viewports.
(Or see below for JavaScript solution to set the height attribute dynamically.)
jsFiddle
HTML:
<html>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<p>First Row</p>
<p>Next row</p>
<p>...</p>
<p>Last row</p>
<div>
</body>
</html>
CSS (regular version):
#header {
position:fixed;
height:100px;
width:100%;
background-color:green;
color:white;
}
#wrapper {
position:relative;
top:101px;
}
CSS (mobile version):
#header {
height:50px;
}
#wrapper {
top:51px;
}
JavaScript Solution
HTML (copy-and-paste-able):
<head>
<style>
#header {
position:fixed;
height:100px; /* try different values here! */
width:100%;
background-color:green;
color:white;
}
#wrapper {
position:relative; /* look Mom no height! */
}
</style>
</head>
<html>
<body>
<div id="header">
Header
</div>
<div id="wrapper">
<p>First Row</p>
<p>Next row</p>
<p>...</p>
<p>Last row</p>
<div>
<script language="javascript">
document.getElementById('wrapper').style.top = String(document.getElementById("header").offsetHeight + 1);
</script>
</body>
</html>
use z-index (css)
for one div make it: z-index:-1;
for other z-index:1;
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I think what you want is to add a margin-top that's equal to the height of your header. Do the same for margin-bottom to accommodate the footer.
You have to use padding-top and padding-bottom. In your example, if you add padding-top: 25px; to the style, it will display under the top fixed div.
As you know, a fixed position shows in the same spot on the browser and doesn't move as you scroll. The rest of the "normal" content is not affected by fixed positioned elements, so you have to use padding and margin to create some buffer space.
<body>
<div style="background-color: red; position: fixed;width:100%;">This is a test with position set to fixed</div>
<div style="background-color: yellow; height: 1000px;">This is content that should start beneath the fixed DIV</div>
</body>
So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/