First the example: http://jsfiddle.net/5S3mk/3/
I have a table whose columns need to be sortable so in the table header there should be links for sorting. The columns themselves are dynamic and their width is not known in advance.
In order to center the header content horizontally I used the recipe from here.
Now I'm having trouble with adjusting the spans inside container div to center vertically. Does anyone have any idea how to do this (legacy browser are not an issue)?
Here you have one way of doing it. It uses a little jQuery script, but it is really simple.
Related
What are the minimum requirements to make a table have a fixed header for vertical scrolling and a scrolling header for horizontal scrolling?
I am trying to accomplish the following with a basic HTML/CSS table:
The table that contains dynamically generated content so the cells should be the size they need to be to fit the content (not fixed width cells).
The table, should be whatever size it needs to be to accommodate the cells. The table will be wider than its container, and most likely, the screen. It should not overflow its container, but be scrollable horizontally.
The table will be inside a container that has absolute position, 0,0,0,0, to make it the size of it's parent container (which is position:relative).
When there is too much content to fit horizontally, a horizontal scroll-bar should appear that scrolls the table left-right with it's header.
When there are too many rows, a scroll bar should appear vertically, but when scrolling, the header row should not scroll vertically, it should stay visible.
There are a few Jquery plugins that add a huge feature set to tables, including this type of scrolling. Unfortunately, I don't want/need a complete table-to-grid plugin, I just need to understand the essential css rules that are required to achieve a fixed header for vertical scrolling and a scrolling header for horizontal scrolling.
Here's an example from a plugin demo page: http://www.tablefixedheader.com/fullpagedemo/. The scrolling here works the way I want, but it seems to use fixed widths and I don't know if that's required, or if javascript is calculating those widths, etc.
Specifically, what I'm looking for is someone that can explain the necessary (and only the necessary) markup and css rules that are needed to make a plain old table scroll in the way described above. I want to understand how and why the rules work.
An ideal answer would be a few lines of HTML showing which things have to be wrapped in divs, etc and a few lines of CSS showing only the critical rules that make it work, followed by an explanation of what those critical rules are doing to make it possible.
I have been trying to get the functionality working for 3 days now, and can Only get certain parts working, but not all at the same time.
In all essence, it is not the table that will be doing the scrolling, it will be the div that is holding the table that will be doing the scrolling. Let's take a look at some example code:
<div style="height:200px; overflow-y: scroll;">
<table>
....
</table>
</div>
Once the table reaches a limit where there is too much data to be held in a 200px range div, it will automatically start the scroll bar with the element overflow-y. Now, to obtain a scroll bar that will be used for horizontal and vertical scrolling, you switch from overflow-y: scroll to overflow: scroll;. I have referenced this from the following stack question.
For the last part, creating a fixed header, we can reference the following JsFiddle:
DEMO
This is again, referenced from a different stack question. The key part to this is using two tables to represent one big table. This is placing the first table on top of the second table and then enabling table-layout: fixed to keep everything together.
The real problem arises when you try to get your table to horizontally scroll, that may need JQuery or some JS derivative, so here is a good stack question to point you in the right direction.
The last thing I want to cover is the optimizing differences between tables and divs/uls/lis (we can call it a DUL to keep it short). To get a better idea of what exactly I mean, take a look at this final stack question. This may or may not pertain to you, it's honestly dependent upon how comfortable you are with changing your layout and then also whether or not you feel the need to try and optimize results. You may not need it at all, but again, something to consider.
When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?
Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.
IMAGE: http://go-dl.eve-files.com/media/1310/image.png
I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.
There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.
Here is my code:
PASTEBIN: http://pastebin.com/xbvPEfjA
I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!
in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.
I am attempting to implement the following layout without using javascript and without using tables:
There are a LOT of rows on a page. Each row is filled by four content elements, the tallest of which determines the height of the row. Each content element has two other elements, in this case, an image and a caption. The image is aligned to the top of the row while the caption is aligned to the bottom.
In the HTML structure, the image and caption must stay together in the content element.
Some solutions I've tried:
Splitting each row into two: a row of images and a row of captions, separates the images from the captions.
Using the famous equal height column div structure results in an ugly absolutely-positioned Matryoshka Doll arrangement of divs.
The issue with tables is that the page will be made MUCH more dynamic in the future (rearrangable content, fluid layout, dynamic searching, content of varying width), and tables will be extremely annoying to do this with.
If I'm imagining your markup correctly, perhaps this will work for you:
http://jsfiddle.net/Puppies4Life/Fd94X/1/
I absolutely positioned the .caption to the bottom of .row. I made it a point to position .caption to .row instead of the immediate parent .content because of the varying heights of .content. The image remains in the flow of the document. I Added some additional padding to the bottom of .row to account for the text and put in a simple clear fix (I suggest using a better option in your production code)
Hope this helps solve your problem or possibly ignites an idea or two!
How can I put the height of side by side DIVs?
When I change the width of browser, sometimes the left div get higher or shorter than the left.
I want that automatically the left or the right div grows up to became with the same height of the other one.
Setting a display table-row is the best solution for this?
Take a look at the image of the page I want to develop.
http://i.imgur.com/BhvV2.png
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table.
Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
Here's a solution, also found on SO
http://jsfiddle.net/kaAjW/
Here is the link to original post
How do I keep two divs that are side by side the same height?
The technique is called Faux Columns and here is an article about it
http://www.alistapart.com/articles/fauxcolumns/
I solved the problem using display=table-row, table and table-cell. I've added one div to be the table. Now it is perfect! Take a look.
http://jsfiddle.net/tcWCC/47/
If what you are trying yo do is to place the content in a grey box with rounded conrners then your divs don't need to be of the same height. Just move the background-color and border-radius to the enclosing div: http://jsfiddle.net/tcWCC/41/
I think you won't be able to do that without using a html table.
I'm building a HTML template for my site and would like to have a main content pane on the left and a navigation pane on the right (similar to Twitter).
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom. I've played around with float:left and float:right but those cause the parent div to not expand appropriately vertically.
I've seen references to using tables (seems like a step backwards) and SPANs (which I haven't been able to use to produce the right effect).
What is the best practice for accomplishing side-by-side panes in HTML?
Any advice or examples would be greatly appreciated.
I'm assuming DIVs are not the preferred approach since they are by defaulted listed top-to-bottom.
Why would you assume that when the example you gave, Twitter, uses them?
The parent div can be made to expand to the height of the larger of the two columns by putting a div below the two columns within the container div with clear: both as its CSS.
DIVs with float is probably your best bet. What is your problem with the height? Have you tried doing height: auto for the div?