CSS, HTML List indentation - javascript

I'm very new to HTML and I'm having a lot of trouble properly formatting my list to my liking. In my current code, I have a numbered list. My objective is to create an indentation or space between the number itself and the text that follows. For example:
1.(indent) For all date/fields/etc etc
2.(indent) A "full-text query"
3.(indent) narrow your searches etc
I've tried searching for tips on w3schools and other StackOverflow posts but can't seem to find a solution. I believe it is due to having a list instead of regular text such as a paragraph. Any help would be appreciated.

Since the text of each item in your example is contained in a span, you can style each span.
For example I have added a padding-left: 30px in the first item of your code: https://jsfiddle.net/02xbseuo/
This will intent the first line of the text.
If you want to intent the whole paragraph, you can convert the span elements to div.

Use the text-indent rule like so (see also my slightly altered JSFiddle:
<style type="text/css">
li {
padding-right: 5px;
}
</style>
The style tag belongs in the head section (I put mine on line 20 of the fiddle I linked).
I'd recommend adding a class to your li elements so that you can change only the specific elements you want, rather than all li elements on the page.
Also, you didn't ask about this, but in general I'd recommend avoiding inline styles. Once your pages get larger, they're very hard to maintain and modifying each inline style will take much longer and can lead to additional errors.

With margin and padding you can have the indentation that you need. I used 10px but you can put any value that needed for your solution.
Html code
<ol>
<li>element 1 </li>
<li>element 2</li>
<li>element 3 </li>
<li>element 4</li>
</ol>
Css code
ol li {margin-left: 10px; padding-left: 10px;}
You can see this sample in JSFiddle

Related

Pure CSS & JS drop down menu - onmouseover issue

I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li>XYZ
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?
First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)
First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:
jsFiddle example
My recommendations for the learning process:
Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult
Best of luck!
CSS
.dropdown li{
float:left;
width: 240px;
position:relative;
}
.dropdown ol{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than
display:none;) */
}
.dropdown li:hover ol{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
HTML
<ul class="dropdown">
<li>
<a href="#" >Your Link</a>
<ol>
<li> Your Link 1 </li>
<li> Your Link 2 </li>
</ol>
</li></ul>
What else would u need for this? Is there any reason to use javascript to create this?
Take a look at this Fiddle. Perhaps it's what you're looking for.
it's only using HTML and CSS.
#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover
My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.
another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).
if you set the height to that of the original item with overflow hidden and then on hover set height to auto
HTML
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
CSS
.navigation {
height: 20px;
overflow: hidden;
}
.navigation {
height: auto;
}
no javascript needed

fadeIn() an invisible list item with jQuery

I have an unordered list whose lis are invisible (display:none) to begin with.
I want to make a specific li visible with a JS function. How can I do that?
I've tried $("#my-list li:nth-child(1)").fadeIn() but that only works if the ul is visible to begin with.
Here's my code:
ul.hide > li {
display: none;
}
<ul class="hide" id="my-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
I'm trying to answer this question. Feel free to take a stab at it!
Like bdares said, an invisible element cannot have a visible child. So what you said about the code is true: ul has to be visible to begin with.
Looking at the html code you could probably just remove class="hide" which will make the ul visible.
However if you can't do that, an alternative is to use Javascript to make ul visible on the fly. Instead of just:
$("#my-list li:nth-child(1)").fadeIn();
Do
$("#my-list").show();
$("#my-list li:nth-child(1)").fadeIn();
Use this way:
$("#my-list").show(0).children("li:nth-child(1)").fadeIn();
$("#my-list").show().children("li:nth-child(1)").fadeIn();
Let me explain you why .show(0) is better than .show(). When you use .show(), it gives a transition, which eases out the DOM Element, which is not needed. It is like showing a hidden element and hiding it smoothly, which is not accepted.

Hide static (or hardcoded) text in HTML page

I have a HTML page containing some hardcoded/static text.
The text string does not have any class/id/name. It's just there.
How to hide it on page load?
P.S: I really hope this is not a repeat question. I have done my 'homework'.
You can hide an element that doesn't have any direct identifiers by using a CSS selector which examines structure. You didn't post your markup, so it's impossible to give an exact solution.
Example 1
HTML
<body>
<section>
<div>Div I want to hide</div>
</section>
</body>
CSS
SECTION > DIV { display: none; }
There are many permutations of this pattern and many selectors available.
See: CSS2 Selectors (very wide support) and CSS3 Selectors (supported in most newer browsers).
Example 2
Here's a more complex example:
HTML
<div id="foo">
<ul>
<li>Hide this item</li>
<li>Don't hide this</li>
<li>Don't hide this</li>
</ul>
</div>
CSS
/* hide the first child of any UL which is a direct descendant of #foo */
#foo > UL > LI:first-child { display: none; }
In CSS, display: none? That'd be the easiest way. Or you could go with javascript once the page has loaded.
If you're talking about doing it with javascript, you would have to do a window.onload and set the style.display = "none"; but that would require an id/class/some way to reference it (there are ways to reference it without them but it's a lot better style to just give it an id/class. The function would look something like this.
window.onload = function() {
document.getElementById("text").style.display = none;
};
where your string has an id of "text"
Although if you are determined to have the text just appear as none on startup, why not just set the style/css to originally to have a display of none?

