I have the following Table example here: http://jsfiddle.net/Lu9y3/
Which is based on the Telerik example here: http://demos.telerik.com/aspnet-mvc/Grid/Paging?theme=vista which is a UI component I am using in an app I am building.
As you can see they use two separate tables to achieve the fixed header and scrollable content. BUT the headers and columns in both tables still line up correctly.
Even if I REMOVE the style from the <col> in the Telerik examples using Web Inspector the columns will still line up... And they are NOT using jQuery to adjust the width. So how come they have their columns lining up and mine do not?
How are they doing this?
The reason you are having issues is because you are using two separate tables. Tables adjust column width to the longest unbroken content. The way Telerik does it, they have four columns and have set the widths explicitly in all but the third column. This allows the third column to expand and fill the remaining space.
Using table-layout:fixed will help but it will make all your columns evenly spaced regardless of content. I recommend setting the width of each column, or better yet make a class for each width and reuse that on the appropriate columns.
Lined up sample
I don't use classes in my example but I think you get the idea. I used overflow:hidden on th and td to make sure that longer content doesn't display over the other cells of the table. I also think the visual effect of the table works better with fewer columns seven or eight columns might be a bit overkill, but that's my personal opinion.
Using table-layout: fixed; makes the table line up ;)
I'm using Google Chrome, and when I open up the editor (F12) to Telerik's site and change the settings, they start not lining up. I've done some research, and according to W3.org on <col>, it looks like there is no way to globally name a <col> that you can use in multiple talbes (sadly).
Also, in Telerik's example, it appears that the <col> definitions specify a width in the tag itself (likely manually placed via some JS). I think this is the only way to do it other than setting specific CSS rules, but that may not work as well as a more dynamic solution.
Best of luck!
Related
I'm creating a wordpress site, with which I don't have much experience. I'm using a plugin called wp-table-reloaded. I'd like to be able to edit the column width of the columns on this page: http://zangkoor.netii.net/het-koor/het-bestuur-2/. I know that the cells have classes .column-1and so on, so I know I could edit the styles for these, but what I don't get, is why the first column is much wider than the second. I've been looking at the styles using the chrome inspector, but I can't find what's causing it. Also, I'm making the site for my dad, so if I could give him an easier way to edit column widths, without fiddling with css, that'd be awesome.
The plugin is smart enough and has been made for progressive enhancements. If you start putting in the content for third Column as much as you want, you would see the first 2 columns shrink in size. The ambiguity that you see right now is because you have empty cells in the third column. Once you start filling content in those cells, everything should fall in place. That said you can hide the third column entirely by giving the CSS declaration display:none; for column-3 like
.column-3{display:none;}
I'm trying to solve the classic box packing/knapsack problem with a CSS layout.
I would like to arrange many boxes in a way that minimizes whitespace between elements, like this;
(source: tydus.net)
CSS3 columns work VERY well here - boxes are arranged sequentially, but all white space is consumed efficiently. There is a teeny weeny problem - boxes are "sheared", or span across multiple columns. Can't do that.
I used the classic div.clearer after some boxes, but that had no effect - the boxes still spanned over those CSS3 columns. There is a column-span CSS property, but it's not supported in any browser yet ;(
Optionally, I could define the columns myself and arrange the boxes by hand, but realistically the boxes change height very frequently.
Final question: Is there a way to arrange boxes in a way that minimises whitespace between boxes using pure CSS?
Thanks!
Although I haven't tried it myself yet, one possible answer may be to use the jQuery Masonry plugin. This seems to fit the requirements you state.
Doing this in pure CSS and HTML willl be very hard, you'll have to probably let go of some wishes/requirements...
Are there any existing plugins/extensions/methods to maintain vertical rhythm for Twitter's Bootstrap project?
It is quite a laborious task to create good vertical rhythm templates, I would rather use a pre-baked solution. I am open to creative suggestions, I just want my pages nicely aligned in the end.
Edit: To clarify what I am after...
Vertical rhythm is a technique used to ensure that every element on a page lines up according to a horizontal grid. This is achieved by setting the height, padding and margin of every item to conform to a standard unit line size. If a line of text in a paragraph is 20px high (including margin and padding) then maybe a heading 4 will also be 20px high, and a heading 1 might be 40px high. This maintains the rhythm of the text across columns.
I want to use this technique in combination with bootstrap (from twitter), but it would be quite a lot of work to get everything looking nice. For example, all the buttons would need to conform to the same vertical height definition as paragraph text etc... There are other standard controls used in bootstrap which would also all need rules to define their height appropriately.
I could start with a generic solution for vertical rhythm, which would go a long way to achieving what I want, but I wanted to know if anyone else has started this, or has any idea of another way to achieve this.
Edit: Assuming there is nothing like what I want...
Maybe just a good vertical-rhythm based css template would be a good starting point. Preferably something that is continuing to be developed, is already usable, well thought out, and adaptable.
Since no one has linked to an actual vertical rhythm boilerplate as you suggested, I took the one I use, commented it, and created a github repo for it here https://github.com/jonschlinkert/vertical-rhythm
As it says in the readme, this is a starting point for your own project.
I think what you're going after is understood. Problem is: you're looking for a grid schema in one dimension (a "vertical rhythm" set in accordance with, for example, proportional line heights...which, in a manner of speaking, measures and aligns things along a given page's Y axis)...but doing things in that manner might potentially be at odds with Bootstrap's pre-existing 12-column grid system (which, in contrast, measures and aligns things along the page's X axis). You want to "proportionalize" the height of each "row" in the framework. BUT: keep in mind, Bootstrap's design is intended to promote not just proportionality via columns solely for the sake of looking nice, but to also make pages responsive--i.e., to allow page elements to "flow" around one another vertically, and to nest fluidly. And, in that sense, issues pertaining to the height of elements measured along the Y axis may already be accounted for... I recall that most of the typographic elements in the base CSS file have proportional em sizes, and/or likewise proportional top and bottom padding, etc. Generally speaking, things are not so arbitrary that the framework screams a need for additional styling in the manner you're considering.
Even so: Bootstrap's base CSS file isn't so intolerably extensive that it'd be impossible for you to tweak the height of various element classes and IDs yourself without too much trouble. In any case, it's highly unlikely you're really going to need to do that with every styled element, right? In fact, as a framework, Bootstrap includes styling for many elements which may not even be in the app for which you're designing the front end. (EXAMPLE: Does your app have drop down menus? Great. You can style the "vertical rhythm" of drop down menus. BUT: are you also using pills or tabs in your nav bar? No pills, you say? Well, you can just delete a couple hundred lines of code in the stylesheet and save yourself the effort of having to apply your "vertical rhythm" to those unneeded elements.) Elsewise, for the elements that remain and that you do in fact need, just use a text editor to find-replace the values for line height, top and bottom padding, margins, font-size, etc...and test it out. As a CSS framework, it's pretty clear how Bootstrap is laid out; relevant elements are well sorted, and grouped together within the stylesheet's code for the most part. Once you do complete tweaking of the base CSS file, just minify your revised stylesheet...to replace the pre-existing minified version...or, perhaps, just serve it up from CloudFront if you want to optimize.
The Compass CSS Authoring Framework has explicit support for vertical rhythm based typography. For starters you can check out this short video tutorial.
Have you looked at the Square Grid CSS framework?
http://thesquaregrid.com/
A simple CSS framework for designers and developers, based on 35
equal-width columns. It aims to cut down on development time and help
you create beautiful-structured websites.
Square Grid provides a standard horizontal grid, but it also maintains a vertical grid, using a standard "square" of 28px. It is really just a grid, not a full CSS library like Bootstrap (i.e. no buttons, menus, etc).
I used to for one project and found it to be pretty intuitive, though I ultimately decided that it was too hard for me to keep track of both the vertical and horizontal grid, especially when thinking about responsive design.
You may be able to combine the two, or at least take a look at the square grid source code which is pretty simple CSS to get some ideas on how to adapt Bootstrap to meet your needs.
At the moment I've got a div which is 1024px wide.
In that box are two CSS3 columns with text flowing automatically from one to the next.
However, I want to restrict the height of these two columns to 700px - once they are full I want 2 more columns with the same height to appear underneath them.
Is this possible?
OK. It is totally possible to achieve what I think you are about to build. However, if you want to do it by yourself, you will need a bit more then just CSS3 styles in place. You will need a fair amount of JavaScript as well.
Take a look at this Columnizer jQuery plugin (it can do the job)
Here's a sample site showing results of it's work: http://welcome.totheinter.net/autocolumn/sample10.html
Update on this:
The Adobe CSS Regions proposal mentioned by gimme5 looks excellent. Unfortunately, according to caniuse.com, there now seems to have very little browser support - it's been removed from current versions of Webkit.
There is a simpler proposal which may do the required job: CSS Multi-column layout (http://www.w3.org/TR/css3-multicol/) which appears to have broader browser support. I haven't tried it yet, but it might work for you without having to pile in a ton of Javascript.
Is it possible to have a css newspaper-column layout arranged such a way that, any number of columns can be added and they will be continuously added to the right of the existing columns.
My thought is like this: I would just add a new div and a new column will be added to the right and so on.
If yes, how?
Here I found a 4-column newspaper layout. But column-heights are not same. I need a way so that, no matter how long the text is, they would be stipulated to a certain height.
Is it possible in CSS?
I think your needs are best served using an existing CSS framework, rather than coding it yourself from scratch, since it is really tricky business plus apallingly hard to get to work across all browsers (since some of them are not standards compliant)
Anyhow, for newspaper columns, I think there's one out there that fits the bill, 960 Grid System. It comes with 12 & 16 column "grids", with the gutters and paddings all worked out, and so long as the number of columns you intend to use is a factor of 12 or 16, it can handle it.
CSS3 provides a way of turning any HTML node's content into any number of columns. There are properties for controlling the number of columns as well as their width, relative height ("fill," or how the content is divided across the existing columns), gutter between columns, "rule" (dividing line or border), etc.
As a starting point, see the w3schools.com CSS3 Multiple Columns reference page.
However, as usual, IE alone among widely used browsers does not support the column- CSS3 properties.
One cross-browser solution is the Columnizer jQuery Plugin.
With pure CSS, it's very hard to assign several divs the same height unless that height is static. You can use ugly hacks but that will only get you so far.
For real columns, use tables, that's what they are for. Tables are valid HTML constructs, it's just that you shouldn't use them as your only layout tool. But when tables work, use tables.
you can set the height of the column using CSS, but adding a column automatically its a programming stuff using other web programming languages.