I'm just learning html5 and css3 when I create a simple page with either an ordered list or an unordered list and apply css display: inline; or block; it removes the numbers or bullets does anyone know why?
This answer has been answered many times. Here's one of the best answer given by Martijn Pieters
However, you can use something like this and it'll workout.
ul.columns>li:before { content:'\ffed'; margin-right:10px; }
or
You can also use background image. However, I'd suggest the former method.
list style bullets works only for display: list-item applied elements. This property is applied by default to the li element, which you are overriding now by applying display: inline or block. Hence, the list style icons will be gone.
Because only list items have bullets/number points. It doesn't make sense for an inline box or a block box to have a bullet, because neither of those things is a list item.
List items are display: list-item; that's what gives them the bullets/number points.
Instead of give
display :inline;
You can apply
Float left to li and give padding to it
Eg.
ul li{
float:left;
padding:0 25px 0 0;
}
Related
I am trying to make use of text-align: justify; to space the list items out. (LIKE THIS)
The problem is that my HTML is minified - which removes the spaces between the list items and ruins the text-align: justify; effect (LIKE THIS)
So usually I get around this problem by adding an char between elements - ensuring that my whitespace is preserved.
Now although this actually works for list items too (LIKE THIS - (the last demo there)) the problem here is that adding between list items is invalid HTML -
I tried the html validator - and I got this error:
One more thing: I can't use display:flex; with justify-content : space-between; because I need to suppport IE9
Any ideas?
You can add a space after each list item as generated content, but then the list items need to be laid out as inline elements, not as inline blocks, in order to make the spaces matter in justification:
.nav li {
display: inline;
}
.nav li:after {
content: " "; /* a regular space */
}
.nav li a {
display: inline-block;
}
The last rule above handles the issue that a link may contain spaces and you probably do not want them to be stretched (as they would be if the element were inline).
Original answer, written before learning the difference between inline and inline block elements in justification; retained here for reference:
No, if you have “minified” HTML code so that whitespace between elements has been removed, you cannot make the elements act as “words” in justification. Such “minification” generally changes the actual content and should not be done—it is OK to collapse inter-element whitespace to one whitespace character, but not more.
The reason is that justification algorithms recognize only whitespace in actual content. Thus, it would not help to add spaces as generated content.
So you should use a more adequate minifier, or perhaps use the settings of the one you are using, so that it does not remove inter-element whitespace.
One way to get around this is to space the li elements with margin or padding
li {
margin: 0 10px;
}
So I've been working on what I was helped with yesterday and I'm so close. My code is much cleaner now. I have 2 issues that still need resolving. I've been trying all morning and can't seem to get it.
I need to control of the height of the subnav. I had to change the height in "ul li a" to 100% from pixels so at least now it just wraps around the text, which is ok, but I will probably need to change that height eventually and don't want to do it by increasing the font size.
ANSWERED - I added a margin-down in % to the subnav and you'll see why based on the design. The problem with this is that once you slowly move the mouse over the white space the sub nav disappears. If you do it fast enough you can sometimes catch it. I had the same issue with the vertical spacers within the subnav but did some rearranging in the css and it seems to be fixed now. Any suggestions?
Can I have the single worded links center without compromising the vertical centering with the multi-worded links?
Is there a better way to add in "margins or buffers" instead of the "spacers" I'm using, or is this "okay"?
http://codepen.io/Compton/pen/iwKJm
--UPDATED CODEPEN--
http://codepen.io/Compton/pen/ufGCI
Thanks in advance.
The problem was caused by the margin you added to the .subnav class: while moving the mouse from the upper list item to the sub list, the mouse had to move over a gap of 0.333% space resulting in a lost focus (or lost hover-effect). I updated your code and removed the unnecessary spacers, the updated version can be found here:
http://codepen.io/anon/pen/hzAaD
Referring to your original code, change your CSS as follows:
.subnav ul li {
margin: 0;
margin-top: 3px;
}
.subnav {
width:100%;
}
For point four, you don't need to add an empty list item for every "space" between each list item, this is bad practice as a list item is meant to actually be used for something, not empty space!
Instead, why don't you simply amend your ul li class so that you add a margin-right property:
ul li {
float:left;
width: 14%;
display:block;
**margin-right: 5px;**
text-align:center;
}
This will achieve the same effect as having those spaces so you can remove them from your html.
I need to my ul list to display the ➢ list type instead of the default bullet type.
Is there are list type that will display it? Or can it only be displayed as a background image? What would be the best way to have that list type?
There is no such bullet in the list-style-type property, but fortunately there are other ways to do so:
the list-style-image property - just specify url to the image.
the :after or :before pseudoclass:
li{
list-style-type: none
}
li:before{
content: "➢"
}
I don't believe there is a default bullet type for that particular image, however, you can add custom bullets.
I will use this css:
ul{
list-style-image: url('yourlisticon.gif');
}
I have an HTML ordered list, that I need to apply a strikethrough to. I have done this in CSS as below:
.Lower-Alpha {
list-style: lower-alpha;
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
}
The issue I am having is that this strikes through the content in the list, but not the number of the list (and I need to do both).
Eg I am getting:
a. struckthrough content
but I need:
a. struckthrough content
Any suggestions welcome.
Cheers
easy as pie: list-style-position: inside;
http://jsfiddle.net/seler/NWbrR/
edit: it looks like it's browser dependent behaviour. in mozilla it renders ok.
edit2:
for full browser compability u can use this js script: http://jsfiddle.net/seler/32ECB/
#Haem; You can apply :after property
li:after{
border-top:1px solid red;
display:block;
content:"";
margin-top:-8px;
}
check the fiddle for more may be that's help you
http://jsfiddle.net/sandeep/NWbrR/4/
the list style is NOT styleable in this way - you'd have to remove the list style identifier (a,b,c etc) inside the li as content.
This is default browser behaviour and you wont be able to strike through the number/letter provided by the list.
If it is possible in your situation you could hide the numbering provided by the list and add it to the list text content yourself.
You might have to take care of the numbering yourself - either manually, server-side, or some jQuery - and use an unordered list like this:
<style>
.Lower-Alpha
{
margin-top: 2pt;
margin-bottom: 2pt;
text-decoration: line-through;
list-style: none;
}
</style>
<ul>
<li class="Lower-Alpha">a. Foo</li>
<li class="Lower-Alpha">b. Bar</li>
</ul>
This'll render as:
a. Foo
b. Bar
It can be done as follows:
Create a wrapper <div> around the <ul>.
Style the wrapper <div> with the strikethru (or whatever other font size/style you're wanting for the list item numbers)
Style the <li> elements back to your normal font settings.
The list item numbers will then pick up the font settings from the parent <div>, and will have the strike-thru, and the list content will be normal text.
Note, this will only work if you want all your list item numbers styled the same way. Your question implies that this is what you want, but if you only wanted to do strike-thru on specific list items then you'd need to use #seler's solution.
You can't style the list item. It might look better this way?
I have css like this:
.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}
And html like this:
<ul>
<li class="done">Done</li>
<li class="notdone">Not Done</li>
</ul>
Works great on IE6 and FF. Each li item has a different image for the bullet. But all of the docs I see on list-style-image says it should be applied to to the ul tag.
Is there a proper or standards-based way of doing what I am trying to do, or is this it?
EDIT: http://www.w3.org/TR/CSS21/generate.html
It looks like it doesn't say that I CAN'T use list-style-image on an li tag, but the examples don't show that.
I believe docs you are referring to is when you want the bullets to follow a certain format, which is why the class is applied at the parent tag
<ul>
in those cases. Since you have two images that each you want to have its own bullet I see nothing wrong with what you are doing
The CSS 2.1 standard gives examples where list-style is applied directly to an li.
Although authors may specify 'list-style' information directly on list item elements (e.g., "li" in HTML), they should do so with care.
Followed by:
ol.alpha li { list-style: lower-alpha } /* Any "li" descendant of an "ol" */
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */
So I would draw the conclusion that it is OK to apply list-style-type or list-style-image to list items directly, as long as you are careful and understand the cascade of your CSS rule.
Following up to your edit...
If you look at the default style sheet for CSS, you will see that li is defined as follows:
li { display: list-item }
In the link you provided, list-style-image is valid on any element with display: list-item. Therefore, according to the standard, what you are doing is valid.
I've run into inconsistencies when it comes to the spacing of a list-image from browser to browser. As a result, I would usually skip the whole issue, and do something like this instead:
li {list-style: none; padding-left: 15px;}
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}
The end result is a bullet using the same images you intended in the first place, but you have much more control over the actual placement and spacing. Tweaking needed probably, but that's the general idea.
I don't see a problem with what you are doing. What docs are you talking about?
In theory all entries in a list have the same bullet style. Those lists are historically found in things like outlines where at any level you have 1,2,3 or A,B,C and it would make no sense to mix the different ordinal types with one another. I don't think there's anything wrong with doing what you are doing stylistically. But I don't know if it is correct CSS.