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
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
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;
}
For some reason my <td>s are overlapping each other. It's not supposed to do that.
I want the center to be seperate from the left column which currently isn't.
Anyone got a clue what I did wrong? This is the website where you can see the code etc:
.MiddleCenterContent has a width of 100%, forcing it to overlap its neighbours. A better method would be to make defaultTable width 100% then just define the width of the other cells, and .MiddleCenterContent would fill out.
Despite this, it's better practice to use <div> tags for layout. There are plenty of tutorials on methods using these available on the internet.
The reason is the width of 100% of .MiddleCenterContent. Do not use tables in order to structure your layout. Tables are only for tabular data. Using divs or other semanticly appropriate containers will help you to prevent such issues.
in your css you have
.MiddleCenterContent {
width: 100%;
vertical-align: top;
}
just remove the following line
width: 100%;
which forces the center cell to be 100% large, overlapping other cells
I am trying to convert my table design to css div design.
What does not work:
1.)
The black div will have list items therefore I need scrollbars which is shown at the moment. Thats fine.
But I do not want to limit the height to 400px. My former design had 100% for the height so it takes all vertical space on the screen.
2.) The red div (rightContent) should have a fixed width of 200px; When I set this what do I have to set, that the leftContent takes all horizontal space.
Above all in the old table layout were no outer vertical scrollbar visible around the whole layout.
I tested this on IE9
http://jsfiddle.net/pEMwP/4/
For Question1:
If you want a scrollbar, you should not set the height property to auto. Instead you can dynamically set the Div height via Javascript like this.
document.getElementById("ListData").style.height=<your Size>;
For Question 2:
If you want to set height to Red Div. You can specify like this.
height: 200px;
overflow:hidden;
this will limit the div to 200px. Now you can increase your other div/divs width to occupy this space .
If I was starting something like this from scratch I'd rethink the layout so I didn't have such tight constraints, but as you're converting an existing site I appreciate this might not be an option.
You could use the display: table;, display: table-row; and display: table-cell; declarations to get a semantically correct (it's not tabular data, right?) structure which behaves just like the oft misused <table> of yore. Admittedly, you'd have to implement some work-around for IE6&7 (probably 2-3% of users), but perhaps you could accept that it's usable but imperfect in those browsers?
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
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.