I'm centering my canvas using this code:
position:absolute;
top:50%;
left:50%;
margin-top:-200px; /* Half of canvas height */
margin-left:-275px; /* Half of canvas width */
It works perfect in all browsers except for IE9 and 10. In Internet Explorer, it covers the whole page. Is it possible to support the centering the canvas in IE?
Centring using margin: 0 auto; with display: block; works in almost all browser - the ones that support <canvas> for sure.
Live example: http://jsbin.com/ovoziv/2
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Centring Canvas</title>
</head>
<body>
<canvas></canvas>
</body>
</html>
CSS
canvas {
display: block;
background: #FFFFB7;
width: 550px;
height: 400px;
margin: 0 auto;
}
EDIT: Updated answer to center vertically too. This CSS will do the trick:
canvas {
background-color: #FFFFB7;
width: 550px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -275px;
margin-top: -200px;
}
Now the explanation. We first place the canvas with 50% offset from the top and left-side using position: absolute by setting top and left to 50%. Then, because your canvas has a static size, we add a negative margin (which you should never do when the element is not absolute positioned) for half of the width and size (550x400/2 = 275x200): margin-left: -275px; margin-top: -200px;.
The canvas will now be displayed at the center of the screen. If you do this inside another element and want to center in that one, try adding position: relative; to that element, so it will use it's bounds instead of the body's.
Live example here: http://jsbin.com/ovoziv/6
Related
I have a little problem with my responsive design. I am using a normal <footer> with this style.
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
It works fine and when I am using a smaller screen I have to scroll, that's normal.
The problem is that the <footer> is not at the bottom. It is in the middle of the screen. Like margin-top: 100% of the full screen, without scrolling.
I hope you understand what I mean.
Thanks!
Make Position fixed, This may look something like this
footer {
width: 100%;
height: 20px;
position: fixed;
bottom: 5px;
left: 0;
}
The idea is to position the element fixed to the bottom. Set the bottom offset with bottom or margin-bottom parameters.
You could go with this:
footer {
position:fixed;
height:20px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
I hope I get your problem correctly. Your problem is that the footer is at the middle of the screen when there is little content in that page, right?
To solve the problem, you should make the parent element take up the full screen. For example,
<head>
<style>
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
body {
min-height: 100%;
}
</style>
</head>
<body>
<div>
some other content
</div>
<footer>
Some content inside footer
</footer>
</body>
Or if you don't mind the footer is always visible at the bottom of the screen, use position:fixed . Then you don't need to consider the height of the parent element.
Ok...here is my problem:
I have a webpage with html & body set from css to:
body,html{
position: fixed;
width: 100%;
height: 100%;
overflow:hidden;
}
and also a webkit tag to disable the scrollbar:
/*Disable scrolling*/
::-webkit-scrollbar {
display: none;
}
inside of the body i use 3 divs to cover the entire available space in the page:
(i will not use the actual css code for the divs because it's unimportant for this matter and i will write only a basic code to get the ideea)
As i said, three relative divs to cover the available 100% height and width:
.div1{
position: relative;
width: 100%;
height: 10%;
}
.div2{
position: relative;
width: 100%;
height: 80%;
}
.div3{
position: relative;
width: 100%;
height: 10%;
}
Now here is my problem:
* inside the middle div (div2) i have 4 concentric circles all of which are absolute divs wrote in css3. It is really important that these divs remain "absolute".
here is the css for them:
.size-large,
.size-normal,
.size-small,
.main-frame{
position:absolute;
left:0;
right:0;
margin:0 auto;
background: transparent;
border: 3px dotted #999;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
top: 50%;
}
.main-frame{
width: 50%;
padding-bottom: 50%;
margin-top:-25%; /* push back half */
}
.size-large{
width: 30%;
padding-bottom: 30%;
margin-top:-15%; /* push back half */
}
.size-normal {
width: 20%;
padding-bottom: 20%;
margin-top:-10%; /* push back half */
}
.size-small {
width: 10%;
padding-bottom: 10%;
margin-top:-5%; /* push back half */
}
Problem is that those circles does not resize acording to the relative div of which they belong.
Their width/height given in percentages, is set acording to the body element.
I want my design to be liquid and to use only the available webpage without scrolling but also to resize all it's elements on any display.
FULL SCREEN RESULT: http://jsfiddle.net/Nn7mU/1/embedded/result/
CODE VIEW: http://jsfiddle.net/Nn7mU/1/
From my understanding, you want to ensure your concentric circles to stay within the blue div whilst maintaining a perfect round circle according to the percentage width you have set (i.e. .main-frame {width: 50%}, .size-large {width: 30%), .size-normal {width: 20%}, .size-small {width: 10%})
Your circles are indeed adjusting according to your blue div (based on width % not height %). So since your blue div has width=100%, the circles will adjust according to that only.
You will need to find a way of using BOTH height and width % so it maintains aspect ratio and central positioning.
I would recommend reading on this thread which provides possible solutions:
HTML and CSS Fluid Circle
I have a white page with only a 500x250 textbox and an image. The page is fluid.
I'm trying to center the textbox at the center of a page, while having a picture fixed to the bottom left of the screen. I partially achieve this with the following css:
.bottom-right { /* used to fix the image to the bottom of the screen */
bottom: 0;
right: 0;
position: fixed;
}
#content {
margin-left: auto;
margin-right: auto;
margin-top: 50%;
width: 500px;
height: 250px;
position: relative;
}
When I vertically resize the window, the image covers the textbox. I would instead like the text to go up.
If I've understood your question correctly, you need to have the "textbox" always over the image that's fixed on the bottom-right corner.
See this working Fiddle Example!
CSS
#content {
width: 500px;
height: 250px;
position: absolute; /* this is the key */
z-index: 1; /* this is the key */
left: 50%;
top: 50%;
margin: -125px 0 0 -250px;
}
CSS position:absolute;
What this does is to place the element #content outside the normal document flow, thus not being affected by other elements or having impact on the layout of later siblings.
CSS z-index:1;
What this does is to move the element up on the document stack, thus placing it over others with a lower value (the default stack level is 0).
See the CSS absolute and fixed positioning - W3C Wiki for further details.
Two options I can think of:
Use CSS media queries and if the viewport is less than a certain height then change the textbox height or position so the image doesn't cover it.
Set a min-height around the parent div and once its less than a certain height, show a vertical scrollbar.
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}