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;
}
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
I'm building a relatively complicated page with some nested tables that should scroll. Despite reading as much as I can on HTML tables, I don't seem to understand what's going.
See http://jsfiddle.net/JasonJSFiddle/etye72eg/
I want the top panel portion to always be 80% of the screen and the bottom to be 20% of the screen.
table.outer-table tr.outer-table-row1 {
height:80%;
}
table.outer-table tr.outer-table-row2 {
height:20%;
}
I was assuming by putting the 'overflow:auto' in the , this will make the nested tables scroll while maintaining the 80%/20% ratio of the outer table. However, it seems to just push the cells out so top and bottom is 50% each.
How can I get the top portion to be 80% of the screen, and the nested table on the right to scroll and the bottom portion to be 20% and the nested table at the bottom to scroll?
Thanks!
Its usually not recomended to do layout with tables. Unless if you're working with mail marketing or some weird browser that doesn't support divs.
I like to do layout with divs using the css attributes:
display: table;
display: table-row;
display: table-cell;
It gives the divs some tableish layout capabilities.
I have made an example for you with divs here;
You can put the tables that are really necessary inside the divs. But to use percentual sizes, you have to make sure that the outer (outermost) element have a fixed size. (can be your div#main, or some other external wrapper of your layout).
Hope it helps
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.
I can't believe I can't find this question here or on Google - it seems such a dumb one I'm embarrassed to ask, but here goes as it's driving me nuts this morning...
Imagine a single-column, stacked bar chart made with divs like this to look a bit like a thermometer:
<div id="thermo">
<div id="thermored"></div>
<div id="thermogreen"></div>
</div>
#thermo is the containing div, #thermored is the full height background and #thermogreen is the overlay that will be changed to reflect data - in the real world it shows percent complete of a task.
As this stands, it works. However, it needs to work inside a table cell (not my choice - it's a system restriction on the CMS). The problem is that the height of the containing TD is (despite trying fixed heights) the total of the two divs, even though they are positioned relatively and overlayed.
Here's the current css - it's not pretty as I've been trying so many combinations of positioning over the last couple of hours
#thermo{
width:140px;
height:500px;
position:relative;
}
#thermored{
width:50px;
height:100%;
margin-left: 20px;
background-color: red;
}
#thermogreen{
width:50px;
height:280px;
margin-left: 20px;
background-color: green;
position:relative;
bottom: 280px;
float:left;
}
*EDIT For info the issue I'm having is in Chrome and FF - IE(8) sets the TD height they way I want
I think the problem you're having comes from the fact that relative positioning leaves elements in normal flow. Have you tried setting position: absolute; for the inner thermogreen div? Absolute positioning takes elements out of normal flow, and therefore the td tag will only take into consideration the height of your thermo div, which is set to 500px in height. (Edit: you can actually leave thermored with no position attribute. It's set to 100% of the height of the thermo div, meaning no matter what your td will be 500px in height, and you have less CSS to worry about).
Have a look at the jsfiddle I came up with:
http://jsfiddle.net/dgRCu/3/
Does this solve your issue? It seems the td has stayed at 500 pixel height instead of expanding to 700+ now.
I'm not sure what the intended purpose of these divs are so I set bottom: 0; on the thermogreen div since it seems what you want is for the green bar to expand in height while the red bar is the background color.
TD cells will collapse/expand to the size of the 'tallest' height. Using css within the cells are going to cause different issues with different browsers or especially email readers.
So, you have tried:
<tr>
<td height="500"></td>
</tr>
And then, putting those block elements in there? Make the height on the first td cell of your table and make it more than the total of the two divs.
You're floating one so the largest should be forcing the height.
Have you used the Dev Tools in IE to see how the table cells are being rendered? Any chance you can make a jsfiddle.net of just the html table and css code?
Please, look at this example. I intend making horizontal layout with pure html/css, don't bother of old browsers. I made it with display: table technique. But displaying main text containers (light-yellow) became a problem. Each of this has overflow: hidden to prevent vertical scroll. Later, I intend adding some shadow effect at the bottom. Now, I want to make in, for example, 80% height with 10% margin top and bottom. But what I get is container with larger text stretching all parents container (light-green), so 80% of it became too much.
Is there any way to avoid it without javascript?
Maybe I can get text container any height, but with some margin at the bottom. I will appreciate any solution.
Do not use table layouts, table cell divs have a problem setting their width/height and thus will not be able to follow overflow rules.
update the following css properties in your layout.css, this will get you started:
#content{
display:block;
height:90%;
overflow:hidden;
vertical-align:top;
}
#content-inner{
display:block;
height:100%;
vertical-align:top;
}
.article{
display:inline-block;
}
It's still not clear what you want; maybe post a quick sketch?
Anyway, I'd want to avoid the horizontal scrollbar. To do that set #content {
width: 61%;} (based on the rest of the CSS). Currently, in layout.css, #content width is set to 305%.
RE:
#Brock Adam, I mean I want to make div.article-content 80% of screen, not 80% of parent container. I believe this can be achieved by forcing parent div#content be exactly 100% of screen, not more. But I don't know how.
div.article-content currently appears 5 times in the page. Setting it to 80% of the screen will give a page that's at least 400% wider than what the user can see.
Questions:
The first div is ID'd as "header", but it's floated left and only 39% wide. Is this a header (bar at top of of page) or a left, side-bar?
Are the articles supposed to be in 5 tiny columns, on the same row, or are they supposed to be one after another, scrolling down the page?
Again, statements and the semantics of the example page are unclear. Posting a quick sketch of the desired layout will help us help you.