A simple question but large impact on appearance.
I want text indented from cell border and have tried style=text-indent: 4px (not formatted so it displays properly here) but while the first line is indented, the lines after the <br> tags are not indenting. Please help. I need to use div because of some Javascript. Here is flawed code:
<td>
<div id="navbar" style="text-indent:4px"><b>View by:</b><br>
Popular<br>
Trending<br>
</div>
</td>
text-indent is only supposed to touch the first line. Use margin (or margin-left or padding or etc) if you want to adjust the entire block.
Try adding paddding to element, that holds your text you want to indent.
<td style="padding:5px;">text</td>
Related
I have a document like this:
This is some text.<br>
This is some more text.<br>
This is yet some more text.
This renders like this:
This is some text.
This is some more text.
This is yet some more text.
Is there any way to adjust space between lines, but only where the <br>'s appear? The output might look like this:
This is some text.
This is some more text.
This is yet some more text.
This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.
How can I adjust the amount of space between lines where <br> appears?
It is possible to target a <br> tag with CSS but it will not be very cross-browser compatible and it just isn't a very good idea because anyone looking at your code will assume you haven't got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.
br {}
The <br> on it's own has no default height. If you have an HTML page with nothing but a <br> you have an empty page. The style on the <br> tag will be
<!-- HTML -->
<br/>
The page will have this styling
height: auto;
line-height: normal;
max-height: none;
min-height: 0px;
The height of that a <br> tag represents is inherited from the styling of it's parent container. Thus if it is nested within a paragraph; the <br> will equal the height of 1 line of text based on the line-height and font-size of that paragraph.
<!-- HTML -->
<p style="font-size:10px;line-height:1;"><br/></p>
I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it's not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.
The current CSS1 properties and values cannot describe the behavior of
the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break
between words. In effect, the element is replaced by a line break.
Future versions of CSS may handle added and replaced content, but
CSS1-based formatters must treat ‘BR’ specially.
- Cascading Style Sheets, Level 1, Section 4.6: 'BR' elements
An appropriate solution would be to separate the upper and lower block into two containers (<p>) and set a margin between the two blocks. If you use a <p> tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..
// CSS
p + p { margin-top:10px } // for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one.
Or merely adjust the line-height of the text if you don't mind the space between every other line increasing as well
You could potentially also find the pseudo-selector ::first-line useful.
Though I can't fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the <br> wrap it in a container and set the line-height of the container.
<div style="line-height:50px;"><br></div>
Yes you can...like by using line-height in css
.test{
line-height:40px;
}
Demo
You can use padding-top also
Demo2
Need assistance adding padding to the main body text of this emailer so the text does not look quite so tight to the border.
It's probably a simple solution but I can't work out which table to add the cell padding property to.
live version -> http://garyrevell.co.uk/mercy2013/2013-temp/alt-april-mailer/index-purple-final.html
Pastebin of the code -> http://pastebin.com/PAbYgqXN
Help would be much appricated.
Always add padding the the table cell that the content is in. eg:
<td style="padding:30px;">
<singleline>your content</singleline>
</td>
It looks like your content however is living outside of tables in divs instead. You should lose the divs and put everything into td sections. Also, don't have a table next to text inside a parent td, instead have a table cell for each (use table rows if stacking them).
This is quite strange to me... I have a small image that's a link and a text link underneath that. If I separate them with a <br/>, the text shows up formatted like a link but you cannot click it. If I use <p> </p> instead, the link works fine... I just don't want that much space in between them. I've closed both link tags so that's not the issue, and I've tested it in both Firefox and Chrome and both gave me the same issue.
Code portion:
<div id="content">
<br/><a href="#newtitles">
<img src="images/sterling.png" style="border: 1.5px; border-style:solid;"/></a>
<br/>
Fall 2011 Catalog<div style="position: relative;left:155px;bottom:20px;"><img src="images/new.png"/></div><hr/><br/>
</div>
I've determined that this is being caused by the neighboring div:
<div style="position: relative;left:155px;bottom:20px;"><img src="images/new.png"/></div>
When I take it out, the link works again for some reason.
You could always adjust the line-height property for the <p> so that there is the same amount of space as there would be with a <br />.
You can give the <p> an id, and then adjust its line-height, padding, margin, etc properties to remove some white-space.
This does not seem to be an html issue, but rather one with the layout. Can you post the relevant css? or even better, make a fiddle
I want the text to appear in one single line..td actually contains text and drop down list controls...Also its a table within another td tag
I have tried changing everything..alignment, width..what not
but the text moves to the next line instead of appearing on the same line..I want the horizontal bars to appear..what value should I give to the width attribute of table ?
hope the question isnt confusing :/
Try applying this class to td:
.scroll{
overflow:auto;
overflow-x:scroll;
}
<td class="scroll">A lot of content here....</td>
Alternatively, you can put a div inside the td and apply the style to that instead:
<td>
<div class="scroll">A lot of content here....</div>
</td>
Update
You can apply the inline style like this:
<td style="overflow:auto; overflow-x:scroll;">A lot of content here....</td>
Imagine I have the following code (simplified regarding my real context of course):
<div id="box" style="width: 120px;" onmouseover="this.style.width='200px'" onmouseout="this.style.width='120px'">
<div>A label</div>
<div>Another label</div>
<div>Another label, but a longer label</div>
</div>
What I want to achieve is the following:
My div box has a fixed width (120px by default).
In this configuration, every label nested in the box must be written in a single line.
If the text is too long, then the overflow must be hidden.
In my example, the third item will be displayed Another label, but a or Another label, but a ....
When the cursor is entering the div box, the width of the box is modified (for example to 200px).
In this configuration, the labels that were shorten in the first configuration are now displayed in the whole space.
With my code snippet, the third label is displayed in two lines when the box has a 120px, and I do not want that...
How can I achieve that?
Note that I would be great if the solution works also for IE6!
Even if I prefer a pure CSS/HTML solution, (simple) Javascript (and jQuery) is allowed!
Try putting the following as class on your divs:
white-space:nowrap;
I don't have IE6 here, so I can't this this.
style="white-space:nowrap; overflow:hidden;"