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.
Related
Hello and thanks in advance for the help :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
</style>
</head>
<body>
<div id="bg">
<img src="images/bck.png" >
</div>
</body>
</html>
I need some help to get it similar to the background that you find on this website: http://hotdot.pro/en/
As you can see I managed to make it resize accordingly but i don't get the best results with the horizontal scroll bar(for now it is ok if the bar is displayed).
The idea is that the width is 3 times larger than the height and I was thinking to achieve this with overflow-x: auto and overflow-y:hidden as shown in the example from the second row, 6-th column on these website: http://www.brunildo.org/test/Overflowxy2.html
So thank you in advance and feel free to make changes to the code because I really understand better by example.
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.
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;
}
basically i'm trying to set a footer to the center but when i zoom in / out it moves
this is my code:
div#footer {
font-size:16px;
text-align:center;
position:absolute;
bottom:0;
}
You could try setting either the margins or padding for both the left and right to :50%
You could try positioning your footer absolutely relative this is useful css trick for positioning page elements and making then stay where you put them no matter what.
Basically what you want to do is wrap your footer in a relatively positioned div then make that div 100% wide then absolutely position your footer inside the relatively positioned div, this should make your footer stay exactly in the centre of the screen no matter how the screen size changes.
As this concept is a little abstract to explain I've created some simple demo code to demonstrate what you will see is a pink box positioned in the exact centre of a blue box and no matter how you change the screen side the pink box always stays in the centre of the screen you can zoom in or out you can change the size of the window it doesn't matter hope this helps.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>absolutely relative positioning demo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.wraper
{
height:200px;
width:100%;
position:relative;
background-color:blue
}
div.content
{
height:100px;
width:100px;
background-color:pink;
position:absolute;
left:50%;
top:50px;
margin-left:-50px
}
</style>
</head>
<body>
<div class="wraper">
<div class="content"></div>
</div>
</body>
</html>
I've been writing a small notice board site in ASP.NET and nothing i do will make it work properly in IE6. The main page has a header DIV, with the content region below it. Within this region are three further regions, a search facility in the top left, a list of notices below it, and the currently displayed notice to the right of these two. The search and notice list regions are 240px wide, and the displayed notice region takes up the rest of the width. The problem is that the notice list and displayed notice regions should both scroll if the content is bigger than the displayed area (i.e. overflow:auto style) but this doesn't happen in IE6. Everything else displayes fine. The layout is as follows:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Notice Board</title>
<style type="text/css">
body
{
margin:0;
border:0;
padding:0;
height:100%;
max-height: 100%;
overflow: hidden;
}
#header
{
position:absolute;
top:0;
left:0;
width:100%;
height:130px;
overflow:hidden;
}
#footer
{
position:absolute;
bottom:0;
left:0;
width:100%;
height:0px;
overflow:hidden;
}
#content
{
position:absolute;
top:130px;
left:0;
bottom:0px;
right:0;
overflow:hidden;
}
* html body
{
padding:130px 0 0 0;
}
* html #content
{
height:100%;
width:100%;
}
#leftdiv
{
position:absolute;
left:0;
width:240px;
top:0;
height:100px;
overflow:hidden;
}
#listdiv
{
position:absolute;
left:0;
width:240px;
top:100px;
bottom:0px;
overflow:auto;
}
#noticediv
{
position:absolute;
left: 270px;
right:0;
top:0;
bottom:0;
overflow:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server" method="post">
<div id="header" >
<!-- Header content goes here -->
</div>
<div id="content">
<div id="leftdiv">
<!-- Content region for the search facility goes here -->
</div>
<div id="listdiv">
<!-- Content region for the notice list goes here -->
</div>
<div id="noticediv" >
<!-- Content region for the displayed notice goes here -->
</div>
</div>
</form>
</body>
</html>
Any ideas?
For a DIV to scroll it must have at least a height and/or a width specified, depending on which dimension you want it to scroll through. Some browsers (eg Firefox) will infer a height if given both a top and bottom value. IE6 will not, however.
If you are still stuck with supporting IE6, then a lot of CSS issues are resolved by using Dean Edwards' IE7 scripts -- I've not faced this particular problem, but have been able to take designs from more compliant browsers and have them "just work" using these scripts. With the magic of IE conditional comments, you can just serve the fix-ups to those people still stuck with browsers that are 2 versions behind current.