Auto fit width of li to text?

Is there anyway possible to auto fit the width of an <li> tag to the width of the text it contains using CSS?
I'm designing a website that uses a custom CMS (and I don't have access to the code), so I'm limited in options as far as design goes.
Javascript solutions that would work on an <li> tag without having to edit any of the list properties directly would work as well.
The <li> is a block-level element, so defaults to be as wide as it can be.
To get it to "shrinkwrap" to the size of the contents, try floating it:
li {
float:left;
clear:left;
}
That may do what you are looking for.
If you want the <li>s to sit alongside each other you can try:
ul {
clear: left; /* I like to put the clear on the <ul> */
}
li {
float: left;
}
OR
li {
display: inline
}
Making it inline takes away its block-level status, so it acts like a <span> or any other inline element.
As #willoller already said, the li element is a block level element, but apart from floating it, you can also use:
li {
display: inline;
}
EDIT: Unfortunatly the following solution is displayed differently in different browsers.
In order to not let any other element float aside the list I used this:
ul {
white-space: pre-line;
margin: -25px 0 0; /* to compensate the pre-line down-shift */
}
ul li {
display: inline-block;
}
The only CSS solution that worked well for me.
ul { display: inline }
will solve all of your problems at once.
On standard compliant browsers, use min-width instead of width. On IE 6, width does what you describe.
None of the previous answers work correctly for me, so I used the following approach:
Add the style "float: left" to my <ul>
Surround the <ul> in another <div>
Adding display: inline; CSS to the <ul> block has worked great for me, with no undesired effects.
If have the id of the <li> tag you could use JavaScript to get how many characters there were and then multiply that by the font size, then set the li width to that number.
You can use em's rather than pixels to specify the width of your element. An em is roughly equivalent to the width of the letter "m" in the default font. Play with multiples of the number of characters in your li until you have an em width that is visualy appealing.
In my case it was float:right that fixed it for me:

Is it better to use divs or tables to contain columns of links?

I have a page with 3 columns of links at the bottom. Each column is put into a div and all three divs are wrapped into a big div that is centered on the page. Is this something that is better suited to a table or is a table the wrong element for the job?
You can also use <ul> & <li> for this.
#horizontal {
width: 100%;
background: #eee;
float: left;
}
#horizontal ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
}
This will create horizontal columns using li elements, and then you can stuff the HTML to create individual links in each li.
The Rule of Thumb is:
Use Divs for layout, tables for tabular data.
On a side note, check out etymology of the term Rule of Thumb, quite humorous.
the question you want to ask yourself is, are your links a part of any tabular data?
if yes, tables are your choice. If no, then you should use divs.
Its important to use the semantically correect element to create a page, although other elements may result in the same effect, possibly with less effort.
As for your links, it seems they are not part of a table. I'd suggest the use of divs and proper css.
jrh
I don't think tables are a good choice for this. Simply having three columns doesn't constitute tabular data in my book. With some clean markup and a good stylesheet, you can have a much more flexible way to accomplish this. If you use left floated divs, simply give them a percent width so that they fill up the parent container (100 / number of elements)%. That way, if you want to add another column its a simple markup change a single stylesheet change. This way you wont have to deal with browser table wonkyness and have a great deal more flexibility in its design - on top of that you can change the layout completely without leaving your stylesheet.
The main principle behind HTML is to "markup" the MEANING of your data.
I'll use the above principle as a guide:
If you have 3 columns just because it looks nice - then there is no meaning to your columns, and you should try to use DIVs (which are meaningless "container" elements).
If you have 3 columns because there are 3 categories of links, then a TABLE is fine. Imagine if you gave headers to each list of links - this makes a TABLE with a THEAD necessary.
And in fact, each column is an "unordered list" - which translates into a UL element with LI elements.
And since you have a list of links, you will use, of course, A elements.
So from first-principles, you should have this structure:
<DIV> or <TABLE> (with <TR>/<TD>)
-> <UL>
----> <LI>
-------- <A>
Contrary to other answers, a table could be a semantic solution. If the three sections are distinct from each other and have a title, you can use <th> for the titles and <td> for each of the links. I think that's perfectly semantic.

Categories

Resources