I'm trying to build a stylesheet that prints only a specific image, and sizes the image to cover the entire page.
In my media="print" stylesheet, I have:
#page {
margin: 0.5in;
}
body {
width: 100%;
}
body * {
visibility: hidden;
}
#specificimage {
visibility: visible;
position: fixed;
top: .5in;
left: .5in;
width: 7.5in;
height: auto;
}
The html structure is similar to this:
<body>
<div>
<div>
<div>
<img id="specificimage" src="image.png" />
</div>
</div>
</div>
</body>
It prints fine in Firefox 19, but that is the only browser I've tested that works correctly. IE 9 doesn't show anything; Safari 5.1.7 (PC) shows only a sliver of the image on the left side of the page; Chrome 25 shows the full image, but in a small portion of the page.
Anyone know of anything else I can try?
As Diodeus notes in the comments, the visibility of any given element doesn't matter if its parent is not displaying — in fact in many browsers the resource won't even be loaded.
I would propose these changes:
* {
background: none !important;
direction: ltr !important;
display: none !important;
font-size: 0 !important;
height: 0 !important;
line-height:-9999 !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
text-indent:-9999em !important;
width: 0 !important;
white-space:normal !important;
}
html, body, div, #specificimage {
display: block !important;
}
#specificimage {
left: 0 !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
}
The * rule is pretty heavy, but makes sure that:
The size (or number of pages, because of a page structure taller than one page) will not be influenced by metrics, which is influenced by border, height, margin, width;
Text immediately inside a div is not visible: negative text indent, forced direction of left to right, plus zero font-size and forced wrapping via white-space: normal mean it will be hidden out to the left and won't extend the width. a negative line-height means it will be hidden off to the top too, and won't extend the height (or number of pages) if it's extremely long.
Position: static means left, right, top or bottom won't extend the page canvas more than it needs.
The important rule is there because whatever rules giving any of these properties to your elements in the first place will always be stronger. Without making assumptions about the document structure, we have to apply this override. If you need to make this trump more specific class and selector-based rules with !important specified, you can append :nth-child(n) to the asterisk any number of times, but this won't help against inline styles or rules with ID selectors that also have importance toggled.
Related
I'm trying to make a picture menu that when clicked has the other options slide away and show the entire image of the option clicked.
The images are lined up and I'm using overflow hidden to hide the parts that I don't want shown until their clicked.
The animation works fine but if the browser window is larger then the image width then it leaves white space where the image runs out of room. I can set the image to a new width during the transition but it makes the transition look strange as the size of the image is changing too which I don't want.
Is there a way to set something to the size of the window even if its container isn't that size?
http://jsfiddle.net/539Y9/ -
A basic jsfiddle is here. Its harder to tell since I don't have images and you'll probably need to look at dev tools to see the size of the divs but I want those divs to be 100% and hidden by its parent container.
HTML:
<div id="imageMenu">
<ul>
<li class="imageMenuItem"><div id='image1'></div></li>
<li class="imageMenuItem"><div id='image2'></div></li>
<li class="imageMenuItem"><div id='image3'></div></li>
<li class="imageMenuItem"><div id='image4'></div></li>
</ul>
</div>
CSS:
#imageMenu ul {
list-style: none;
padding: 0;
margin: 0;
}
#imageMenu li {
text-decoration: none;
float: left;
width: 25%;
z-index: 0;
}
#image1 {
width: 100%;
height: 25px;
background-color: red;
}
#image2 {
width: 100%;
height: 25px;
background: green;
}
#image3 {
width: 100%;
height: 25px;
background-color: blue;
}
#image4 {
width: 100%;
height: 25px;
background-color: yellow;
}
Just specify width: 400% on the images.
Since you split the original width into 4 by using 25%, you can get the original width at the child element again if you multiply its width by 4. Which is 400%.
I'm not sure what animation you're referring to, but you can use the vw unit to size the element relative to the viewport instead of its parent.
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
The initial containing block here is the root element in your document, not the element's parent.
#image1, #image2, #image3, #image4 {
width: 100vw;
}
JSFiddle demo - notice how the yellow div element at the end stretches by the same width as the entire result pane? All your div elements here are doing this but are being covered by the next one along.
Here's a second demo where I've added a hover effect to your div elements to show how this works.
I'm looking to position a Google Maps div with a sidebar on the right that displays listings. I want to make it so the window doesn't scroll, and the contents on the page are fluid when resizing the screen.
I have previously attempted to use box-sizing like the following:
#map-wrapper * {
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-khtml-box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
}
#map-container {
position: absolute;
width: 100%; height: 100%;
margin: 0;
overflow: hidden;
border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
}
This starts to become a nightmare when trying to have a scrolling list in the sidebar. Does anyone have a good solution, or am I on the right track with box-sizing?
Box-sizing is purely optional for something like this. There are many ways to go about it, but I have one favored method that is simple and works well in old browsers like IE6.
For the various frames you are trying to create (sidebar and Gmaps/content frame) create a css rule that sets position:absolute; overflow:auto;. Now you can take advantage of a cool trick in CSS absolute positioning. If you set both top and bottom in CSS, the height is automatically calculated. Same goes for widths using left/right. So to make our two divs 100% height set top: 0; bottom:0;.
If you want the sidebar to be 300px wide and anchored to the right, then set width:300px; right:0;. For the content div, set right:300px; left:0;.
Now you need to prevent the body scrollbars from appearing. First of all, you will need to remove the default margin/padding from body by setting them to 0. Also, you need to set html & body to height:100%; (100% equals the viewing area height), other wise they default to auto which is the content's height. It is also wise to add overflow:hidden to body, since some browsers think `body{height:100%;} means they need to show scrollbars.
Here is a quick mockup on JS fiddle showing you how this works.
Elimn's suggestion did not work for me, but the following did (I created a header bar above the Google Map):
body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
#map-canvas { height: 100%; overflow: auto; }
In the body:
<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.
I have read a vast amount of posts on the subject of css heights filling the viewport and have failed to find a working answer. So I'm reluctantly starting yet another thread about this in the hope of finding the missing part of the jigsaw I have probably been staring at without seeing it.
My DOCTYPE is xhtml transitional and I'm currently testing on IE6, FF6 and Safari 5 with the same problem.
I have a container div that also displays an image driven border within a table and I want this to fill the browser window, no bigger, no smaller but adaptable to each browser (minimum heights will be set to ensure all content is contained to account for older resolutions).
I have set the html and body styles as follows:-
html {
height:auto !important;
height: 100%;
min-height: 100%;
border: solid;
border-color: black;
overflow: hidden;
}
body {
height: 100%;
height:auto !important;
min-height: 100%;
border: solid;
border-color: black;
}
As you can see I have added a border to each of the elements so that I can actually see the size of each when I view the page. The html element fills the window fine, but the body element doesn't. It just shows a short box along the top of the window.
Can anyone offer a suggestion as to what may be causing the problem?
This is all you need for the css:
html,body {
padding: 0;
margin: 0;
height: 100%;
}
Live example: http://jsfiddle.net/tw16/gyAKJ/
I'm trying to create some re-usable CSS classes for more consistency and less clutter on my site, and I'm stuck on trying to standardize one thing I use frequently.
I have a container <div> that I don't want to set the height for (because it will vary depending on where on the site it is), and inside it is a header <div>, and then an unordered list of items, all with CSS applied to them.
It looks a lot like this:
I want the unordered list to take up the remaining room in the container <div>, knowing that the header <div> is 18px tall. I just don't know how to specify the list's height as "the result of 100% minus 18px".
I've seen this question asked in a couple other contexts on SO, but I thought it would be worth asking again for my particular case. Does anyone have any advice in this situation?
You can use calc:
height: calc(100% - 18px);
Note that some old browsers don't support the CSS3 calc() function, so implementing the vendor-specific versions of the function may be required:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
For a bit of a different approach you could use something like this on the list:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
This works as long as the parent container has position: relative;
I use Jquery for this
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
then I bind the window resize to recalc it whenever the browser window is resized (if container's size changed with window resize)
$(window).resize(function() { setSizes(); });
Don't define the height as a percent, just set the top=0 and bottom=0, like this:
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
Presuming 17px header height
List css:
height: 100%;
padding-top: 17px;
Header css:
height: 17px;
float: left;
width: 100%;
Use negative margins on the element you would like to minus pixels off. (desired element)
Make overflow:hidden; on the containing element
Switch to overflow:auto; on the desired element.
It worked for me!
Try box-sizing. For the list:
height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;
For the header:
position: absolute;
left: 0;
top: 0;
height: 10px;
Of course, the parent container should has something like:
position: relative;
Another way to achieve the same goal: flex boxes.
Make the container a column flex box, and then you have all freedom to allow some elements to have fixed-size (default behavior) or to fill-up/shrink-down to the container space (with flex-grow:1 and flex-shrink:1).
#wrap {
display:flex;
flex-direction:column;
}
.extendOrShrink {
flex-shrink:1;
flex-grow:1;
overflow:auto;
}
See https://jsfiddle.net/2Lmodwxk/
(try to extend or reduce the window to notice the effect)
Note: you may also use the shorthand property:
flex:1 1 auto;
I tried some of the other answers, and none of them worked quite how I wanted them to. Our situation was very similar where we had a window header and the window was resizable with images in the window body. We wanted to lock the aspect ratio of the resizing without needing to add in calculations to account for the fixed size of the header and still have the image fill the window body.
Below I created a very simple snippet that shows what we ended up doing that seems to work well for our situation and should be compatible across most browsers.
On our window element we added a 20px margin which contributes to positioning relative to other elements on the screen, but does not contribute to the "size" of the window. The window-header is then positioned absolutely (which removes it from the flow of other elements, so it won't cause other elements like the unordered list to be shifted) and its top is positioned -20px which places the header inside of the margin of the window. Finally our ul element is added to the window, and the height can be set to 100% which will cause it to fill the window's body (excluding the margin).
*,*:before,*:after
{
box-sizing: border-box;
}
.window
{
position: relative;
top: 20px;
left: 50px;
margin-top: 20px;
width: 150px;
height: 150px;
}
.window-header
{
position: absolute;
top: -20px;
height: 20px;
border: 2px solid black;
width: 100%;
}
ul
{
border: 5px dashed gray;
height: 100%;
}
<div class="window">
<div class="window-header">Hey this is a header</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
Thanks, i solved mine with your help, tweaking it a little since i want a div 100% width 100% heigth (less height of a bottom bar) and no scroll on body (without hack / hiding scroll bars).
For CSS:
html{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
body{
position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
div.adjusted{
position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
}
div.the_bottom_bar{
width:100%;height:31px;margin:0px;border:0px;padding:0px;
}
For HTML:
<body>
<div class="adjusted">
// My elements that go on dynamic size area
<div class="the_bottom_bar">
// My elements that goes on bottom bar (fixed heigh of 31 pixels)
</div>
</div>
That did the trick, oh yes i put a value little greatter on div.adjusted for bottom than for bottom bar height, else the vertical scrollbar appears, i adjusted to be the nearest value.
That difference is because one of the elements on dynamic area is adding an extra bottom hole that i do not know how to get rid of... it is a video tag (HTML5), please note i put that video tag with this css (so there is no reason for it to make a bottom hole, but it does):
video{
width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
The objetive: Have a video that takes the 100% of the brower (and resizes dynamically when browser is resized, but without altering the aspect ratio) less a bottom space that i use for a div with some texts, buttons, etc (and validators w3c & css of course).
EDIT: I found the reason, video tag is like text, not a block element, so i fixed it with this css:
video{
display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
}
Note the display:block; on video tag.
I'm not sure if this work in your particular situation, but I've found that padding on the inside div will push content around inside of a div if the containing div is a fixed size. You would have to either float or absolutely position your header element, but otherwise, I haven't tried this for variable size divs.