I'm trying to create a list of products using a <table> since it's basically a table with rows and columns.
I want to have one of the columns list whether the item status is available or unavailable, and I'd like to represent this with a little green icon if available, red if otherwise. I also want that icon to be clickable to change it.
So I Googled and found I might be able to position it if it's a background image, but I want it clickable, so that's no good.
I've tried all the vertical aligns and centers etc.. that I've read and tried margins and padding and all sorts but I can't get my little icon image to be in the middle (horiz and vert) of my little <td>.
To clear something up:
I just want to know how to align the image within the <td>. The image itself is the anchor, when its clicked, the page reloads and the icon chanages. I've tried positioning this image within the <td> but can't. That's my question: How to position it?
Not sure why you are having difficulty aligning your image within the table cell. Tables contain many helpful properties that help with alignment. Here's an example table with images aligned to the center of the table cell.
http://jsfiddle.net/Puppies4Life/zka5Q/
First of tables should only be used for data and a list of products isn't data. I'd recommend using either plain old divs or a UL with lots of floated LI elements.
For your icon it would probably be best to make it an 'A' tag and either have the icon sitting as an image in the 'A' tag or have it as a background to the 'A' tag.
To align it horizontally make it's parent container text-align:center.
I'll assume that each product is going to be an image and be a set height? If so then to align it vertically simply make the padding-top of the container the correct height to set it in the center.
Hopefully the above will work for you :)
Related
I have an image that is displayed from an awesomefont character with text next to it. The problem I have is I don't want the text to appear under the image, but in right-justification to the right of the image. I've tried using a separate container and different types of alignment codes, but I can't get it to do what I need.
To view the problem, go to www.gibsonits.com and scroll down to the table of 6 points (2 rows, 3 columns). There you will see the text wrapping around the icon.
You need to add two divs side by side inside wrapper div. In first div, add font awesome icon and in second div add text. Look at working example here
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
I just want a basic html box that is completely position to the left side of the webpage and overlays everything, and just to be a certain color with vertical text as demonstrated in this picture: http://postimg.org/image/l12q7hxqn/
Can this be done with HTML? I assume it would be a very basic code but I dont know what. If someone could make the code, I could figure out how to adjust the dimensions & color.
Thanks
you can use vertical-align: middle; and float:left properties in css
You can do the formatting by putting the html box inside <td> and <tr> tags and another set of <td>,<tr> tags with nothing inside them. With this, a table with one row and two table data will be created and the html box will be treated as a left-most table data of that particular table.
I'd like to create a 3 column layout, with the middle being for all the content and menus and the other two being a solid background color.
I have something like this set up already, but the middle column doesn't extend to the bottom of the page. How can I get this middle column to extend to the bottom of the page?
Since most pure-CSS answers to this question are not supported by browsers, your best best is often to use a background image for this. Create the image with the right sized columns and apply it to whatever contains all three columns on the page. Make sure that the image can be horizontally repeated, and it will do so all the way down to the bottom of the page, even if the middle column is not actually the right size.
This site is really helpful for this sort of thing:
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
But I think the basic idea is you create a float:left div and then a float:right div and then another div for the middle.
I have been trying to position content within a table row. The row in question in turn contains 2 other tables and 1 small thumbnail image (each within a table cell of course). The row was positioned using valign="top" till now. This worked well getting contents of all the three columns to the top.
However, I wanted to position it using CSS position:relative; vertical-align:text-top;
This positions the cell content well if there is no thumbnail image. However, once the image is included, the other columns are not positioned at all. See the image below.
*Sincere Apologies for the Shoddy Image Formatting.
I want the two tables as well as the thumbnail to be vertically aligned to the top.
Please note that all margins and paddings are set to 0 and the sizes in the image are actuals.
Does somebody know why my browser (Firefox) is behaving this way and how to correct it?
Ok got it! It seems that vertical-align:text-top aligns an element to the top of the parent element's text and not to the top of the parent element! Changing it to vertical-align:top did the trick :)