From your experience, what would be the most suitable CSS solution for replacing the old unfashionable tables, with divs and styles? i am especially interested if there is a solution for replacing the table's tags. (headers of the tables)
thank you!
If you have tabular data, then you should always use a table. There is no reason to replace it with a floating box layout.
Don't use tables for layouting your whole page.
Generally, you'll need to replace each cell() with a div.
I would then google for examples of CSS column layouts to find out which behaviour suits you best. You can place divs in exact positions or make them relative. Either way, if you don't know CSS you're going to have to learn it and play with it to get an idea how
Related
I vaguely remember reading about some new (CSS3?) type of tables. The problem mentioned at the time was that it wasn't widely supported. Is there anything like that? Is it support better today? Sorry I can't be more specific, I don't remember its name.
The bottom line is that I'm trying to get div's to be equally sized horizontally next to each other, but when I do that using display: table (and display: table-cell in the li's) - they ignore things (like overflow: hidden ).
As posted in a comment above - CSS flexible boxes is it.
try this. There are some more types like given here
{display:flex;}
Still, I will suggest you to play with tables. They are awesome, just need some tweaks.
I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)
Before anyone close this question or complain... I've been looking all over StackOverFlow site but couldn't find anything straight foward about tables and forms.
I have a form which has at least 20 to 35 labels and text boxes, in different categories. So to start using CSS for each element would be too much.
For some reason, I'm feeling like using tables to align all the fields with their respective labels, since some labels will be larger than others (i.e. 'First Name' is a larger word than 'Age'), and so the layout would be distorted. And I can't start applying css for each label and text box (circa 20 each... that's 40 individual css rules).
Unless someone can give me some techniques, I'll be greatful.
I know CSS is good for forms but what about the very big forms?
So long as you use the cascade to your advantage, there is nothing wrong with CSS for forms.
In fact, I recommend it over using table.
Just set up some base rules...
input {
padding: 3px;
float: right;
}
Then handle the exceptions to your rules...
input#age {
float: none;
}
Forms are not tabular data, simple forms just superficially look like they are.
CSS is just fine for long forms. Have styles for most data. Then more specific styles for short bits of data and/or long bits of data, and so on. Don't style everything individually.
try using UL and LI instead of table, such as explained in the following article Click to see article
It provides the CSS too.
You wouldn't need 40 individual CSS rules. You could have one rule for all the labels, and one for all text boxes.
BUT - having said that - this sort of layout, where you have two columns of stuff, and you want all the stuff in column 1 (the labels in this example) aligned with each other, and all the stuff in col 2 (the text boxes) aligned with each other, while keeping the rows aligned - well that's exactly the sort of thing that the the good ol' table excels at.
I am a big advocate of CSS, and I believe that abuse of tables (to layout a page for example) is evil, evil, evil - but I would definitely go with tables on this one.
At the end of the day, it's all about preference and functionality. My personal preference are divs/CSS. The cascading nature of CSS, and cleanliness of the code, etc..
But hey, if you like tables - shout it from a rooftop!
You can use jQuery Masonry.
As far as I can see, it will achieve the layout you need and all you have to do is add classes and single line of JS code.
You can create good, accessible forms using CSS without too many CSS rules (for the alignment part, anyway). You basically just need to set the width of all the labels -- with one rule -- and define how they interact with the input elements. There a nice article at http://www.websiteoptimization.com/speed/tweak/forms/ (just the first one I found, I'm sure there are many others).
For a form IMO i'd rather use a table its cleaner. Use CSS for your websites layout. But again thats my opinion...
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.
Want some handy guidelines prior starting the HTML Prototype of this application. Please find below the mockup screen.
Mockup screen
I need to make this structurewith liquid layout so that it will adjust as per the resolution.
Please do suggest me should i go with DIV with floating left or can i use tables to achieve this structure?
Thanks
Lokesh Yadav
Seems like a good div approach to me. Floats seem to be the typical way to achieve this, but I've personally always found display: inline-block as an extremely helpful tool to implement these sorts of layouts.
Using table would be much easier. Forms are naturally tabular. Never seen a form that is non-tabular.
the whole table vs div is totally overblown. I do agree that it's not a good idea to use tables for designing layouts but it's what it was back in the old days where CSS support was limited.
however for those to go far to declare forms to be table-less is going too far. All forms are naturally tabular and by doing it in table, you actually reinforce its tabular structure.
We can argue that we should not use tables for calendar since technically, a calendar is tabular for OUR convenience, not because the dates themselves are tabular!
Personally, I'd build that in divs. I'd have a formrow div, then contain each of the columns in left floated divs with a specified width.
I think:
the optimal way is to use a
DIV with floating but its harder to
code because you want a table-style
and you must calc the exact width of
any div (in pixel or percent).
the easyer way is to use TABLES with
colspan.