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.
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 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;
}
I'm trying to develop a 5 part top layout that will work on any browser. Its 5 part because you have the center menu that spans 1024.
Then you have a left and right side of the menu that has some non-repeating images that will run over into a repeating image that I want to go to infinity.
This has proven to be very hard, and I've probably forgotten that it could be impossible...
What I have done is get so close I can almost taste it. If you could look at my code and tell me what's going on with the "right_side" and it's width - it's causing some serious trouble with the scrollbar.
Image of what I'm talking about:
http://i.imgur.com/xertW.jpg
The following is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
.left_stretch{
background-color:red;
z-index:-10;
position:absolute;
top:0px;
left:0px;
width:50%;
height:100%;
}
.left_side{
background-color:blue;
z-index:-5;
position:relative;
top:0px;
right:512px;
width:100%;
height:100%;
}
.center{
background-color:green;
height:500px;
width:1024px;
margin-left:auto;
margin-right:auto;
}
.right_side{
background-color:grey;
z-index:50;
position:relative;
top:0px;
left:512px;
width:100%;
height:100%;
}
.right_stretch{
background-color:orange;
z-index:-10;
position:absolute;
top:0px;
right:0px;
width:50%;
height:100%;
}
</style>
</head>
<body>
<div class="left_stretch">
<div class="left_side"></div>
</div>
<div class="center"></div>
<div class="right_stretch">
<div class="right_side"></div>
</div>
</body>
</html>
And then I'm of course worried that ie 7 and ie 6 is messing things up... But I just want to solve this first...
Any hints at all?
Realized that i can jsfiddle your code, so i tested it.
It's your <div class="right_side"></div> whats causing it.. its just basically hanging in there.. creating the space.
I'm not really sure why the structure is like this so im not gonna give any hints as far as fixing it goes. ..unless you want a quick fix.. which is to delete that element :D
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.