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.
Related
In this fiddle I want to create a footer that stays at the bottom of the page, as in this screenshot:
However, when the browser window is minimized so that the viewport is less than the content area, and the page is scrollable, the footer stays in the middle of the page rather than below the content. Once a user scrolls, the footer stays in the middle of the content boxes, like in this screenshot:
How do I create a footer that stays at the bottom of the viewport when there is no scrollbar, but then stays at the bottom of the content boxes when a scrollbar appears and content is outside the viewport?
I am using position:absolute; bottom:0; on the footer. Do I need to add declarations to my content box, or to the footer? Thanks for your help!
There are a lot of attempts to do this via CSS, most are hacky workarounds, and honestly its WAY easier to do with Javascript. But for pure CSS, it usually goes something like this:
1) Setting * to border-box:
* {
-webkit-box-sizing:border-box;
-moz-bos-sizing:border-box;
box-sizing:border-box;
}
2) Set footer to position:absolute, with fixed height:
#footer {
position:absolute;
left:0;
right:0;
bottom:0;
height:40px;
}
3) Set html,body, and your container to height:100%, min-height:100%, and your container position to something other than static, and padding-bottom to whatever your footer height is + a little gap (if you want):
html,body,#container {
height:100%;
min-height:100%;
}
#container {
position:relative;
padding-bottom:50px;
}
This should handle it decently well for IE8 and above. For IE7 and below ... well that gets pretty damn tricky, you can google that one if you'd like. :) Some notes:
The box-sizing declaration is needed to ensure height of 100% includes padding (otherwise it would just be 100% plus the padding you gave it).
when position:absolute is used on a child element, position other than static must be declared on the parent for the childs position to be relative to the parent, otherwise it will be the first parent up the DOM tree with position other than static (in this case, it will just be the window).
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.
In Microsoft's homepage (http://www.microsoft.com/en-us/default.aspx) you see the white background stretch all the way to the bottom and the sides in grey?
How do you that in an HTML/CSS? I mean, I've been trying but the DIV won't go all the way down...
Help?
Well, their page has enough content to force the page to scroll. Like this
If you don't have enough content, you can set the height of the div to 100%. The important thing to note here is that it will be 100% of its parent's height. That's why you have to set the html and body heights to 100% as well. DEMO
html, body {
height: 100%;
}
#contentDiv {
height:100%;
}
HTML
<body>
<div id="contentDiv">my content here</div>
</body>
You must make sure that the body and html file has 100% height aswell, cause 100% is what it gets from the current height of the parent element
so if you set, and html's parent is the window(document) that's why you get a full height
html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}
you will get a red page
Set the height to %100 and sometimes setting the parent element to position:relative will set things straight. Post your html and css and we could help you better.
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.