I am trying to create a table for printing purpose.
As seen in many forms, I want vertically rotated text and both left and right side of the form.
So far I have achieved this
Fiddle: http://jsfiddle.net/naveen/P8AZD/
This has two problems
I wanted the border td widths as 50 px with the text spanning more area. Currently the rotated text also gets clipped to 50px. How to overcome this?
The style rotate-right has incorrect filter: progid:DXImageTransform.Microsoft.Matrix. It has been copied from .rotate-left. What does the values (M11, M12, M21, M22) in the filter denote?
What is wrong with my code?
See http://jsfiddle.net/P8AZD/7/
I added a div around your text and made it not wrap
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'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 :)
jsFiddle
In this jsFiddle I've got two images and then some text. I want it to appear like this:
note: the images and text should be sitting on the same horizontal axis, the text is not supposed to be higher
So what I'm trying to do is make the text appear over multi-lines within a box with a width of 150. How can I do this?
Is this what you're trying to do?
As you can see I've only changed your CSS a bit by adding a display:inline-block to your text container.
I floated 3 images in divs in the middle of a long section of text. I want to float them so the site keeps it's 'liquid' design, adapting to any width browser window. But if text starts wrapping to the left of them on wide Windows, it looks bad. I'd like them to float, but still be able to clear text around them so they look like a block element. How can I do that?
I thought maybe of sticking in a 100% width div right after the image divs, that's 1px high, and filled with a 1px image that's just the background color. Will that work?
http://www.briligg.com/frailty.html
The images in question are the ones at the beginning of the 'the cause of addiction is stress' section. Line 134 to 146, references the internal style sheet.
Put a clear: left on your section of text following the images.
That appears to be your div with class text though I don't know if you would want to universally apply the clear to all the divs with that class.