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.
Related
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.
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 want to create a table with 3 columns: On the left and right fixed-width columns (which are obscured by position:fixed - divs) and in the middle a variable width column.
This does NOT work:
<table>
<tr>
<td width=202px></td>
<td> [MYCONTENT] </td>
<td width=200px></td>
</tr>
</table>
The problem is, that for some reason the browsers (tested on Chrome and Firefox) think that I don't really mean it when the browser-window is not wide enough: The outer columns are cropped and width-setting ignored, therefore the real content is sliding under my divs and become completely inaccessible.
The only idea I have left is to use a 1990's-era transparent pixel resized to 200px width, but I shudder at the thought. There must surely be a better way?
(BTW, yes I have tried various pure-css layouts, and none was suitable, for example if you use overflow:auto for the middle column, the scrollbar at the bottom also scrolls(!!) that means if the page is both higher and wider than the window, you have to first scroll down to see the scrollbar, then scroll horizontally, then maybe scroll up again to see what you wanted to see in the first place. I also tried to use padding: to force the needed margins on the left and right, but this also was ignored when the browser-window was not wide enough.)
ok - here it is with tables.
http://jsfiddle.net/sheriffderek/wAGKp/2/
i guess the short answer would be - take the styles out of the html and use a selector. (class in this case" and then min-width --- and width... also - keep in mind that padding and margins will change the width of your stuff... so you could use the border-box method... (it's rad) and included in the second... makes it so that padding stays in the original div size --- hope this helps.
and here it is the way i would do it. (without tables...)
http://jsfiddle.net/sheriffderek/GBtdy/1/
Tables are for tabular data, if you want to layout content you should be using CSS.
I recommend using something like Twitter Boostrap if you struggling with the CSS.
If you really just want a specific solution have a look at the results for terms like "css 3 column layout fluid center - I am not fobbing you off with that, there really are great answers there that are exactly what you want, and lots of search results will take you to those pages (especially to the manisheriar.com and A List Apart articles).
You can use min-width (on the middle div) and max-width - as well as media queries - to help control what happens in smaller windows.
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/
Background: I'm using a photo shopping-cart that automatically generates a tables-based gallery from php, thus limiting me from too much flexibility. I'm also a novice.
Problem: The gallery puts out table cells that adapt in height to the content. When I have a full row of horizontal thumbnails the table cells are short and wide and when a row contains a vertical thumbnail, the cells are much taller. I want the cells to all be square, with the thumbnail sitting right in the middle.
I have access to input CSS in the style sheet, as well as a small section of HTML input but this HTML is inserted inside the individual thumbnail table cells; I have no access to edit the main table HTML. I have discovered class and ID names for many components using firebug.
What I've tried: I've tried to insert DIVs of a fixed size but the table still eats up any vertical space not occupied by the actual image. I've tried inserting a transparent PNG file, 180px x 180px into a div (which works to force the right size cells) and then put the thumbnail image (which is 150px x 150px) into another div and mess with z-indexing, relative/absolute positioning, etc. but I never got the two divs to stack on top of each other. Absolute positioning always aligned all 50 thumbnails to the top left corner of the page, not the table cell. Right now, the thumbnail div always comes up directly below the PNG div causing the table cell to be way too tall.
I'm stuck because I've tried everything within my skill-set and exhausted my googling. I think what I need is a way to either force the table cells to stay a certain height or find a way to make the thumbnail image overlay on top of the PNG.
Here is my current code, which is putting a 180x180 PNG (to force the table to the correct dimensions) in one div, and the thumbnail image in a second div, below the first div. Please excuse my sloppiness as I'm in no way a professional, just a tinkerer!
HTML inserted into individual table cells
<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>
And I have access to these additional classes & ids:
<table class="thumbnails_table">
<td class="thumbnails_cells">
I think you can do this with pure CSS, without having to add and HTML (besides the image tag, of course) into the TDs:
td.thumbnails_cells {
width: 180px;
height: 180px;
text-align: center;
}
This is all it takes for me, 'cause my test image was already centred vertically (I think on account of its being inside a TD - default CSS and whatnot).
Hope this helps!
OK, I got this figured out...so simple, but hey when you've never done it before...
Based on good advice in another thread:
<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>