I am trying to a fixed header on top of the page. So when the user scroll down, the header stay up on top. However this is only work in Chrome, FireFox and Opera which scrolls smoothly.
If you have a look the code below. Open with IE and Google Chrome. You will see the difference! The header must stay in the wrapper.
Example Code
I would like to know how to make the scrolling smooth when repositioning objects inside the div elements when set to absolute to keep it floating at the top of the box.
HTML:
<div id="wrapper">
<header>
<h2>Title Header</h2>
</header>
Content page
</div>
CSS:
#wrapper{
height:200px;
overflow-y:scroll;
position:relative;
}
#wrapper > p {
position: absolute;
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: absolute;
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
#wrapper header h2 { margin:0 }
Javascript:
$(function(){
$('#wrapper').scroll(function(e){
$('header').css('top',parseInt($('#wrapper').scrollTop())+'px');
});
});
I'd rather use this CSS and remove the JS for cross-browser compatibility:
// same CSS...
#wrapper p {
margin-top: 50px; //no positioning just a top margin
z-index: 0;
}
#wrapper header {
background-color:#ccc;
position: fixed; // from absolute to fixed
z-index: 10;
display: block;
top: 0px;
padding:10px;
width: 100%;
}
//same CSS...
Demo.
Related
I have two blogs. I need to link those.
'one.html' of the 'website1.com' should load the 'website2.com'.
The address 'website2.com' should not be displayed, instead, it should show 'website1.com/one.html'.
It has to scroll without cutting the content (auto adjust height, based on the content/no. of posts) but scroll bar should not be visible.
I created an iframe and was able to hide the scroll bar as well, but it did not auto adjust the height. Either it does not show full content or shows half content.
Please provide the appropriate HTML, CSS, and/or Javascript code to do the same.
Thanks in advance.
<style>
#support-box {
width: 50%;
float: left;
display: block;
height: 20rem; /* is support box height you can change as per your requirement*/
background-color:#000;
}
#wrapper {
width: 90%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
background:#ddd;
margin:auto;
height:100%; /* here the height values are automatic you can leave this if you can*/
}
#wrapper iframe {
width: 100%;
display: block;
padding:10px;
margin:auto;
}
</style>
<div id="content" >
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="website2.com" frameborder="0"></iframe>
</div>
</div>
</div>
Demo : https://jsfiddle.net/umd2ahce/6/
I've got the following:
<div class="wrapper">
<div class="top">
</div>
<div class="left">
</div>
<div class="main">
</div>
<div class="footer">
</div>
</div>
With the following CSS:
.top {
position: absolute;
left: 0;
height: 80px;
width: 100%;
}
.left {
position: absolute;
left: 0; top: 80px; bottom: 100px;
width: 200px;
margin-left: 5px;
}
.main {
position: absolute;
left: 200px; top: 80px; bottom: 100px;
width: 84%;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
}
I'd like to keep the footer at the bottom of the page (after left and main, and regardless of how big/small main is), but with position: fixed the footer scrolls up/down as you scroll through the page. I've tried position: absolute and that doesn't push the footer all the way to the bottom. I've tried some of the other solutions found here and none have worked. How can I keep the footer at the bottom of the page (similar to the footer at the bottom of this page)?
Thanks in advance!
Try this:
.footer{
position:absolute;
bottom:0
}
Position absolute moves footer according to the element that contains it. Bottom 0 keeps the footer at the bottom of it's parent.
This will work if the parent of the absolute positioned element has relarive position. To say it more particular, your wrapper needs to have the following code:
.wrapper{
position: relative
}
Fixed does what you're describing, locks elements with your viewport. Absolute makes an element ignore the flow of the rest of your page, so if you want to make it go beneath everything else you'll run into problems. Give this a shot, it'll put it underneath all your content.
footer{
position: relative
width: 100%
float: left
}
If you need it to stay at the very bottom of the screen when you have very short content, you can add a wrapper element around everything and try something like this
.wrapper{
display: block;
min-height: 100vh;
position: relative;
padding-bottom: footer height (set this to how tall your footer is)
}
footer{
position: absolute;
bottom: 0;
}
Give this a go:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
.left {
float:left;
width: 200px;
margin-left: 5px;
}
#right {
float:left;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
And for older browsers:
#container {
height:100%;
}
Don't use position for every <div> you only need to add position to .footer
Here is a working example...
I have this very simple code, the problem is it doesn't give the same output using Firefox and IE: in Firefox, the images are superposed but right-aligned, and in IE they are superposed and left aligned.
What I want is that the images will be centered and superposed.
I have to create images using Javascript to use a special library in creating the images.
Thank you for your help.
HTML
<body>
<div id="Container">
<script type="text/javascript">
document.write('<img id="image1" src="image1.jpg">')
document.write('<img id="image1" src="image2.jpg">')
</script>
</div>
</body>
CSS
body {
text-align: center;
background-color: #e8e6e7;
margin-left: auto;
margin-right: auto;
}
#Container {
position: relative;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#image1 {
position : absolute;
margin-left: auto;
margin-right: auto;
}
#image2 {
position : absolute;
margin-left: auto;
margin-right: auto;
}
Since you are making #image1 and #image2 be absolutely positionined, they will not adjust the width/height of the #Container. This means you can't center it, because it doesn't have the proportions to center.
The code below makes only one image be absolutely positioned. This lets your other image act as expected. You can do whatever you want with the "overlay" image.
I also included z-index, which can let you change the order of the images. This isn't necessary for this example, but if you add more images, it may be useful.
HTML
<div id="Container">
<div class="image-wrap">
<img id="image1" src="http://dummyimage.com/200x200/fa00fa/fff.png"/>
<img id="image2" src="http://dummyimage.com/200x200/00ff33/000000.png"/>
</div>
</div>
CSS
#Container .image-wrap {
position: relative;
display: inline-block;
}
#image1 {
position : relative;
z-index: 10;
}
#image2 {
position : absolute; /* Different than #image1 */
z-index: 20; /* On top of #image2 */
top: 0;
left: 0;
/* Assuming width/height of both images are the same */
}
JS Fiddle
http://jsfiddle.net/n496j/1/
First change second image id to image2.
2 tricks for centering your images is:
add one of these classes to your images:
.center {
display: block; /*can remove this line*/
margin: 0 auto;
left: 0;
right: 0;
}
.center {
left: 50%;
margin-left: -[your image width / 2]
}
Use the css
img{ display:block; margin: auto; }
well, it will help if the images would sit in some container with text-align:center;.
something like this:
// body can be be replaced with any element which contains the images
body{ text-align:center; }
body > img{ display:inline-block; max-width:49%; }
Demo page:
http://jsbin.com/hehot/1/edit
I'm trying to create a fixed layout, with the sidebar's background extend to the far right. I drew a sketch to illustrate the image:
how would I go about extending the sidebar background to extend till the end of the right screen, on any window size? I tried with:
#sidebar {
z-index: 1000;
overflow: hidden;
position: absolute;
width: 100%;
background: url(../img/sidebar-base.png) no-repeat 0 -8px;
min-height: 200px;
&::after {
content: '';
z-index: 10;
display: block;
height: 100px;
overflow: hidden;
width: 100%;
background: url(../img/sidebar-rx.png) repeat-x 0 -9px;
position: absolute;
top: 0;
}
}
but a scroll would appear horizontally, and if I apply overflow:hidden on the body I wouldn't be able to scroll to the bottom. Thank you!
EDIT: I did try to find my luck with javascript but there's still a little scroll:
$(function(){
$sidebar = $('#sidebar');
$sidebar.css({width: window.innerWidth - ($sidebar.offset().left)})
});
If your problem lies only in the scrolling, you can easily fix this with this line
overflow-x: hidden;
and applying it to the background's parent or the body element altogether.
Is there anyone following here or not? anyway, I think you should static position and hidden overflow like below:
#sidebar {
z-index: 1000;
overflow: hidden;
position: static;
width: 100%;
height:100%;
right:0;
top:0;
margin:0;}
Also to hide the scrolls, you should hide your body overflow too.
Hope to be right and helpful...
Set body to 100%
body {
height: 100%;
}
Then set the sidebar height to "height: auto;". That will make it extend to the height of the viewport. From there, add fixed positioning like you said.
You could do:
overflow-y:hidden
That should get rid of the scroll bar across the bottom.
I would also then use a lot of right hand padding in the sidebar to extend it out.
Try setting the sidebar width to 30% and the content to 70%.
What you should do is create a wrapper div.
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here --></div>
</div>
Your document should look like this when finished:
<html>
<head>
<title>Experiment</title>
<style type="text/css">
.content {float: left; width: 49%; height: 500px; border: 1px solid #000;}
.sidebar-parent {float: left; width: 50%; background-color: green;}
.sidebar {width: 500px; height: 500px; border: 1px solid #000;}
</style>
</head>
<body>
<div class="content">blah blah blah</div>
<div class="sidebar-parent">
<div class="sidebar"><!-- Stuff Here -->blah blah blah</div>
</div>
</body>
</html>
The main thing to remember is the container div "sidebar-parent" is what's getting the width and containing the background.
To center them you'll need width: 50%; parent containers for both content and sidebar. You make those float:left; to fill the screen and then the content child container float: right; and the sidebar child container float: left; within their parent containers.
Summary: 2 50% width containers each containing 1 child container. Stack the parents together with a left float and then position the fixed width child containers within their parents.
That will center them and now you'll have the ability to have extended backgrounds.
I am trying to vertically center some text over an image that appears on a mouseover. I have come to a solution that works with chrome (15.0.874.106) on a mac (10.7.2), but it seems to have issues in Safari (5.1.1), odd since they are both webkit based. I believe it also has the same problem in Firefox.
The text is vertically centered in relation to the parent div in chrome, but seems to center to the body or window in Safari. Am I doing something wrong or does anyone have a better solution?
jsbin: http://jsbin.com/iceroq
CSS:
.content {
width: 300px;
position: relative;
}
.content-text {
width: 100%;
height: 100%;
background: black;
position: absolute;
top: 0;
left: 0;
text-align: center;
display: none;
}
HTML:
<div class="content">
<div class="content-image">
<img src="http://placehold.it/300x500/E01B4C" />
</div>
<div class="content-text">
Google
</div>
</div>
.content-text a {
color: white;
position: relative;
top: 50%;
margin-top: -0.5em;
}
JS:
$(document).ready(function() {
$('.content').hover(
function() {
$(this).children('.content-text').show();
}, function() {
$(this).children('.content-text').hide();
});
});
I edited your jsbin: http://jsbin.com/iceroq/3
The edits were all CSS changes to .content-text a. Making the link absolutely positioned and giving it a height allows you to know what margin-top to give it (half of the height).
.content-text a {
display: block;
width: 100%;
height: 20px;
position: absolute;
top: 50%;
margin-top: -10px;
color: white;
}