I need to display simple under contruction page which has an image let us say 800x700px & i want this image to appear at the center of page both vertically & horizontally,
I tried different approach's but didn't work. Sample html below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body { height: 100%; width: 100%; }
body { position: relative; background-image:url('images/bg.jpg');background-repeat:repeat; }
#mydiv {
position: absolute;
height: 100%;
width: 100%;
text-align:ceter;
}
</style>
</head>
<body>
</body>
</html>
This CSS can center your image regardless of the length.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
The secret is in the transform. Without it, it only puts the top left pixel of the image in the center, not the whole image beautifully.
Check this article out by Chris Coyier on CSS-Tricks. I think it might help out. I ran into the same problem a few days ago and his answer worked for me.
Centering an image horizontally and vertically
Basically the idea is, if your image has a set width and height. You can absolute position it from the left and top 50% and then do negative margins equal to half of the width and height to bring it back dead center. They're are other ways to vertically center an image if it doesn't have set dimensions.
You didn't have the ID set for the div, I have edited that, once that's done, the image will be horizontally aligned. Also, mydiv need not be positioned "absolute".
To vertically align the picture, the best solution without using javascript would be to give the img a margin-top with %.
#mydiv {
text-align: center;
}
#mydiv img {
margin-top: 15%;
}
Related
I need to display an image (and may be some controls near it) at the center (both horizontally and vertically) of the window, while being shrinked to screen height when happens to be bigger (all the images I have are vertical so I don't care about their width).
The underlying content must be hidden with the background.
Code should work in browsers starting from Internet Explorer 8.
I managed to acheive everything but the latter - shrinking to screen height, which I am having problems with.
Here is how I tried to implement it (put in clauses with a resulting code below):
I put everything in a block with fixed positioning and setting 100% to it's width and height - for it to fill the whole window area. Successful.
I use table to center the image vertically, wherefore I set it's height to 100%. Successful.
Inside of the cell I place an image.
3a. When it's height is less then screen size the image is positioned at the center vertically. Successful.
3b. I set max-height to 100% for the image to make it fit into the screen. Unsucsessful! Image pushes the window apart to it's actual height (except of, surprisingly, IE).
Is it possible to solve the task described and what did I do wrong?
(my code:)
view at jsfiddle
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="photoshow">
<table>
<tr>
<td>
<img src="http://s14.postimg.org/e9kwvq2m9/1031_1.jpg">
</td>
</tr>
</table>
</div>
</body>
</html>
CSS:
.photoshow { /* the containing block */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: pink; /* hiding the underlying content */
}
.photoshow table {
height: 100%;
margin-left: auto; margin-right: auto; /* to center horizontally */
}
.photoshow td {
height: 100%;
vertical-align: middle;
background: yellow; /* just for visual indication */
}
.photoshow img {
max-height: 100%;
}
DEMO
.photoshow .big {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:100%;
max-height:300px;
}
I thought I was getting the hang of CSS and had finally conquered positioning! Well I had until I tested my site locally on my ipad!
Using the below example I just want the background to be black (done no problem). On top of the black background I want the green "content-background" to run across the whole screen from left to right (100%) above the black background. On top of the green "content-background" I want the main-container div. I am not sure why but my example is not working? This should be a simple thing to do??? The problem is noticeable when the browser is shrunk from say right to left and then the scroll horizontal scroll bar is moved to the right. When this happens you will see that the green "content-background" does not expand vertically across the whole screen???
Any help is greatly appreciated : )
Fiddle: http://jsfiddle.net/Margate/Sk5X9/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Positioning</title>
<style type="text/css">
#page-background{background-color:black; }
#content-background{position:absolute; top: 100px; width: 100%; height: 616px; background-color: green;}
#main-container{position: relative; top: 0px; width: 1000px; height: 910px; margin: 0px auto; border: 1px solid red;}
</style>
</head>
<body id="page-background">
<div id="content-background"></div>
<div id="main-container">
</div>
</body>
</html>
I took your fiddle and fiddled with it a little bit to get the desired effect that you had mentioned.
without modifying the HTML here is the new CSS
#page-background {
background-color:black;
width: 100%;
}
#content-background {
margin-top: 100px;
width: 100%;
height: 616px;
background-color: green;
}
#main-container {
position: absolute;
top: 0px;
width: 100%;
height: 910px;
margin: 0px auto;
border: 1px solid red;
}
I find that specifying the body width to 100% gives the child divs a proper reference to the screen size and allows the child DIV ( content-background ) to span the length of the screen.
** because the DIV is no longer "absolute" positioned the top, left, bottom and right properties will do nothing. instead use margins to move stuff around.
as for the border DIV -- because it is after the ( content-background ) Div -- putting this in relative positioning will place it after the ( content-background ) DIV -- by specifying this Div as "absolute" you can place it anywhere on the screen provided you set the top, left, bottom and right properties.
I hope this helps guide you in the right direction for future css usage as there are about a million ways that this example can be written :)
I have an iframe embedded inside a fan page of FB, and I want to show a fixed box (like a dialog box) at the center of the screen.
How can I do that?
UPDATE
Look at Work For Us app:
http://www.facebook.com/DiscoverIntel?ref=nf&sk=app_404596412628
When I click in the green button behind (named "Apply for this position") it always shows the "Thank you" dialog at the center of the screen.
I just got the same problem today. The solution is you just need to get scroll position of the viewport from the parent of the iframe which is Facebook URL. So, Facebook has provided JavaScript SDK for it already.
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/
You can use clientHeight, clientWidth , scrollTop and scrollLeft to calculate the center position.
You can't. The iframe fills a div element that's position style is set to relative. It's impossible and for good reason too. What if the center of the screen isn't over your iframe? Facebook doesn't want you doing anything crazy and messing with the presentation of the page itself (i.e. hiding advertisements, making a fake Facebook-looking elements, etc.).
But if you are looking to center an element within the iframe, you can do something like this:
<!DOCTYPE html>
<html>
<head>
<title>Centering an element with CSS</title>
<style type="text/css">
#center_container {
left: 50%;
position: fixed;
top: 50%;
}
#center {
border: 1px dashed #000; /* added to show size and position of element */
height: 100px;
left: -100px; /* -0.5 * width */
position: absolute;
top: -50px; /* -0.5 * height */
width: 200px;
}
</style>
</head>
<body>
<div id="center_container">
<div id="center">This tag is centered.</div>
</div>
</body>
</html>
Otherwise, you will have to stick to using JavaScript's popup box functions: alert(), confirm(), and prompt().
#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.
How do I make it so that #decoration to not occupy space so the vertical scroll bar do not appear.
EDIT:
Check out this link to see what I want. Just in such a way no vertical scroll bar is there.
http://jsfiddle.net/HLqwN/
Using overflow:hidden will clip part of #decoration so that do not work.
<head>
<style>
#wrapper {
width: 900px;
position: relative;
}
#decoration {
position: absolute;
width: 542px;
height: 126px;
top: 0;
left: 660px;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="decoration" src="/images/decoration.png" alt="" title="" />
<div id="content">
Some content
</div>
</div>
</body>
You could set overflow: hidden as the other answers are suggesting.
However, a "decoration" image should not be an <img>, it should be a CSS background-image.
Like this:
#wrapper {
height: 126px;
background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}
See: http://jsfiddle.net/rdSJH/
if it is a decorative image, perhaps you should use it as a background image on the wrapper rather than in HTML source, you can still position it 660px left and it will not then cause a content scroll bar as it's not content.
#wrapper {
width: 900px;
position: relative;
background: url(background.png) no-repeat 660px 0;
}
[update after your clarification]
OK so you want the decoration to overlap the wrapper if there's space available to do so, like a pop-out?
is so try this, fiddle
notes: the span holding the background image should be outside the wrapper, no width on the span use your left co-ordinate and right: 0; or whatever margin from the right you might like, and still use the image as a background image. the span can sit down the bottom of your HTML out of the way
You could use overflow: hidden; on your wrapper
You might want to wrap a div around the decoration image and set overflow:hidden on that. Setting overflow:hidden on your wrapper might cause other content to be clipped depending on your layout.
If it's just a decoration you should try doing it with a background image though, then you don't have to worry about the clipping.
Is it possible to to have:
A patterned body background image for the main page,
Followed by another background image on top of the first one (this time a picture on the
right hand side, on edge of the page)
The content (using semi-trrasparent gif is overlayed across the body background images)
should be scrollable whilst both background images remained fixed.
Ideally css solution without script or hack
Please help as I am loosing my hair and sanity trying to figure how to get this to work.
Many thanks
Del
CSS example for two non-scrolling background images
Some browsers (Safari) allow (CSS3) multiple background images, but since these aren't yet universal, here's my solution.
For a start, you don't need a fixed position div. You can prevent the background image from scrolling by using:
background-attachment: fixed;
Use background-position to put the background top, bottom, center, right, left e.g.
background-position: top right;
And set background-repeat to the setting you want.
The CSS
The CSS below will give you two background images that don't scroll in the page background - set the width of #mydiv to whatever you want (or leave it unset for 100%) and its height to 2000px (just to test the scrolling), and use your image URLs instead of the example:
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
right: 0px; /* or whatever */
background-image: url(div_background.gif);
background-attachment: fixed;
}
The HTML
If you need a complete example, change the background image URLs and use this (obvious) HTML/CSS example as a starting point:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
top: 0px; /* 0 is default for top so remove or make > 0 */
right: 0px; /* or left, whatever you need */
width: 250px; /* or whatever you want */
height: 1500px; /* remove after testing! */
background-image: url(div_background.gif);
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="mydiv">
the div
</div>
</body>
</html>
This probably isn't the most "correct" solution, but you can use a separate background-image for the HTML and body tags. IE
html {
background-image: url('images/bg_repeat.gif');
background-position: top center;
}
body {
background-image: url('images/splatter_top.png');
background-position: top center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
text-align: center;
}
You may do this using a mixture of background images and absolutely positioned divs/images:
the body gets the patterned background
the picture on the side is an image (or a dive with the image as background) that uses fixed positioning (i.e. uses the position:fixed css rule)
the content would be inside a div with the semi transparent gif as background.
I think that it would abtain what you need, everythign is doable in CSS except perhaps the fixed positioning for some versions of IE (namely IE6 and below) as position:fixed is available in IE from version 7 onwards only in "standards-compliant mode" (but this article may help: position:fixed for Internet Explorer)