So, I have a unique case where I'm using xslt to generate many (~50-100) div elements depending on the day from an xml like this:
<div class="allApps" >
Content here
</div>
<div class="allApps" >
Content Here also
</div>
...
I currently have them formatted into rounded boxes stacked vertically. How can I use css to position them into a "tabular" format, like fitting 5 in a row?
Alternatively, they were initially <li> instead of <div>. How could I implement tables with <li>?
The reason I'm doing this is to reduce the amount of scrolling required to get to the bottom of the elements.
Thanks!
If you goal is to reduce the vertical scroll then try to make some of them as
display:inline-block
You could make them all inline-block and then insert breaks every so often (like every 5th one). Or, if you want some great responsive options you could use Bootstrap.
If you are really set on using a table then li's have nothing to do with it. Li elements are for a list, not a table. Cells in a table use td like
<table>
<tr>
<td></td>
</tr>
</table>
But honestly, the easiest thing is probably to just switch to css display:inline-block.
Related
I've got a table row which has 3 columns now. text text image(with cellspan=2 and rowspan=2)
How can I remove that padding from the right inside the td.
Basically I want to push the image to the left.
img is inside td too
the problem here is, Verticle- align try to change the values as you wanted
example code
vertical-align:baseline;
assigned generally applies to common html elements. with this change, Now everything works as supposed to.
If you want to effect the entire table, you can remove explicit width from all <td>s, and then the text will take as much space as it actually needs.
If you want to effect only one row, you can put the text and the image inside the same <td colspan=2> instead of two separate <td>s
I always seem to run into this same problem which I think is a bit of a gap in my CSS knowledge. I'm using bootstrap but any particular best method would be fine. I simply want to create something similar to this:
<table style="height:100%; width:100%">
<tr style="height:15%"><td></td></tr>
<tr style="height:70%; background-color:#EAB300; text-align:center;"><td>Main</td></tr>
<tr style="height:15%"><td></td></tr>
</table>
http://jsfiddle.net/c24hd/
But with divs rather than tables. It takes seconds to do with a table but when I replicate it with divs I run into the trouble of not being able to apply a percent based height to divs.
Any tips so I can stop running into this problem?
TIA
I would make a <div> and set the height to 100%. Then set the inner <div> margins to auto.
EDIT: Never mind that, the best is way is to display the div as a table and the inner div as a table cell then vertical-align it.
EDIT: One more, you can even use absolute positioning to center it on the screen.
I have been working on a new document recently that requires the regular use of the <table> function. To fit as many tables into as small and neat a place as possible, I have been using the <div> function. It works well with most browsers, though it regularly causes elements on the document to collide and conflict with each other which is frustrating.
Is there any way to keep tables fixed in their right places, or alternatively a way to set a specified shape for a browser window?
Here is an example of some of the code I have been using:
<div style="float:left">
<table>
<tr>
<th>...</th>
</tr>
</table>
</div>
When including multiple tables and divs, they begin to conflict with each other when the browser window size is changed, this causes, as easily imaginable, lots of aesthetic problems.
Make table wrapper div of fixed width and also for the table too.
The possible reason might be because of fixed div width and overflowing table.
You can check upto where the table extends by giving it border.
float left property affecting table also.
So give,
<div style="float:left">
<table sytle="clear:left;">
<tr>
<th>...</th>
</tr>
</table>
</div>
or else float left to table also
I've got a FORM which contains a 32*50 TEXTAREA and a Submit button.
Now I'd like to align horizontally two text areas that contains additional information. Ideally the three text areas (the one in which the user can type/paste and the two others) should have the same width and appear in three aligned columns.
If I wanted to do that, should I use only HTML? If so, how? A table with one row and three td? (Sample code would be most welcome).
Or would you rather suggest CSS?
textarea is inline element and they would be horizontally aligned if the container is larger enough in width. So, see http://jsfiddle.net/FATfJ/ I don't know if this is the exact one you need.
code:
<form id="a-form">
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
</form>
#a-form textarea {width: 100px;}
Since textarea is an inline element, you can just put such elements after another. They will then appear in one line if they fit it but wrap to two or three lines if needed.
If you would rather force horizontal scrolling when there is not enough horizontal space, you can use a one-row table. There would be nothing special with the markup:
<table><tr><td><textarea ...></textarea>
<td><textarea ...></textarea>
<td><textarea ...></textarea>
</table>
But if you wish to fine-tune the rendering, then that’s best done with CSS.
If the textarea elements need labels, as they usually do, you can place them in another row of the table (at its start).
Ideally you need a nice combination on CSS and HTML. You could perhaps use fieldsets to put your fields in and then float them next to each other using CSS. You can set widths and margins etc using CSS and you should be able to line everything up this way.
You could use tables to do this but I find that they can add more code than is really required.
I need to make some changes on a legacy web-based cms (which has table-based layout). I can only make changes to the content area of the website, which is inside several complex nested tables, but I suppose we can assume it is just 1 table here.
Given the (simplified) code below, is it possible to display ABC on the far right in IE6 and IE7?
<table>
<tr>
<td style="width:200px; border:solid 1px black;">
<!-- can only make changes inside here -->
<div style="border:solid 1px red; text-align:right;">ABC</div>
<input style="width:300px;" value="DEF">
</td>
</tr>
</table>
The <input> tag represents some content that may be longer than the preset width of the table cell. In IE8 or other modern browsers, the div can expand to match the input. But in IE6 and IE7, i cant seem to get it to expand beyond 200px using just css. I've tried using float, width, position relative, etc. Once again, I cannot remove the 200px width declaration or make any other changes to the table structure.
Anyone know how to do this? Thank you.
If you can change the structure inside the cell, you can wrap everything in a div that have float:left (or right, or is inline-block), so it would expand to the contents like this: http://jsfiddle.net/kizu/AkVqS/
If you can't wrap the input part, you can use the expression that run just one time (so it wouldn't cause any performance problems): http://jsfiddle.net/AkVqS/2/