How do I make my table spacing slightly better so the words aren't on top of each other like in this screenshot:
I'm just using generic table HTML coding. Tried spacing and padding with the tr tag.
Its not problem with table spacing, you need to increase line-height for your text.
Related
I have a table with two columns. The left side us usually 1 word, and the second one with a bit more text. When I have too much text on the second column, the first one expands and center the text.
How do I remove this unwanted padding so the text will be on the top-left?
add css in td or in .tlt vertical-align:top
Inside a table-row, the two cells have always the same height. It shows as a padding, but it's automatically applied.
As some users mentioned, you can set a vertical-align: top; for the cell, and than play with padding top to position the text.
in ALL browsers, the browser will make padding and margin between all the things. to remove that and control the page yourself add this add the first line of your css:
* {margin:0 auto; padding:0}
auto makes all the things (except text and images) at the center of your page.
and for your table if you want texts to be on top of your td, add this:
.tlt{vartical-align:top; text-align:left;}
Just Select your Class via .tlt and add vertical-align:top you don't need to do anything more since for your .tlt just padding-right has been added so that there will be a space between two columns.
CSS
.tlt{
vertical-align:top;
}
Add it at the end of your Css Code.
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 making a new site where the headings have backgrounds around them and a little padding.
This is a responsive site, so in some states the headings will break into multiple lines, resulting in them losing the padding to the right on the first line, and to the left on the second line. I am using display:inline since the padding needs to be adjusted around each line.
Is there any way to keep the padding when breaking lines?
Example:
http://jsfiddle.net/gmW5X/
The padding is missing after introducing and before the ...
This does not need to scale down to old ie since the problem only appears at the mobile css targeted to primarely iphone. However, i'd very much like not to alter too much html :/
I don't see another solution but wrap each word in span... http://jsfiddle.net/gmW5X/4
display: inline-block;
do the trick.
jsFiddle
Could someone take a look at the following link of a work in progress test page for my new website - http://goo.gl/YwGiB
I'm new to CSS, and I have come across some issues that I can't figure out without some expert help. Could someone answer me three questions and possibly an explanation of how to amend it?
1) Why does my middle column by default split itself into sections, whereas my right hand column is pretty much the same but does not have the divisions? What could I do to cause that to default in the right hand column?
2) I am looking to have a box in the right hand column running parallel to the first box titled 'news' in the centre column, and then a second running parallel underneath this (with the box titled 'blog' but it will have an irregular length. What would be the best way to do this? Would this be a case for using the standard positioning commands to shift them into place or is there a better way?
3) I have stripped the padding and margins from my h1-h3 tags (specifically the h2 tag) yet there still appears to be space above the lettering. It is more pronounced when using the font MerceariaAntique which is going to be the final font, but unfortunately I am unable to amend my html file to show this right now. I am attempting to resolve it by adjusting the line-height but I am not getting anything consistent. Is there anything else I can do other than make line-height and margin adjustments?
Thanks in advance
Firstly, in your markup, you have divided your sections using the <div> element, which is completely acceptable, however you have used the same ID to identify each of them. This is what classes are for. IDs should be unique and only used once on a page, classes can be used to apply the same styles to multiple elements.
So this:
<div id="newsitem">
should be this:
<div class="newsitem">
Answers to your actual questions now!
By default, paragraph and headings have paddings and margins set. The reason your sections have spaces is down the margin on the paragraph tag. Removing this removes the space, but also brings the text together with the next heading. You can over come this by giving the <p> tags 0 margin and giving them padding, or giving padding to the section container instead.
If you want the boxes in the right hand column to line up with the ones in the middle column, you'll have to change how your layout works so that you have rows rather than columns I think. That would make it easier to line them up.
From your description, you should then have the following layout:
middle column | right column
middle column | right column
middle column
To maintain the background colour of the centre column, you could apply the background-color property to the class .centre or to be more specific .column.centre (this type of CSS selector might not work in IE6 though).
The issue with the H2 is down to line-height, each font may have a different line-height so you will have to play with the value until you get it right. If you find you're getting the top position right, but text underneath is getting closer or overlapping, give the H2 a padding-bottom value.
I see you are using h2 and h3, but I can't find an h1 that you mentioned. I'd remove "line-height" option from your css to prevent wrong/incorrect spacing.
To run div's parallel you need to have the same padding and margin on both divs (the left and right side). To do so just create a class "floatingColumn" that would float to the left and append it to both divs with all the margins and paddings.
Basically its a 2 column setup, with a dynamic width content column, and a static width menu column.
The content column is going to contain pre-tags (with code), and I need overflow:auto on the pre-tag inside the table to work.
So far I've had little luck. The nature of the pre tag forces a certain size on the table cell, which in turn refuses to be any smaller than the width of the pre tag.
Can anyone help out?
Ps. I've placed a second pre-tag on the page, which works as intended, but thats probably because it's not inside a table.
Add white-space: pre-wrap; to the element. max-width:100% may help too.
I found an acceptable solution.
The solution is a negative right margin for the pre (code) element.
Basically, a negative right margin will force the pre to shrink if it needs to.
I made margin-right -800px, and the width 97%.
I noticed that the width, paddings and borders need tweaking if to look good at all resolutions, but the solution works.
A simple solution that was hard to dream up.
[EDIT]
There was a link to an example, but it has been taken down.