Can someone please tell me, i am using a cover to create a (white) blackout effect on page load, below is the css I'm using. Is there a way i can stop the mouse scroll being able to move the page in the background up and down?
#cover {
display:none;
position:absolute;
z-index:999999;
left:0px;
top:0px;
width:100%;
height:2648px;
background-color:#fff;
filter:alpha(Opacity=50);
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7
}
Solution would probably be to add "overflow: hidden;" to you body, while page is loading, and remove it on page load.
The problem is that you are using Height:2648px which of course is higher than most screens and therefor creating the scroll.
You can fix this by using
CSS
#cover {height:100%;}
Overflow Method
#cover {overflow:none;}
Additional I'm not sure why the height is 2648px in the first place but if your having aspect ratio issues with overflow or height:100% use media queries to fix on devices that are having problems.
Related
I am developing a webpage which carries an iframe inside a div. I cannot make the iframe strech across full width of its parent div even after making width 100% in CSS.
I am doing something wrong. Please have a look at this:
http://jsfiddle.net/JTHN8/
This is my iframe CSS:
position:relative;
margin-left:0%
width:100%;
height:100%;
What I want is iframe should have about 80% of width of its parent div.
I hate to admit how stupid I was in omitting that semicolon after margin-left!
Fixed CSS:
position:relative;
margin-left:0%;
width:100%;
height:100%;
A thing to learn though; If you skip a semicolon in CSS, only the next line will be skipped. Lines beyond that still work.
I realise this question has been asked multiple times in differently worded titles and options, but i have yet to find something that works for me.
Im trying to have an img fill most of the screen (keeping its aspect ratio) without overflowing the edges. (Basically what the firefox browser accomplishes when viewing an image)
Most that i've tried either works in only one direction ie. width will resize but will end up overflowing the height and the same for the other way, either with CSS or JScript. Also playing a factor in my trouble is that i want to aplly this to both portrait and landscape images (More or less any image i have on the site)
This seems like it should work using pure CSS but doesnt (im not completely knowledgeable in all CSS though):
Link to JSFiddle
body, html {
margin:auto;
padding:6px;
height:100%;
width:100%;
}
img {
max-width:100%;
max-height:100%;
}
There are a hand full of other scripts as well, but this post is getting a bit long.
Could anyone help me out containing my images within the screen, with either JQuery or CSS (within or without a DIV)
Thanks in advance,
Try this jQuery plugin: TailorFit
and check out the demo.
You can play around with various options in the demo to figure out if this could work for you. The browser support is extreme because it only uses jQuery and relative positioning.
Full disclosure - I'm the author of the plugin.
Now define your html, body height 100%;
as like this
body, html {
height:100%;
}
MY ANSWER:
I ended up just wrapping the image in a div and setting the div dimensions in CSS:
PURE CSS Resize
Unfortunately this method may look quite horrible in older browsers but it has atleast got me out of a pickle and its a tiny piece of styling.
Hopefully i can find some jQuery alternative soon.
body, html {
width:98%;
height:98%;
}
.outer {
position:fixed !important;
position:absolute;
margin:auto;
text-align:center;
top:10px;
right:0;
bottom:10px;
left:0;
}
img {
max-width:100%;
max-height:100%;
padding:4px;
background-color:#fff;
}
----
<div class="outer">
<img src="whatever.jpg" />
</div>
I am currently working on a website which was all going well until the css now thinks that the bottom of the page, even though i have positioned the image with
position:absolute;
bottom:0px;
is actually about 100 pixels above the bottom! I can't figure it out and my only answer could be because of how I am repeating things across the layout.The site can be found at SemaphoreDesign The paste bin for the style sheet is here And for the HTML go here I really cannot figure out why the header and the endside are not at the bottom of the page and why there is a scroll bar.Thanks
you can do a fixed position for these 2
#endside {
width:100%;
float:left;
height:112px;
position:fixed;
bottom:0px;
overflow:hidden;
background-image:url(images/main_09.png);
z-index-2;
}
#footer {
width:915px;
margin: 0 auto;
background-image:url(images/main_10.png);
height:112px;
position:fixed;
bottom:0px;
z-index:11;
}
Mostly likely you're scrolling down when you see the problem?
You should be using position:fixed if you want it to not move when the user scrolls.
The reason you're getting a scrollbar in the first place is because you set your "content" <div> to height:100%, which means 100% of the window height. Since there's other elements the height exceeds the window height.
Something like this might help:
HTML: http://pastebin.com/H0EauYeu
CSS: http://pastebin.com/mbV44Jef
I don't think you want to use position:fixed. This site has good CSS for footers you can copy:
http://www.cssstickyfooter.com/
So, maybe I just suck at searching, but I'm having real trouble finding a method to do this, so here goes...
I have a webpage with a fixed image background (tiled, non scrolling).
I now want to have a colored div on top of that (700px wide, 100% height, centered) that I can then put more content within (doesn't necessarily have to be a div, I just want a colored area in the center.)
Here's an image of what I'm working towards: http://bit.ly/g5qgj0
The lightly colored area (on top of which lies everything else) is what I'm trying to achieve.
Thanks in advance, I'm still getting to know HTML/CSS and this has been driving me crazy XP
html, body{
margin:0;
padding:0;
height:100%;
}
body{
background:transparent url(...) repeat 0 0;
}
div{
margin:0 auto;
width:700px;
height:100%;
background:white;
}
Check working example at http://jsfiddle.net/TGt4A/
I think your most foolproof way to do this is going to involve Javascript/jQuery, which I did in JSFiddle. You might want to add a CSS min-height on that #container as a fallback if Javascript is disabled or whatever.
I am trying a fullscreen background which must be clickable. So far i got this going.
But now i have put some div's on top of the background and the background isn't clickable just the part not covered by div's works.
Here is my stripped source
<div id="page-background"><img src....</div><div id="wrapper">here bunch of div's</div>
here's my css
html, body {height:100%; margin:0; padding:0;}#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}#wrapper {position:relative; z-index:1; padding:10px;}
Try using jQuery live() method which supports click event propagation: http://api.jquery.com/live/#typefn
Also, here's a nice article about event bubbling, maybe that helps as well:
http://www.quirksmode.org/js/events_order.html