I have a unique design question. Basically I'm writing a chat script and would like to make the layout more uniform. Is it possible to have a unique set of columns per chat line without creating a new table for each line? For instance this is the design I am ideally looking for.
[TimeStamp] Me: I am writing a long message and this text will be
wrapped to the next line. See how the message text
is aligned perfectly when wrapped?
[TimeStamp] Them: When they write a message that requires wrapping
it aligns perfectly for them.
[TimeStamp] OtherPeople: I think this makes the concept clear if it
needs wrapping it aligns for each "poster"
If I create 1 table for all the messages it may make certain columns longer than they should be. I know creating a new table for each new post could accomplish this, just wondering if there is a more "Web 2.0" CSS way of doing this. Any help is appreciated.
Instead of using a table use divs for the poster name and the text.
so:
<div id="everything"><div id="everythingInside">
<div id="timestamp">[timestamp]</div>
<div id="poster">TheCoolGuy</div>
<div id="comment">I"m cooler than you!</div>
</div>
</div>
then use css to display it as a table:
#everything { display: table; }
#everythingInside { display: table-row; }
#timestamp, #poster, #comment { display: table-cell; }
Of course there are other ways using divs and further CSS as well.
Use code, pre, (and var, span, div) and friends. pre and code gives you whitespace-sensitive, fixed-width text, so the columns work just like above (in fact, you could just view source or inspect element). StackOverflow seems to use Google Prettify to do highlighting if you need that.
Related
I know there are many questions and many answers for this. Everyone has different problems with different solutions for different browsers.
I have tried many solutions from the below URLs. But nothing seems to work.
My output is as follows :
How can I avoid this kind of situation?
I don't want to mess up the table structure.
This table data are filled up dynamically using handlebars.js.
Links I have followed:
Link-1 Link-2 Link-3
.page-break is a div class which I have added after each section and that is working fine.
.Acc_Table is a table class which is shown in output image starting from SEARS/CBSD row and ending with payment history row.
How can I solve this?
Is it possible to close the table before the page break, put in the page break, and reopen the table after the page break?
Or what I wish to display the table on the next page only if it's breaking?
How can I achieve that?
have you checked if the table or if there is a div that is wrapped around it has the display: inline-block; or display: inline; CSS property?
I found out that while I was debugging some code for a printing problem that if the table is inline you get this effect. Try to put display: block or display: static, that works for me
When using a CSS framework's grid system, like that of Bootstrap or Materialize for example, I find myself typing the following HTML very very often:
<div class="row">
<div class="col s12">
<!-- Some text/ a button / something -->
</div>
</div>
Essentially I need to put one item, say a paragraph or a button, on it's own row on the page, and in order to do so I need three tags instead of just one. This over time creates a lot of bloat in my HTML.
I have considered creating an angular directive to make it one extra tag instead of two, but I feel like that's a sloppy solution. Does anyone know of a better way to solve this problem?
One OPTION will be to create a code snippet so if you type, element it will expand in the full HTML, snippets are available in sublime text, atom text editor.
Another simple option is to use emmet, it is available in the two mentioned before and brackets, like this:
.row>.col.s12>element TAB
try something like this..
.parent {
display: flex;
}
.child {
flex: 1; /* will grow and shrink with the screen size
min-width: 20ems ; /* optional if you want the element to not fall below a certain width
}
This is just a small example..look into flexbox and see how you can style your rgrids better..
I am tearing my hair out on this one and it seems I am probably not searching the right terms and the google results I get seems to be general layout type of questions.
I have some data that I wish to represent in a web page. There are some 20~30 fields of different data. If I were to do it with what I know, I would so something like this(total of 3 columns and 30 rows each field is different data):
<table>
<tr><td>Field1:</td><td><input id="dataforField1"></input></td><td>Field2:/td><td><input id="dataforfield2"></td></tr>
<tr><td>Field3:</td><td><input id="dataforField3"></input></td><td>Field4:/td><td><input id="dataforfield4"></td></tr>
</table>
However I have been reading lately that div is much preferred when presenting non-tabular data. So I attempted to do this:
<div style="float:left;">
<ul>
<li>Field1</li>
<li>Field2</li>
<li>Field3</li>
</ul>
</div>
<div style="float:left;">
<ul>
<li><input id="tag1...</li>
<li><input id="tag2...</li>
<li><input id="tag3...</li>
</ul>
</div>
but my field labels are not lining up with my data input elements. Field1 seems to match input1 horizontally. But when I get to field10, it is off by a lot. I tried it without ul and li and use br after each, but I can't seem to get them to line up.
Question:
How do I get them to match if I don't do table?
I need clarification on the word "tabular". If my data were a table, it would only ever going to have 1 row. When is it okay to use table?
What do people use to line things up when they are trying to implement similar things?
Edit:
I want Field1 to line up horizontally with input tag1 and so on.
Edit2:
Added a picture to show how things are not lining up. it would be the same without li.
I would generally suggest adopting a grid system for this purpose. There are many great ones. My favorite one for web development is Bootstrap's grid. Bootstrap as a framework is amazing as well.
I will also add a quote of my comment regarding this:
... It is really recommended to only use a table when you are actually
willing to show a real table with information in it. The old way of
presenting forms in tables to achieve alignment is just a no-no these
days. Grid systems do it better and they are more responsive.
However.
The disalignment was caused by loss of relativity between the text (labels) and the input fields. As the list goes longer, the proportions are losing. This is because the height of the text is not the same as the height of the input field.
CSS:
li {
height: 40px;
}
This makes sure all <li> elements will have the same height. Of course it's recommended to apply the style to a class and not directly to an element, but this is just for the sake of the solution.
CodePen: http://codepen.io/arielweinberger/pen/jqveoX
I haven't managed to re-produce what you said you are experiencing.
For labels and inputs you should use, you guessed it: labels and inputs. Put each pair under the same parent, make them inline-blocks with a fixed width and you're good to go. No need for external tools, this is as basic as it gets.
label {
margin-right: 10px;
width: 120px;
display: inline-block;
}
<div style="float:left;">
<ul>
<li><label>Field1</label><input/></li>
<li><label>Field2</label><input/></li>
<li><label>Field3</label><input/></li>
<li><label>Field4</label><input/></li>
<li><label>Field5</label><input/></li>
<li><label>Long Field Name</label><input/></li>
<li><label>Field6</label><input/></li>
<li><label>Field7</label><input/></li>
</ul>
</div>
I've researched similar questions and tried using display:table-cell; inline-block; vertical-align:middle all over the place, but I can't get this to work. In this sample Genesis theme page (please look), it demos the use of columns using 'one-half' and 'first' CSS classes. Using DevTools/Inspector you can go in and add <img src="http://placehold.it/140x240"> before the paragraph like I've shown below. Maybe there's something in the Genesis columns that's making this harder than it should be, or more likely I'm missing the obvious.
In that first column I need the img to appear to the left of the text, while the text is vertically aligned. I can't seem to find out the combination that will do it. NB I do know the height of the image - it's not dynamic. I could use spans if easier in stead of P.
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</p>
</div>
The key here is declaration of the widths. p by default will have 100% width even if you set the display to inline-block, so you need to set it up with something like this:
<h3>Two-Columns</h3>
<div class="one-half first">
<img src="http://placehold.it/140x240" class="OneHalfItem"><p class="OneHalfItem OneHalfText">
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
</p>
</div>
Note the classes added to the children, with the CSS now applied:
.OneHalfItem {
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
}
.OneHalfText {
width:calc(100% - 140px);
padding:10px;
}
Now it lines up nice and dandy, with the use of calc. Couple of things:
This works easily because the picture is a fixed width; if the imgsize is variable, you need to declare it's width as well (a percentage or something), then calculate the p size based on that
I eliminated the white space between the end of the img tag and the beginning of the p tag, because by default inline-block will add in a 4px margin to the right of each element. By removing the white space between the tags, it eliminates that empty margin.
Note that this will only work for IE9+ (and real browsers, of course), so if you need to support IE8- then you'll need to do the same kind of width calculation via JS, but easily done.
Here is a jsFiddle to show it working.
I'm trying to figure out how to develop a page that we can use to organize a magazine. There will be multiple sections to the magazine that will contain multiple pages, each page may have multiple articles on them. To accomplish this, I want to have a DIV for each page or section that will intent to show that it's subordinate to the group above it. Here's a picture of what I want it to look like:
http://chromaticinc.com/help/final.png
I'd like to only use CSS to accomplish this. So far, I've come up with this:
http://chromaticinc.com/help/
But it is using Javascript to set the width on the 1st column, because each of the other columns has to line up too and with the variable width on the 1st column, it throws off the layout. I'm sure I could use Javascript to set the width of the "Comments" column, but I feel like there has to be a better solution using CSS.
I'm open to using tables, if it would make sense, but each item will have to be draggable so that they can be rearranged and also they will have to be able to be moved into other sections, so I've set them in DIVs to make that easier.
Any help or suggestions would be greatly appreciated.
You should be able to do this using relative positioning.
You will want to give the element an id and then use some CSS like this:
#divid {
position:relative;
left:20px;
}
This will force the div to move over however much you specify from its default position.