I have this html:
<section id="contain">
<canvas id="canvas-1" class="subcanvs"></canvas>
<canvas id="canvas-2" class="subcanvs"></canvas>
</section>
and this CSS:
#contain{
position:relative;
background:red;
}
.subcanvs{
position:absolute; /*pay attention to this line*/
width:100%;
}
When the two canvases are absolutely positioned and stacked,the container turns white.
When I remove absolute positioning, everything works out okay and it all goes the correct color with the background being red and the canvases being transparent, as they should be.
So how do I make two canvases stack AND make them both stay transparent?
Your container is collapsing and taking your canvases with it!
Make sure you define at least width and usually height in container objects.
This code works in IE, Chrome and Mozilla:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
#contain{
position:relative;
background:red;
border:1px solid blue;
width:500px;
height:300px;
}
.subcanvs{
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<section id="contain">
<canvas id="canvas-1" class="subcanvs"></canvas>
<canvas id="canvas-2" class="subcanvs"></canvas>
</section>
</body>
</html>
Due to the very helpful answer by markE, I discovered what was going wrong with my design.
In light of this, I discovered another way to deal with it using CSS3.
#contain{
position:relative;
background:red;
}
.subcanvs:first-child{
position:static;
}
.subcanvs{
position:absolute;
left:0;
width:100%;
}
This will make all the canvases line up nicely on top of eachother if they are all the same size. I'm not sure of browser compatibility on this one.
Related
I have a canvas element inside a div element. The canvas size can change, and I want it vertical centered. I'm using this CSS approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
You can see it working on this fiddle: http://jsfiddle.net/8FPxN/
This code works great for me, until the browser resizes under the canvas width. The virtual element defined by the :before selector stands on the first line, and the canvas falls to the second line. I'm trying to keep them sticked, avoiding the line break, and showing scroll bars when needed. Adding the overflow:auto rule to the container shows the scroll bars, but the line keeps breaking.
The canvas size can change, so the top:50%; margin-top:- ($canvas_height / 2); approach is not suitable for this. Well, it can be, but I prefer not to control the margin-top using JavaScript. Just CSS would be great.
Any ideas? Thanks!
It seems (from limited testing) that adding white-space: nowrap; works:
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
white-space: nowrap;
}
Updated JS Fiddle demo.
Adding white-space:nowrap should do the trick. http://jsfiddle.net/David_Knowles/aEvG5/
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
}
EDIT: correct fiddle
I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#header {position:fixed; height:100px; top:0px; left:0px; right:0px; background:black; color:white;}
#overlay {position:fixed; bottom:100px; top:100px; left:0px; right:0px; overflow:auto; background:gray;}
#footer {position:fixed; height:100px; bottom:0px; left:0px; right:0px; background:black; color:white;}
body {overflow:hidden;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="overlay"><?php for($c=0; $c<100; $c++) echo '<p>overlay</p>'; ?></div>
<div id="footer">footer</div>
<?php for($c=0; $c<100; $c++) echo '<p>background</p>'; ?>
</body>
</html>
Basically when you load this for the first time, you should see a gray area and black footer and header. You can scroll the page to either the top end or bottom end, and you will always see ONLY the gray area and black footer. The white background beneath these areas will never be exposed. This works great in desktop browsers.
I have a problem with this code on android native browser. When the page first loads, things work as expected. But when you scroll to the bottom, the browser address bar hides itself, and then the white background shows up as a gap between the gray area and the black footer. How do I prevent this white background from showing up?
There is a common issue with Android browsers which sounds rather similar. Check out this question and see if it helps.
Below is a simple code in which I have implemented multiple background images to body, but this code does not work in IE 7 and 8 whereas it works in all other browsers. I have used PIE.htc which is relative to the html document,but still no success. Please help me to solve this example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body style="background: url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; behavior: url(http://localhost/mutliple_bg/PIE.htc);
-pie-background:url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; position:relative; zoom:1; z-index:1;">
</body>
</html>
Sorry hasty read of your question, just noticed your using pie.
PIE doesn't support multiple backgrounds on BODY element;
Solution: create div container for body.
Multiple backgrounds are only supported by IE9 and above.
use div positionrelative and absolute
i think this is the easy way to fix cross browser problem hope it help...
click here for working fiddle
html
<div class="parent">
<div class="colorLeft"></div>
<div class="contentArea"></div>
</div>
css
.parent {
float:left;
width:100%;
height:200px;
background-color:#555;
position:relative;
z-index:1;
}
.colorLeft {
width:50%;
float:left;
height:200px;
background-color:blue;
position:absolute;
z-index:-1;
}
.contentArea {
width:400px;
background-color:#fff;
height:180px;
margin:10px auto;
}
I have a setup requiring a div filling 100% of the screen with a margin of 10px. Inside that, there is a navigation pane at the top followed by a content div below with a padding and an inner content dive with a padding. However, using the 100% height of parent and then adding a margin/padding stretches the div to 100% + margin + padding. Is there a fix for this? I noticed the absolute positioning trick, but that messes up the flow of the other divs if I absolutely position my content div. It also makes the resizing and flow non-liquid. Any way to keep those things and still achieve my goal, preferrably with CSS and not javascript?
Code Below:
ASPX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="wrapper">
<div id="navigation">
</div>
<div id="content">
<div id="inner">
</div>
</div>
</div>
</body>
</html>
CSS
html, body
{
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:Black;
}
#wrapper
{
height:100%;
margin:10px;
background-color:Blue;
}
#navigation
{
height:100px;
background-color:Green;
}
#content
{
height:100%;
padding:10px;
background-color:Orange;
}
#inner
{
height:100%;
width:100%;
padding:5px;
background-color:Lime;
}
You can try adding box-sizing:border-box onto any elements which you want to have 100% height and padding at the same time.
Works in IE8+ and the good browsers, so browser support is actually quite good
http://css-tricks.com/box-sizing/
You can try two things...
1) changing the height of the wrapper, navigation, content and inner to something like 98%.
2) try adding a transparent 1px solid border to the wrapper and other elements. This often shifts the margin to margin relationship of elements.
Hope this helps
I'm having a CSS problem in IE8. The full height of .test_div is not showing when I add an opacity in #header. But the full height of .test_div will show when I remove the opacity.
This works in Chrome and Firefox, but not in IE8. Am I doing something wrong?
Thank you!! :)
The code is also here:
http://jsfiddle.net/VPkXu/
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header">
<div class="test_div">test square</div>
</div>
</body>
</html>
CSS:
#header {
position:absolute;
z-index:10;
height:100px;
width:300px;
background: #888;
/* remove the lines below, the full height of .test_div will be visible (IE8)*/
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
}
.test_div {
background:#CCC;
height:500px;
width:200px;
}
easiest way would be to take out this div from inside of #header
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header"></div>
<div class="test_div">test square</div>
</body>
</html>
and apply position and z-index to .test_div
.test_div {
z-index: 11;
position:absolute;
}
see http://jsfiddle.net/7aXJD/