I'm new to this. I'm writing an email template using HTML. I'm not sure if CSS is supported, but I know everything has to be inline. I have one line of space between my paragraphs, using <br />. I also have a ul element, and I want the same spacing between the list items.
When I use <br />, I end up with two lines of space. From reading other questions, I'm thinking I need to use span style or div style to change the bottom margin or line height, but I don't know what that should look like exactly.
You can do this by set line-height property to your ul element like this.
<p>First line of text <br/> <br/> Second line of text</p>
<ul style="line-height:2em">
<li>First li element</li>
<li>Second li element</li>
<li>Third li element</li>
</ul>
Because the editor can't support CSS and even auto-deletes some HTML things, my eventual work-around was to create three separate lists.
<ul>
<li><span style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif"><span style="font-size:12pt">Text of first list item.</span></span></li>
</ul>
<ul>
<li><span style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif"><span style="font-size:12pt">Text of second list item.</span></span></li>
</ul>
<ul>
<li><span style="font-family:Lucida Sans Unicode,Lucida Grande,sans-serif"><span style="font-size:12pt">Text of third list item.</span></span></li>
</ul>
Related
I want to have wrapped contents automatically indent according to the first line. In order to do this I have used the following HTML and CSS code:
li {
padding-left: 10px;
text-indent: 10px;
}
.Slides {
width: 20em; //Showing wrap-around
}
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<li>First line</li>
</div>
<div>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</div>
</div>
This gives me a nice indentation in case of multiple lines but only in webkit browsers. In Firefox and IE the contents are overlapping with the bullet point.
In order to check for this I have also tried wrapping the contents inside li elements. But this again gives me very different layout across browser. How can I achieve a consistent behaviour in all browsers?
Please try this. I wrapped li tags in ul. sometimes it creates issue if li's are not wrapped properly in ul's
<div class="Slides">
<div>
<h1>My heading</h1>
</div>
<div>
<ul>
<li>First line</li>
</ul>
</div>
<div>
<ul>
<li>Second line which is very long, must have the same indentation (when wrapped to next line) as that of the first line.</li>
</ul>
</div>
</div>
Dont use the <li> element at all. Just use plain old <p> elements and style the indent purely with css. You can even use a glyphcon or css to add the bullet point back if youd like. Also in css if something works in one browser and not others, try adding vendor prefixes. Sometimes a browser dev adds features in beta, so you have to ad the vendor prefix to use them.
I'm puzzled by this. In a nested list, by setting the height of LI elements the list, the items overlap. What is the explanation for this, and what is the proper way apply height without overlap effect? (I want height, not padding or margins.)
.aaa {background:#ccf;}
.bbb {background:#fcc;}
.bbb li {height:25px;}
<ul class="aaa">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<ul class="bbb">
<li>one one one</li>
<li>two, too
<ul>
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
<li>three</li>
<li>here comes four</li>
</ul>
<li>two, too
<ul> <-- this list is part of your LI
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
</li>
Since you have a list nested in a list, the inner list overflows because it is bigger than 25px.
Use min-height instead of height.
The second tier li is inheriting the CSS from the top tier li
You need come CSS like
ul li ul li {/*style to hit the bottom tier*/}
This looks like you are making a menu - Tuts like this (http://www.devinrolsen.com/pure-css-vertical-menu/) could advise you for better code but Padding and margin are recognised techniques to achieve what you apparently want
HTML List bullet jump to second line when it's line brake.
For expmple:
<ul>
<li>First list</li>
<li>Second list continue to second line.</li>
</ul>
First list
Second list continue to
second line.
How do I make the second list bullet to show up, using CSS?
NOTE: This is only happen when there is not enough space. For example when I view this on my iPhone it's like this. But on my PC looks normal.
If you're okay adding some extra markup, your best bet is to try to utilize the vertical-align property.
<ul>
<li><em></em><span>First list</span></li>
<li><em></em><span>Second list continue to second line.</span></li>
</ul>
CSS:
li em {
height: 100%;
vertical-align: middle;
display: inline-block; }
li span {
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/jB9Ad/
From what I have collected of your Question... You want something along the lines of displaying another "INDENTED" Unordered/Ordered List within that list... Well without using Line Breaks or CSS you could do this...
<ul>
<li>This is an item within the parent List.
<ul>
<li>This is a child list item, and the beginning of a new list.</li>
</ul>
</li>
<li>This is the second item within the parent list</li>
</ul>
That should help! :)
if all you care about is iPhone or WebKit set your li's to overflow:ellipsis; firefox nightlies may support it, but i know ff hasn't had it for a bit.
I have a ul list which has a few single and some multi-line li text..
Now for the multi-line text, the 2nd line of text starts at a different indentation than the 1st line of text.
I want a very basic approach to fix this issue which should be cross-browser compatible.
Just to add, I want some space between the ul and a neighboring image (so kind of margin)
My HTML and CSS;
<div class="fl">
<div class="resDtp2"><img src="images/book1.gif"></div>
<ul class="resDtp2 txtSmall">
<li class="resDtpPad"><span>Some text Some text Some text</span></li>
<li class="resDtpPad"><span>Some text</span></li>
</ul>
</div>
div.resDtp1{float:none}
div.resDtp2{float:left}
ul li.resDtpPad{text-align: left;}
You can give the li's a padding-left, that should do it
What is the proper way to provide a semantic caption for an HTML list? For example, the following list has a "title"/"caption".
Fruit
Apple
Pear
Orange
How should the word "fruit" be handled, in a such way that it is semantically associated with the list itself?
While there is no caption or heading element structuring your markup effectively can have the same effect. Here are some suggestions:
Nested List
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
Heading Prior to List
<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
Definition List
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>
Option 1
HTML5 has the figure and figcaption elements, which I find work quite nicely.
Example:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
These are then easily styled with CSS.
Option 2
Using CSS3's ::before pseudo-element can be a nice solution:
HTML:
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::before instead, or whatever you need.
This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit"> and ul[data-title]::before { content: attr(data-title); }).
As far as I know, there are no provisions in current HTML specs for providing a caption for a list, as there are with tables. I'd stay with using either a classed paragraph, or a header tag for now.
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
In the future, when HTML5 gains wider adoption, you will be able to use the <legend> and <figure> tags to accomplish this slightly more semantically.
See this post on the W3C mailing list for more information.
To ensure screen readers connect the list to an associated heading, you could use aria-labelledby connected to a heading with an id like so:
<h3 id="fruit-id">Fruit</h3>
<ul aria-labelledby="fruit-id">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
As noted in a previous answer, make sure your heading level follows heading order in your document.
There is no caption-like tag for a list like a table has. So I'd just give it an <Hx> (x depending on your previously used headers).
I know this is old but wanted to add the answer that I found for future people:
https://www.w3.org/MarkUp/html3/listheader.html
use the <lh> element:
<ul>
<lh>Types of fruit:</lh>
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ul>
<ul>
<p>YOUR CAPTION</p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
It works. But i'm not sure that is the best way, i'm just a beginner
Since I was trying to find a solution with older browser support, I have what might be an over-simplified solution. Using table display styles and ids/classes:
<ul>
<li id="listCaption">My List</li>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
Then apply the display: table-row; style to the element in CSS:
li#listCaption {
display: table-row;
font-size: larger;
text-decoration: underline; }
This works much better if you are using a description list, which is what I was doing when I had the same question. In that case, you can use <div> in the HTML and display: table-caption; in CSS, as div elements are supported within the dl list:
<dl>
<div id="caption">Table Caption</div>
<dt>term</dt>
<dd>definition</dd>
</dl>
In CSS you can apply various styles to the caption:
#caption {
display: table-caption;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
background: transparent;
caption-side: top;
text-align: center; }
I should note that table-caption does not work as well in ul/ol as it is treated as a block element and the text will be aligned vertically, which you probably don't want.
I tested this in both Firefox and Chrome.
You can always use <label/> to associate label to your list element:
<div>
<label for="list-2">TEST</label>
<ul id="list-1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<label for="list-2">TEST</label>
<ol id="list-2">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>