I have a table created in XTMl, and I have two lines in table cell, for example:
Firstname
Surname
In the same cell I would like to place the image on the right. When I insert it like <img>
I get gap between two lines like this:
Firstname
Surname
Often the image is placed under second line. Why is that happening, and what I should do to prevent it ?
<td><strong>Name<br />Lastname<img src="images/1.gif" alt="img" /></strong></td>
Try adding the css style "white-space:nowrap;" to the td.
In the image style try adding "float:right" to the image.
The image element is an inline-block element, which means that it's a block that is part of the inline content. When you put the image tag in there, it's part of the second line of text. The second line will get high enough to hold the height of the image, that is causing the space between the texts.
You can take the image out of the inline content by making it a block element, and you can place it to the right by floating it.
Put the image tag first in the cell, and add the CSS style float:right; to it. By making it a floating element you also automatically make it a block element.
Related
I have HTML page that contain multiple div element each div is card that display as inline-block the number of generated div depends on row data comes from server, until here every things going as i need but theres whitespace between each card div that make an inappropriate display on phone and i think the problem from whitespace i'll attach screenshot for inspector?enter image description here
display:inline-block seems to leave very small spaces between elements.
Either use flexbox (display:flex on parent element) or a little trick of adding margin-left:-1px to each element (or however much space is being created between each element).
Inline elements are treated as text. (I'm making this overly simplified.) Notice that text has spaces between words. Images have spacing between them for the same reason. Therefore, inline elements will have spaces between elements.
The way around this is to trick the browser into thinking elements are letters
<div>content</div><div>content</div>
Now there is no spacing or elements between content.
There are other ways to do the same thing, such as:
<div>content</div
><div>content</div>
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'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 have a table with 2 cells and <img> inside both.
I tried to use cellspacing:0 and cellpadding:0, valign="top", but none of them seem to solve my problem, I still have this annoying space between my cells. how can I solve this problem
Here's my jsfiddle http://jsfiddle.net/gbumubn3/
The white space is because of the <img> not the <table> element. Because of it's display mode it's behaving like text and reserving some space for 'Descenders' which are the low-hanging parts of text for example the bottom part of a lower case 'y'.
For more on a 'descender': Typography Descenders, on Wikipedia
The basic solution:
The solution is to set the CSS style display:block on your <img> elements.
The 'elegant' solution:
You can implement a CSS rule to automatically set display:block on all images who are the only child of a table's <td> element:
td img:only-child {display:block}
Edit: You can also use the CSS attribute vertical-align to solve this issue whilst preserving display:inline-block.
Forked example:
Click here for JSFiddle example
The space is actually caused by the <img> tag. Take a look at this jsfiddle (I've added a red border to the table cells): http://jsfiddle.net/gbumubn3/13/
See this answer for more details.
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed.
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 :)