FadeIn!
<div class="midbox" id="example" style="display:none;">
Lorum ipsum<br>
<br>
[Close]
</div>
.midbox{
display:block;
position:absolute;
top:50%;
left:35%;
padding: 8px;
}
I've searched through many topics on Google and here on Stackoverflow, but i can't seem to find my answer.
I put the midbox classes just before the end of the body tag (</body>). Now i click on this link to fade the box in, but it isn't showing up in the middle, it shows up without the css i gave it and at the bottom of the page.
Why is it doing this? Can you guys help me?
Thanks.
Here you go:
.midbox{
display:block;
position:absolute;
top:50%;
left:50%;
width:600px;
height:400px;
margin-left:-300px; /* half of width */
margin-top:-200px; /* half of height */
padding: 8px;
}
DEMO
As you can see in this example, your script is working.
Note that your midbox element is positioned absolute, butabsolutely positioned elements are positioned relative to the first parent that has a position different than static.
This case is shown here.
Please check if this is not your case.
Hope this helps!
Try putting this code in the css
body, html{
height:100%;
width:100%;
}
Put the styles in the head of the page:
<head>
<style type="text/css">
<!--Your styles here-->
.midbox{
display:block;
position:absolute;
top:50%;
left:35%;
padding: 8px;
}
</style>
</head>
or better create an external css file and link it to the html file.
<link rel="stylesheet" type="text/css" href="path/to/your.css">
Related
earlier it was good but now when I put width and height 100% it doesn't really displays 100% instead a 10 px margin come on all four sides
here's what I tried
<html>
<head>
<style>
.cont img {
display: inline-block;
width :100%;
height : 100%;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
</html>
what can I do to make it 100% with in any browser?
have a look at this code, set margin:0px on body tag
<html>
<body style="margin:0px; ">
<div style="background-color:red; width:100%;">
hello
</div>
</body>
</html>
Question is not 100% clear, but are you looking for a solution like this?
.container {
height:100%;
width: 100%;
border: 1px red solid;
margin:0;
padding:0;
line-height: 0;
}
.container .imgmy{
height:100%;
width: 100%;
margin:0;
padding:0;
}
Are you sure it was good earlier?
The margins around the image have nothing to do with the image itself.
Browsers define default styles in a so called User Agent Stylesheet. In this case, the white border is the 8px margin (that is in Chrome) on the body.
Luckily you can easily override these user agent stylesheets, and you should in this case.
You can add margin:0 to the body, as mentioned above by Shreya.
But to avoid similar 'errors' it is a good idea to include a reset.css or normalize.css. These files "make browsers render all elements consistently and in line with modern standards" (http://cdnjs.com/libraries/normalize). You don't have to write one yourself, others have done this for you, like Nicolas Gallagher: http://necolas.github.io/normalize.css/
Read more about User Agent Stylesheets here: What is user agent stylesheet
Assuming HTML
<body>
<div class="cont">
<img src="IMG_5913-2.jpg" class="imgmy" name="imgmy">
</div>
</body>
CSS
.cont img {
max-width: 100%;
max-height: 100%;
}
I'm trying to show an image, where when you zoom in on a particular spot, it should display that particular area completely on the screen. I created a fiddle. I want to view the image to be of the same resolution as shown in fiddle, but when I zoom in, the magnified zone of the picture should fill the entire original picture frame.
Below is the code :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<style>
/* styles unrelated to zoom */
body {
background-color: black;
margin:0 auto;
}
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
background-color: black;
z-index:1000;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:50px;
height:50px;
position:relative;
top:50;
right:70;
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex3 img:hover { cursor:-moz-zoom-in; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='js/jquery.zoom.js'></script>
<script>
$(document).ready(function(){
$('#ex3').zoom({ on:'toggle' });
});
</script>
</head>
<body>
<center>
<span class='zoom' id='ex3'>
<img src='images/cg_layout.jpg' width='918' height='655' alt=''>
</span>
</center>
</body>
</html>
EDIT
The above code works fine in zooming in a particular place now, when I click on view image in Firefox, I can see zoom work there also, and it works perfectly as I want it. What can I do to make zoom work like as in view image.
EDIT1
Now when I click on view image in Firefox, I can zoom this image. When I click the zoom the image the class changes from shrinktofit to overflowing. When I do the next click the image zoomouts from overflowing to shrinktofit. Now how can Get this feature embedded with my image
Here's another variation of the zoom, it's not click but directly hover (A build off of what Hardik did).
http://jsfiddle.net/4CHj2/1/
You can also different examples used here:
http://www.jacklmoore.com/zoom/
Note that there is an external resource hosted on Drive that Hardik attached to his fiddle.
With that code, you are free to test any example on the site as is.
Good Luck!
In all browser I use the following css rules, and it works
// it fits the background image to container
background-size: contain;
background-size: cover;
Are there css rules to make it work in IE8 also, or should I use javascript?
In case of javascript I am using jquery.
What is the best way to active my goal?
I had also the same problem but by going through this below link my problem solved
http://css-tricks.com/perfect-full-page-background-image/
There's a jQuery plugin or this javascript fallback with filter
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
Check the same page for more cross-browser methods
you can do it like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" />
<div class="frame">
<div class="contents">
page contents
page contents
page contents
page contents
page contents
</div>
</div>
</body>
</html>
css:
html {
background:#000;
}
html, body {
padding:0;
margin:0;
overflow:hidden;
height:100%;
}
.bgimg {
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
.frame {
color:white;
width:100%;
height:100%;
overflow:auto;
}
.contents {
padding:10px;
}
demo site: http://jsbin.com/enevov/1/edit
you can achieve different effects by changing
width:100%;
height:100%;
on .bgimg, to accomplish different effects, depending on whether you want a distortion or not, for instance just width: 100% will make it touch across the top, etc...
hope this helps -ck
This works for me to stretch image on full window in IE8
http://css-tricks.com/perfect-full-page-background-image/
<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?
The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>
Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
This is a simple question with what should be a simple answer but I don't know how to do it.
Well, use this code:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
min-width: 710px;
max-width: 710px;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
How do you get #backdrop to center on page load and stay centered on the page when you resize? (until you resize to less than 710px wide, then the horizontal scroll bar would appear)
Knowing this information would improve the layout quality of my page immensly and I could probably do it if I had a more adept knowledge of javascript and jQuery... but I don't yet.
If all you need is to have the #backdrop div centered horizontally, there is no need for javascript. The whole thing can be achieved through CSS.
#backdrop{
display:block;
width: 710px; //just specify the width. no need for min-width or max-width if this is not meant to change.
margin: 0 auto; //this will center the div in its container
}
You don't need javascript to do this, just try:
<html>
<head>
<style type="text/css">
body{
min-width: 710px;
}
#backdrop{
width:710px;
margin:0 auto;
}
</style
</head><body>
<div id="backdrop">
</div>
</body></html>
[EDIT] This was already answered on stackoverflow: How to align a <div> to the middle (horizontally/width) of the page
I'm not really sure about what you want, but:
#backdrop{
width:710px;
margin: 0 auto;
}