Newbie Alert! I'm asking this question, because management is in a hurry! They want seven pages done by yesterday. So I need some advice, quickly.
I have requirements to create a div that looks similar to the following picture:
This question is about Layout. I'm using the standard HTML dropdowns.
First: I started off by using 1 row with 4 columns. But then I found it difficult to align my labels (black squares on the left) with the dropdowns.
Second: Then I thought maybe I should create 7 rows, each with 4 columns, so I could better align the contents of each row.
Third: But given that I have to add the Help "?" button with the text, I started wondering if I should use an in-line-block. Also, by this time, I think I may be making the code more complicated than it needs to be.
So, what I am asking is:
What is the simplest and (or) most effective method to create a layout like this?
Perhaps, I need only 2 columns; one for the labels, Help buttons, and dropdowns, and the second column for the text boxes. My idea is that if I'm trying too hard, I'm probably doing it wrong! How would you do this?
Thanks for suggestions.
Related
Please see my awesome graphic below which is neither too scale or complete. BUT, I wanted to show the structure I'm going for instead of describing it.
I am creating a space rental system wherein a calendar, structured similarly to the below image, both shows the "taken" spots and also allows a user to click an "open" slot to reserve it themselves. I don't need help with the functionality though, just the layout.
Since this is tabular data at it's finest, with headers and everything, I was able to easily create the desired layout that way. However, tables render from left to right, so in the example below, it renders SPACE 1 9:00am, SPACE 2 9:00am, SPACE 3 9:00am, etc. I need it to actually render SPACE 1 9:00am, SPACE 1 10:00am, etc.
The reason is that in order to make each reservation into a "block" represented by the blue squares below, I need to be able to loop through the columns vertically and not through the rows horizontally.
I also want the columns to be a consistent width and be flexible if more spaces are added or if one/some are removed down the road.
I've been playing with flexbox, which I've barely used before, and I'm having no luck at all. I'm not even sure that's the right direction.
My question would be either 1) is there a way to get a standard table to load the way I want or 2) how can I do this without tables?
Maybe bootstrap's grid system will fit your needs. http://getbootstrap.com/css/
You can create a grid like structure by adding columns, up to 12 in a row, and locking those into rows.
I'm building a basic survey creation system, and I want it to look more or less like this. I'm tempted to use a table to align the questions and answer choices horizontally and vertically, but I know tables are for tabular data. Does this qualify as tabular data?
If CSS is preferable, can you give me a rough outline of how to achieve it (just on the alignment, not the alternate shading)? Would I need a series of classes, each with an increasingly wider left margin?
I snipped the image from SurveyMonkey, and I'd follow their example, except they use tables.
I searched for similar questions, but they all concerned vertical alignment, not horizontal.
Yes, this qualifies as tabular data: All values in a row belong "together" as well all entries in a column have the same meaning.
In general tables should not be misued for layouts, but in this case you're really working with tabular data. Especially for disabled people, e.g. people using screen readers, misusing tables cause confusion, but in this case it's correct to use them.
This is indeed a table moment. Table like gifs have their times and places. If you do decided to go the div route, one master div holds 4 rows that are absolute/fixed and then there is a div for each radio button. Div tags in a table thats the ticket!
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
http://weknowwhatyouredoing.com/
I'm trying to make a table like this one where I have a profile image to the left, a bold title/name and text underneath the bold title/name, and date/time stamp underneath that... basically the same views as on that website (http://weknowwhatyouredoing.com/) or better (or twitter tweets).
Anybody know of any tutorials on how accomplish this? I'm currently using table with multiple columns but it seems that when one cell is big, all the cells in that row become the same height and i don't like that. In android this is called a list view but i'm not sure what it is in the html/css world, any help please? Thanks in advance
You could make multiple tables floating next to each other. The elements on the website you show aren't aligned as fa as I can tell.
A tutorial on rowspan and colspan can be found here.
If you make the image span 3 rows, you can put the bold text, content and date stamp each into one row. With valign you can vertically position elements within a row if the row becomes higher than the content. This will probably happen if the 3 rows together are higher than the one spanning row containing the image.
As a quick fix for your issue with the equal row heights, you could use the same layout method as they use on weknowwhatyouredoing.com.
Wrap each column in a separate <div>, and then place your <table> inside.
4 containers, 4 tables with independent row heights.
You shall give a look at the Twitter Bootstrap CSS library Twitter Bootstrap
It's pure HTML5/CSS using only divs.
for improve your knowleges in HTML, you can see W3C (Word Wibe Web Consortium) specs. For sample, if you see this page, W3C explain all structure, attributes, for Table element.
You can find lot of tutorial in google ( search "tutorial create Table HTML" ).
Also, you can help you to understand website structure with browser plugins that display hover element in specific website. ( firebug for Firefox and Chrome, Dragonfly for Opera browser...)
Why not use multiple list elements? Tables definitely don't give you flexibility for responsive designs. Making multiple columns of list elements can be rearranged as needed with limited restrictions
I had a question with regards to fluid arrangement of tables. I have attached a screen-shot below to try and explain what I am trying to achieve.
Basically, I have a number of dynamically created tables. Their widths are fixed but their heights can vary. What I am trying to achieve is, the maximum utilization of space when the browser window is re-sized (in terms of organization of the tables).
I have tried the following:
1. Arrange the tables in descending order of the number of rows they have.
2. Using a style of 'float: left;' on the table (or a div surrounding the table).
However, as you can see below, there is a gap below on the first column that could have been utilized by table 4 (the last one below), but it hasn't because table 3 (column 2, row 2) is taking up some space which prevents table 4 from being placed above.
I hope I've described it in a manner that could be understood, if not please let me know how I could clarify any points so that you could help me out.
Basically trying to get a fluid design with the maximum space utilization. Any ideas on how I could achieve this?
Thanks in advance.
Example http://img717.imageshack.us/img717/5492/exampleqm.jpg
Can't be done without javascript (or a whole lot of assumptions and restrictions).
Try the Columnizer jQuery Plugin.
Try the jQuery Masonry plug-in.