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.
Related
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)
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?
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
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...
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.