currently I'm creating a layout, which requires a div having background graphics and the top and the bottom. My mark-up which I created works fine in FF and looks like this:
#wrapper {
width: 520px;
padding: 2px;
position: relative;
float: left;
z-index: 4000;
}
#upper_bg {
background:url(images/header_top.png);
position:absolute;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
#row_wrapper {
position:relative;
float: left;
z-index: 3000;
}
#lower_bg {
background:url(images/header_bottom.png);
position:absolute;
bottom:0px;
height:200px;
width:520px;
z-index: 1000;
margin: -2px;
}
<div id="wrapper">
<div id="upper_bg">
<!-- ie fix for displaying empty divs -->
</div>
<div id="row_wrapper">
... content!
</div>
<div id="lower_bg">
<!-- -->
</div>
</div>
In IE (7,8 & 9) however the upper and lower_bg divs are invisible. Anybody knows how to fix this?
solved the problem. Indeed, the shown html in my question didn't reproduce the result. After a bit fiddling, I found out that IE was in quirks mode. I created the html via xslt and forgott to add the xsl:output tag and set it to html. After doing so, IE was fine down to version 7 with the layout.
Add a clear...
<div id="lower_bg">
blabla floating divs
<div style="clear:both"></div>
</div>
Related
I'm creating a new blogger template , but unfortunately I'm facing an issue.
simple example for what i am trying to do.
<div class='container'>
<div class='slider'></div>
<div class='posts'></div>
</div>
by default the second div (posts) should have z-index higher than the first one.
see this demo
and see this pic and now see what should be done here
, so what is the problem !.
here is my blog
To have an apparent higher z-index, the element must either be
After the other element or
Have a position:relative; or absolute when the previous element has a relative/absolute position.
.d1{
width: 100%;
height:50px;
background: tomato;
position: relative;
}
.d2{
width:80%;
height:200px;
background: blue;
margin: -30px auto 0 auto;
position: relative; /* Try removing this - it will be 'below' d1 because d1 has position:relative; */
}
<div class='container'>
<div class='d1 slider'></div>
<div class='d2 posts'></div>
</div>
In your case, this means adding position:relative; to .container class.
I'm working on a website where I want an image to straight away take up the screen. I want to make it take up the available screen but when you begin to scroll down I want a div to appear with the text and information. I do not mind if only some of the image is showing (like the bottom is slightly missing). I can do it, but it doesn't work on other resolutions.
I would rather not use javascript but if it is the only way I don't mind.
NEW another way of explaining what I'm trying to do is, I want the margin from the top of a div relative to the screen, so that on all screens the div appears as soon as you begin to move down the page.
I think you are asking about Parallax.
Explore a bit on Parallax in Wiki and see some samples here
Try this
HTML
<html>
<body>
<div class="imageDiv"></div>
<div class="contentDiv">
<h1>This is heading</h1>
<p>This is Paragraph</p>
</div>
</body>
<html>
CSS
*{
margin:0;
padding:0;
}
html, body{
width:100%;
height:100%;
}
.imageDiv{
width:100%;
height:100%;
background:url(http://www.hdwallpapersimages.com/wp-content/uploads/2015/06/Swing-02124.jpg) no-repeat top center #000;
}
No jquery has used
It sounds like you are trying to build a parallax website. Its possible to do this with only css and no java script. If you check you Keith Clark's blog post it should give you a good idea. http://keithclark.co.uk/articles/pure-css-parallax-websites/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
...
</div>
<div class="parallax__layer parallax__layer--base">
...
</div>
</div>
I am trying to create fixed position div inside relative container. I am using bootstrap css framework. I am trying to create a fixed position cart. So whenever user scroll page it will show cart contents. but now problem is, it ran outside that container div.
This has to work in responsive mode.
Here my try:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
top: 50px;
right: 0px;
border: 1px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Screenshot:
This is how position: fixed; behaves:
MDN link
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
Hence, to get what you want you have to use something more than fixed positioning:
Probably this:
.wrapper {
width: 100%
}
.container {
width: 300px;
margin: 0 auto;
height: 500px;
background: #ccc;
}
.element {
background: #f2f2f2;
position: fixed;
width: 50px;
height: 70px;
margin-left: 250px;
border: 0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Make the element's parent container have position: relative
Instead of using top or left use margin-top and/or margin-left
If you only use top that will position the element based on the window, but if you use margin-top that will position based on the parent element. Same goes for left or right
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
}
.child {
position: fixed;
margin-top: 30px;
margin-left: 30px;
}
I found the answer to that :
<div class="container">
<div class="inContainer">
<p> coucou </p>
</div>
<div>
<p> other thing</p>
</div>
</div>
You want that class="inContainer" are in class="Container" in fixed position but if you scroll with the navigator scroll you don't want that the class="inContainer" move outside the class="container"
So you can make something like that
.container{
height: 500px;
width: 500px;
overflow-y:scroll;
}
.inContainer {
position: absolute;
}
So class=inContainer will be always on the top of you're class=Container and move with you're class=container if you scroll with navigator scroll =)
(tested only with chrome)
No it's impossible because fixed property throws the element out of the flow so it doesn't depend to anything on the document and yes it is no more contained in your container : )
Yes, you can do it, just use margin-top property instead of top property.
When you use position: fixed and specify a top and or left position,
you'll find that the element will be fixed relative to the window, and
not to any other element of position: relative.
There is a way around this and that is not to specify top and left
positions but instead to use margin-left and margin-top on the
position: fixed element.
Source: https://www.gravitywell.co.uk/latest/design/posts/css-tip-fixed-positioning-inside-a-relative-container/
The behavior of the positioning is mentioned in the AdityaSaxena's answer https://stackoverflow.com/a/18285591/5746301
For creating a fixed position cart, you can also do it with using the jquery.
If we apply the Left or right value or margin, we may face some issue while responsive.
In the below snippet, I have placed the fixed element at the right of the container.
Even if the width of the container increased the fixed element placed accordingly.
Here is the jsfiddle Demo URL
//Jquery
$(document).ready(function(){
var containerWidth = $(".container").outerWidth();
var elementWidth = $(".element").outerWidth();
var containerOffsetLeft = $(".container").offset().left;
var containerOffsetRight = containerOffsetLeft + containerWidth - elementWidth;
$(".element").css("left", containerOffsetRight);
});
//CSS
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:900px;
background:#ccc;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
top:50px;
border:1px solid #d6d6d6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="element">
fixed
</div>
</div>
</div>
Hope this may help you.
Thanks
If you are looking to show the cart even when the user scrolls that is fixed then you should use position:fixed for the cart (if .container is your cart), because it should be shown with respect to screen/viewport. Your current code will only show the element which is positioned absolutely inside the container. If you want it to be like that then give :
.container {
position:relative;
}
.element {
position:absolute;
top:50px;
right:0px;
}
<div style="position: fixed;bottom: 0;width: 100%;">
<div class="container" style="position: relative;">
<div style="position: absolute;right: 40px;bottom: 40px;background:#6cb975;border-radius: 50%;width: 40px;text-align: center;height: 50px;color: #fff;line-height: 50px;">
F
</div>
</div>
</div>
You can just add
.element {
left:368px;
}
Fiddle: http://jsfiddle.net/UUgG4/
I am having troubles to achieve quite an "exotic" layout which is some kind of a "nested" layout where the HEADER and Footer are actually part of the right column (or "frame"):
- Left column - Fixed,Static
- Right column - Fluid/liquid/scrollable
--- Header - fixed
--- left/main fluid/liquid
--- Right/sidebar - fixed
visually it should be something like that :
so basically the yellowish area is static, fixed and always in view.
The green frame is scrollable , and it contains the header, footer and sidebar.
I have searchd all major "css-layout-galleries" sites, but I did not encountered a solid solution yet . (most have the header at the top of the page)
My main problem is to achieve a bulletproof method that will work on ALL major OS & browsers (Firefox 3.6 - 6 , IE 6-9 , Opera , safari > Mac, Win, Linux)
Right now, (as usually expected) IE is always giving me a hard time, although in some layout experiments , also firefox is giving an unexpected different results (between Vr. 3.6 and 5 for example)
I hope someone can point me in the right direction.
This should get you close, with IE 6+ compatibility if you do something like this fiddle.
HTML:
<div class="outer">
<div class="side">
Side content. Fixed width. Floats left with a negative margin.
</div>
<div class="main">
Main content...fills the rest of the width (fluid)
</div>
</div>
CSS:
div.outer {
margin-left: 100px;
background: red;
}
div.outer div.side {
display: inline; /* for IE 6 */
float: left;
width: 90px;
margin-left: -100px;
background: yellow;
}
div.outer div.main {
min-height: 200px;
}
Have you tried something like this? (fiddle) I think that's pretty much what you need.
HTLM:
<div id="left-col">left col</div>
<div id="container">
<div id="header">header</div>
<div id="main">
<div id="sidebar">sidebar</div>
main
</div>
<div id="footer">footer</div>
</div>
CSS:
#left-col {
width: 50px;
position: fixed;
background: yellow;
left: 0;
top: 0;
}
#container {
margin-left: 50px;
background: black;
}
#header {
background: green;
}
#main {
background: blue;
position: relative;
}
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 50px;
background: pink;
}
#footer {
background: red;
}
It's working in FF, Chrome and Opera in Mac. I can't test it in any Windows browser right now, so IE might be a problem here :P Anyway, in case this works, you'll still need to fix left-col's and sidebar's height to be 100% somehow. But before that, you can give this layout a try.
On the webpage I'm working on here, I have a main div, and within the main div, and image div. Roughly speaking, the important HTML is:
<div id="wrapper">
<div id="main">
<div class="images">
<p>Content</p>
<div class="clear"></div>
</div>
<p>Text...</p>
<div class="clear"></div>
</div>
</div>
and the CSS:
div#wrapper
{
padding: 10px;
width: 90%;
}
div#main
{
padding: 5px;
}
div.images
{
float: right;
width: 320px;
margin-left: 5px;
}
div.clear
{
height: 0;
clear: both;
}
Apologies if the cause of the problem is not within the code here, but I think it is.
The problem is, when the images div becomes larges than the content of the main div, the wrapper div loses its left padding; and the bottom padding of main increases. The problem only seems to occur in IE7.
Turns out that giving #main hasLayout does the trick.
div#main
{
zoom: 1;
}
Put this in the IE7 stylesheet, and it's pretty much fixed. Still to large a border at the bottom, but not too important.