Whenever I stick TextArea inside 'li' tag in ordered list, the number for that 'li' appears next to bottom-left corner of the TextArea instead of top-left. Is there any fix? Can't seem to find it anywhere on the net...
Example:
<ol>
<li>Coffee</li>
<li>
<TextArea></TextArea>
</li>
<li>Milk</li>
</ol>
Will output something like:
Thanks for help... I seriously don't have nerve to css^^
textarea {
vertical-align: top;
}
jsFiddle Example
Related
I've looked at various solutions in regards to this question, but they don't seem to apply.
This is my simple HTML code:
<ul>
<li>Home</li>
<li>Games</li>
<li>Trivia</li>
</ul>
How do I increase the space between the text and the line underneath it?
Use <br> or line-height css rules or simply do that to <li> css:
li
{ display:block;
height:XXXX;
}
Add this to your css:
li {
margin-bottom:5px;
}
Change 5px accordingly.
There are actually three or more ways.. here are the best three:
1. make that will make a brake between them, like you just hitted enter key.
2. You can use li{padding-top:10px;padding-bottom:10px;} or just in html using
ul>
li style="padding-top:10px;padding-bottom:10px;">Home
You know what I mean, I cant write it correctly, cause it will do ul in that post..
now, the third should be same as padding, but use "margin" instead
I am creating my webpage, using HTML5 (but possibly what I am asking has nothing to do with 5 spicificaly).
I am trying to have a indent there, like,
<ol>
<li> <fontspec from css>title</fontspec from css> detail about title
</li>
<li>..</li>
...
</ol>
What I want is the "detail about title" should appear in the next line (I am using br for that), and will be intended; as
1. title
detail about title
I can have the effect using space   , but then I have to remember all the number of space I am entering, for all the page. Is there any tag in html that will do these things for me?
EDIT:
Thanks for your reply, indent is working, but as normal to <p>, this is not writing to the next line, but taking one line extra gap. Its now coming as:
1. title
detail about title
EDIT2
Here is the snippet from actual page:
In Html:
<ol>
<li>
<item>title</item><p class="indent">details about title</p>
</li>
</ol>
in css:
item{
font-size :120%;
color :#096cdb;
font-weight : bold;
}
.indent{
margin-left: 20px;
}
*EDIT as jukka's comment *
I have realized theat item is not html tag. w3c validator is giving error, though chrome is rendering it as my intention. I tried to put h4 instead of item, but it is also taking space of next line. So, what is the way out?
EDIT:
solved the job.
I have defined in css:
dt.item{
font-size :120%;
color :#096cdb;
font-weight : bold;
}
and then did:
<li>
<dl>
<dt class="item">title</dt>
<dd>details about title</dd>
</dl>
</li>
This has the output I am looking for, and is also validated by w3c.
There is. You could use definition list;
<ol>
<li>
<dl>
<dt><fontspec from css>title</fontspec from css></dt>
<dd>detail about title</dd>
<dl>
</li>
<li>..</li>
</ol>
Assuming that the real markup has something like
<li> <span class=title>title</span> detail about title</li>
and, for definiteness, that you wish to apply the same styling principle to all li elements, you can make the span element rendered as a block (causing line break after it) and set a negative first-line indent (text-indent property) and the corresponding positive left padding on the li elements. This means that in li elements, any lines except the first one will be indented by the amount you set. In the following example, the amount equals the size of the font:
<style>
.title { display: block; }
li { text-indent: -1em; padding-left: 1em; }
</style>
First, let's give it a class.
<p class="indent">detail about title</p>
Afterwards, we'll use CSS to set a margin to the left of the text.
.indent {
margin-left: 20px;
}
That should give you an indent. Adjust accordingly :)
Note that by using a paragraph element, there's no need for a line break anymore.
Is it possible to make check box items indented like Unordered list items inside a ordered list?
Here is the mock-up
The major issue I faced so far that is multi-line text will not indent. and I don't want make a table just for that layout.
The requirement is IE8 (I know, I know, but it is for banks).
New Update:
I end up using something like this, it works well with IE8 and reasonable well in Firefox 22:
<div>My list starts here.</div>
<ol>
<li>First item
<br/>
<input type="checkbox" name="item1" /><span class="CheckBoxSpan"></span>
<label>Checkbox item one, it also need be indent probaly like an list item, what happens if it has more than one line, it need be indentes, not wrap</label>
<br/>
<input type="checkbox" name="item1" /><span class="CheckBoxSpan"></span>
<label>Another checkbox item one, again it also need be indent probaly like an list item, what happens if it has more than one line, it need be indentes, not wrap</label>
</li>
</ol>
And CSS
.CheckBoxSpan
{
position: relative;
left: 4em;
}
li label
{
display:inline-block;
max-width:80%;
vertical-align:top
}
li input
{
width: 1.4em;
margin-left: -1.9em;
}
Without more info it's difficult to figure out what you want, but I think this may come very close. Just give the labels for the checkboxes display:block. And some cosmetics to make it look right.
li label {display:inline-block; max-width:80%; vertical-align:top}
See http://jsfiddle.net/MrLister/6VyL6/1
If that's not what you're after, you may have to show some code of your own.
<style type="text/css">
#featured a:first-child
{
background-color:yellow;
}
</style>
<div id="featured">
<ul class="ui-tabs-nav">
<li><span>test 1</span></li>
<li><span>test 2</span></li>
<li><span>test 3</span></li>
<li><span>test 4</span></li>
</ul>
</div>
I wanted to highlight first anchor from the list, but unfortunately all anchors are highlighted. What is the mistake do here.
They are all highlighted because each a is the first-child of its parent li
What you probably want is something like:
#featured li:first-child a
{
background-color:yellow;
}
Because all anchors are the first child of their parents. You need to:
#featured li:first-child a {
background-color: yellow;
}
If you always have a list I would prefer the CSS solution like #powerbuoy and #danwellman posted. If you just want to format the first anchor tag nested inside an arbitrary tag (with id featured) with arbitrary nesting-level then I would prefer jQuery:
$('#featured a').first().css('background-color', 'yellow');
Example with div's rather than an unordered list: http://jsfiddle.net/9vAZJ/
Same jQuery code formatting a list (like in the question): http://jsfiddle.net/9vAZJ/1/
The jQuery code is a more general solution and fits better to your initial try to format the anchor tag in your question since both solutions are decoupled from list tags.
Nevertheless when list-styling is your only task here then I would recommend the CSS solution.
I'm building a tree using lists in lists the ordinary way.
Now, what I would like to do is to have an extra label
that is absolute (horizontally) to the start of the outermost tree.
The effect I'm trying to achieve is the below, where the farLeft are labels
on each li (see similar html below):
I can easily do this, but my css will be unclean, to say the least, something
along the lines of:
/* each indentaion level is 20 px to teh right, so I need to offset */
ol.topLevel li label.farLeft { position absolute; left=-218px; ...}
ol.topLevel li ol li label.farLeft { position absolute; left=-238px; ...}
ol.topLevel li ol li ol li label.farLeft { position absolute; left=-258px; ...}
A usage could be like the below, but with more nesting levels:
<ol class="topLevel">
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
<ol>
<li>
<label>Some niceLabel</label>
<label class="farLeft">Far left text</label>
</li>
</ol>
</ol>
The above sucks in many ways, notably I have to change value in plenty of places if I move something, and I have to make one line per indention level.
Is there a better way to solve this, perhaps make my 'left' being the left of my top level tree, or some other good html mechanism.
It might be the time to mention I'm a total css newbie, so I might easily have
missed somethnig completely obvious.
Here its fiddle link
http://jsfiddle.net/5YKFa/6/
css
ol.topLevel{
padding-left: 100px;
}
li{
padding-left: 20px;
}
.left {
position: absolute; left:0px;
}
html
<ol class="topLevel">
<label>Top Level</label>
<li>
<label class="left">Label</label>
<label>1</label>
<ol>
<li>
<label class="left">Label</label>
<label>1.1</label>
</li>
<li>
<label class="left">Label</label>
<label>1.2</label>
</li>
</ol>
</li>
</ol>
Is the 'farLeft class being used elsewhere on the page? If not, the easy solution would be:
.farLeft { position: absolute; left:0px; ...}
Absolute positioning should line up automatically with it's parent container at 0px. So if you wrap a relatively positioned div around it you should be able to adjust margins and whatnot to get the result you are looking for.
You don't need to specify where everything is in the dom structure, unless you only want it to apply there, and even then using an id on the tag would be a better solution. Good luck
You can probably just use a margin on each level of the nesting, so it will grow the deeper you go.