The system I'm working on will generate invoices and several documents in html format.
When someone searches for this documents, the results must appear with a small preview of the document. The client wants the html documents to be shown inside a div (note that this div is way smaller than the actual document size), what I am trying to achieve is to display the html inside the div and that the content resizes automatically to the div's size.
If I render the html inside the div, it will just add scrollbars and display it in it's original size, I want the html content to fit the div's size.
I've worked in a css sheet that changes fonts, widths, heights for the elements inside the containing div, but as there isn't really a pattern in the html structures for all the documents, the results are not the expected ones, I wonder if there is a cleaner way to do this, maybe with javascript or a jquery plugin.
You can use scale on the div, which scales down everything inside it.
http://www.w3.org/TR/css3-transforms/ is the reference for all CSS transformations. Looks a bit like overkill, but there doesn't seem to be a W3C page that explains about scale only.
Anyway, the CSS you can use is something like this:
.preview {
width:600px; height:400px;
-webkit-transform:scale(.25);
-ms-transform:scale(.25);
transform:scale(.25);
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
border:4px solid green;
margin:0 0 -300px 0;
}
and the result looks like http://jsfiddle.net/asxqL/4/
Note that although most measurements are multiplied by 0.25 here (for instance, the 4px border comes out as 1 pixel wide), the vertical space taken up by the element is still 400 pixels. That's where the bottom margin of -300px comes in.
Related
I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?
Screenshot attached
There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:
Making the table width match the page width
An external style library, like Bootstrap
Making the Table Width Match the Page Width
First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.
Using Bootstrap
So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:
containers
rows
columns
It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.
You can find full documentation and examples for using Bootstrap here: Bootstrap Docs
For a while I was stumped my centered background images were not pixel-perfect aligned in their containers. I even got different results within the same browser but different windows
Finally I found out what is happening, but I'm still short of a robust cross-browser solution.
The case: I'm working on a collapsable tree-view in javascript. Everything is functioning alright, but in some cases the collapse/expand buttons are off one pixel to the left.
The images for these buttons are user-definable, as well as the size (width) of the container they appear in. The images are drawn in the center of these containers with background-position: center center;. Now there are cases the image can't be fit exactly in the center of the container (for example, centering a 9px image in a 20px container, there's a 1-pixel difference on either side). This should be no problem, as long as we have consistent behaviour on how the browser handles this.
But here's where it gets messy: I've implemented this tree-view inside a wrapper centered with margin:0 auto; based on the browsers viewport. And here is when I get different results when both the viewport centering and background centering don't fit exactly within the pixel boundaries.
This is probably hard to follow, so I've squeezed the problem into a fiddle: http://jsfiddle.net/3y65wgu8/1/
CSS:
#wrapper1 {
width:400px;
}
#inner1 { /* perfect center */
margin:0 auto;
width:200px;
height:50px;
}
#wrapper2 {
width:399px;
}
#inner2 { /* 1px-offcenter */
margin:0 auto;
width:200px;
height:50px;
}
#container { /* image 1px-offcenter (9px centered in 12px container) */
width:12px;
height:12px;
background:url(data:image/gif;base64,R0lGODlhCQAJALMAANLNve/s58a7rd7Vznuatf////f39wAAALXD1vfz7+fj3tbTxsa6pdbPxt7b0sa2pSH5BAAAAAAALAAAAAAJAAkAAAQoEJFJiSw4l6mxmUYYJgp4nKczJUngKsOkOMOyNMAECALDPAJLhYKIAAA7) no-repeat center center #444;
}
HTML:
<div id="wrapper1">
<div id="inner1">
<div id="container"></div>
</div>
</div>
<div id="wrapper2">
<div id="inner2">
<div id="container"></div>
</div>
</div>
Two different wrappers centering their content, containing two identical containers having a small button drawn as background. Chrome seems to be the only browser that draws the buttons in alignment consistently, but firefox and IE show the problem I described. Try resizing your browser window, and see the buttons bounce from one side to the other.
My question is: how can I get at least identical results, without losing flexibility on button/container/wrapper sizing and styling.
EDIT: Here's a picture that illustrates my use-case:
Example
The area marked in blue is the container that holds the collapse button. This area is always square, but may vary in size. The button can be any image smaller than this container and is placed directly on top where the lines meet. No stretching or scaling should occur on the image. In this example the button is too far to the left. Resizing my browser window makes the image jump in and out of correct alignment, as the fiddle above describes.
There seems to be no way around this than to resize the image container when the image inside can't be centered pixel-perfect, to have consistent cross-browser behaviour on the positioning. Therefore I need to fetch the image meta-data either server-side or client-side.
Server-side (1):
Using getimagesize and getimagesizefromstring and was obviously the way to go. But then I bumped into a problem in my current use-case: the tree is rendered using AJAX, and the relative URL for the image is not relative to the location of the AJAX script.
Issues:
So, for this to work I either have to pass both URL and absolute PATH (or absolute path alone, and have the URL figured out by stripping $_SERVER['DOCUMENT_ROOT'] from it). This approach seems counter-intuitive and restrictive on the developer's part trying to implement this tree module. So I abandoned this idea.
Server-side (2):
Ask for the image dimensions at design time. Plain and simple, place the responsibility at the implementer.
Issues:
Not very elegant, but it works :). (solution 1)
Client-side:
I've but both images inside a hidden DIV, and I fetch the size of the image from the onload event. If by this data the images used inside the containers appear off-center ( image.width%2 != container.width%2 , image.height%2 != container.height%2 ), I loop through these containers and resize them by one pixel in either width or height.
Issues:
I don't like the idea of using hidden elements with triggers for the sole purpose of working around this positioning problem. However, it provides a solid cross-browser solution. The only downside is that there seems to be a slight delay before the images 'snap in position' (at least in FireFox). The obvious solution for this is to have the containers show the images after resizing the container. (solution 2)
This may be worth a quick try. When inspecting the Fiddle, I noticed that #wrapper1 had a width of 400px and #wrapper2 had a width of 399px. I changed the width of #wrapper2 to 400px for consistency.
I added background-size:cover; to the button because the button image appears to be a different size than its container. Give this a try and see what you think.
If you need to keep #wrapper2 at 399px, then change the background position in the code below to background-position:top left; while using background-size:cover;.
Another option for your current code would be to make the background image the same size as its 12px by 12px container, use background-position:top left;, and remove the background color. When creating button backgrounds, its helpful if the background is the same size as its container.
Note: You could also use CSS styles to create the button look on the div, and not use an image.
Here's the JSFiddle
Here's the browser support table from Can I Use for background-size:cover.
#wrapper1 {width:400px;}
#wrapper2 {width:400px;}
#container {
width:12px;
height:12px;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-image:url(data:image/gif;base64,R0lGODlhCQAJALMAANLNve/s58a7rd7Vznuatf////f39wAAALXD1vfz7+fj3tbTxsa6pdbPxt7b0sa2pSH5BAAAAAAALAAAAAAJAAkAAAQoEJFJiSw4l6mxmUYYJgp4nKczJUngKsOkOMOyNMAECALDPAJLhYKIAAA7);
}
I am trying to create a div that will fill any empty space at the bottom of a page if there is any, or disappear if the content of the page extends to/past the bottom. I know this can be done using java, but I would like to stick to CSS as much as possible with as few wrappers as possible.
I have experimented with a few different methods but nothing has worked out so far and most of what I have come across is sticky footers, tables, and filling the excess on specific div elements (which this isn't since I want it to work on the whole page at the body/html level).
The furthest I have gotten (which still doesn't work) is to try absolute positioning with alternated top & bottom values, but setting top: inherit and then bottom: 0px just doesn't play well... Example: http://jsfiddle.net/V4RnC/6/
The basic problem comes down to: 1. Keep the top of the div where it would usually be just after the previous div 2. Extend the bottom of the div to the bottom of the page 3. Vary with content and page size changes 4. Disappear if there is no excess space.
Any help would be greatly appreciated!
Update: So far everyone seems to think it's a job for Javascript, so I came up with this quick jQuery solution: http://jsfiddle.net/V4RnC/7/ Feel free to rip me a new one on the code as I always appreciate the learning opportunity :)
If you want something for background purpose here, I would use a div, that stretches over the complete visible area (if the visible area is as large as the content, it's just hidden behind the content).
Then it would be something like that here: http://jsfiddle.net/V4RnC/4/ http://jsfiddle.net/V4RnC/5/
Here's the css code I used:
#content {
background-color: #F00;
/* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */
overflow: hidden;
}
#fill {
background-color: #00F;
height: 100%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
Here's a bit more info on that: http://codecamel.com/fullheight
I can imagine, that I sometimes had to use min-height instead of height for the body or html ... but can't remember when or why ...
When an HTML table is wider than the page body, it's always left aligned, no matter if you specified a centered alignment. I've a table containing CSS3 gradient buttons, whose size isn't easy to predict (buttons size depends on the font used by the browser). On some browsers this table grows wider than the page body, causing the table to become uncentered related to the page banner.
I've read questions like this: Center table, even if it is wider than parent container stating that the only way of centering tables in this scenario is with Javascript.
But I'd wish to find a solution without javascript. The page design is very simple (just the site logo centered on the header, and an array of big buttons below).
Do you have any suggestion for an easy and elegant solution for this, so that the buttons table is always centered in the page?
http://jsfiddle.net/JQ3qb/
I'm not sure but is, this what you want? You can do it with positioning and then play with left percentage to adjust table.
#test{
border: 1px black solid;
width: 800px;
position:relative;
left: -25%;
text-align:center;
}
Which code in HTML will allow me to use an image as a background image for a table, but not so that it would be repeated several times vertically and horizontally (in case the table is several times bigger than the image), but in such way that the image height is stretched out to be equal to the height of the table, and its width is stretched out to be equal to the width of the table?
The CSS background options can't handle this reliably across browsers, so you need to put an <img> tag in the table and position it appropriately. As Petr Marek alluded to in the comments, you can do this with the CSS attributes z-index and position, but it's not elegant.
If you set position: relative on the table, you can set position: absolute on the <img> with top: 0; height: 100%; left: 0; width: 100%; to position and size the image, and set z-index: -1 to make it appear behind the other content.
Here's a working example on jsFiddle.
Although it works perfectly for me in Chrome, since you're putting content on top of an image I wouldn't be surprised if it caused some browsers to mess up text selection or something else.
Presentation is the job of CSS, not HTML. You can use background-size in supporting browsers.
HTML stands for Hypertext Markup Language. It is not code. It is intended to provide semantic meaning and structure to a web-accessible document. Entities such as images are purely presentational cruft that was added because we got bored just reading text all day.
That being said, you can use CSS to possibly achieve what you want, but it may be bit tricky. An idea that comes to mind is adding an image element to the page with a height and a width set to be 100% of its container, and then positioning your table, with a transparent background color, over it. You'll have to look into z-indexes, obviously.