This is my css code:
ul{
list-style-type: square;
text-align:center;
list-style-position:inside;
color:blue;
line-height: 2rem;
list-style-image:url(icon.png);
}
and html code:
<body>
<article>
<header>
<h1>CSS Lists</h1>
</header>
<h1>Ordered List</h1>
<ol start="5" reversed>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ol>
<h1>Unordered List</h1>
<ul>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ul>
</article>
</body>
My icon image, html and css file are all saved in the same folder.
However, when i save my code, the icon does not appear on my web page.
Can anyone look into this?
enter image description here`
Update your css like this
ul{
list-style-type: none; /* remove the default bullet markers */
text-align:center;
list-style-position:inside;
color:blue;
line-height: 2rem;
list-style-image:url('icon.png');
}
It could be for different reasons.
first you forgot the ("")
but most likely the culprit is the link for the image try a relative path
so type
list-style-image = url("./icon.png")
the "." before the "/" will indicate that you are going from this directory.
Related
I have tried and researched many ways but I couldn't find out how to align unordered list in center. it seems like the bullets are not connected to the text and stay still.
here is the html code:
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
and this is the css code:
#facts {
text-align: center;
}
the result will be like
You can use list-style-position: inside; to set the bullets in front of the text like this:
#facts {
text-align: center;
list-style-position: inside;
}
<ul id="facts">
<li>fact 1</li>
<li>fact 2</li>
<li>fact 3</li>
</ul>
You can put your Unordered List in an element with the class of .container and define .container like this:
.container{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
}
<div class="container">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Set</li>
</ul>
</div>
I have a strong tag in ul tag, like,
<ul>
<strong>Whats included in strong tag</strong>
<li>li tag 1</li>
<li>li tag 2</li>
</ul>
The result shows in a website page, like
Whats included in strong tag li tag
1 li tag 2
I want to make the text of the strong tag(Whats included in strong tag) left-aligned to the position of li tag.
Except setting up margin value in strong tag, is there any other way to do it?
li.strong{
list-style-type: none;
}
.li1{
margin-left:30px;
}
.li2{
text-indent: 30px;
list-style-type:none;
}
.li2::before{
content:"• ";
}
.li3{
position:relative;
left: 30px;
}
.strong4{
position:absolute;
left:0px;
}
.li4{
position:relative;
top:16px;
}
.li5{
text-align:center;
list-style-type:none;
}
.li5::before{
content:"• ";
}
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li1">li tag 1</li>
<li class="li1">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li2">li tag 1</li>
<li class="li2">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li3">li tag 1</li>
<li class="li3">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong class="strong4">Whats included in strong tag</strong></li>
<li class="li4">li tag 1</li>
<li class="li4">li tag 2</li>
</ul>
<ul>
<li class="strong"><strong>Whats included in strong tag</strong></li>
<li class="li5">li tag 1</li>
<li class="li5">li tag 2</li>
</ul>
Use margin left on the <li> elements instead of <strong> tag.
Use text indent
Use position relative on <li> tags or on <strong> tag.
Use position absolute on <strong> and position relative on <li>
Use text align
You can make the strong text an li with styling to remove the bullet and shift it left.
.nobullet {
list-style-type: none;
margin-left: -15px;
}
<ul>
<li class="nobullet"><strong>Strong Text!</strong></li>
<li>Other text!</li>
</ul>
It should not be set in the first li because this would assume a sibling relationship to the preceding li elements whereas the header is more important in the hierarchy. Imagine screen-readers etc
<strong>Strong Text!</strong>
<ul>
<li>Other text</li>
</ul>!
I'm currently making a website using a Tumblr theme. I want one of my links (Merchandise) to open a dropdown menu for different options. Is there a way to do this without switching the entire navigation to li elements? I can style it all after, I just have no idea how to do this without ruining the entire theme.
Thanks in advance.
#pages {
float: right;
}
#pages a {
float: right;
color: black;
margin: 22px;
padding: 5px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
font-size: 10px;
}
#pages a:hover {
color: #d95e40;
}
<div id="pages" class="desktop">
<h2 class="page">Contact</h2>
<h2 class="page">Merchandise</h2>
<h2 class="page">Videos</h2>
<h2 class="page">Lyrics</h2>
<h2 class="page">Releases</h2>
<h2 class="page">Shows</h2>
</div>
There's a useful site that has made a plugin just for this sort of situation
http://labs.abeautifulsite.net/jquery-dropdown/
On there you'll see the option to add a dropdown to an <a> tag.
Merchandise
Your actual dropdown list would then reside in the jq-dropdown-1 div. Or whatever you'd like to name it.
<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="jq-dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
The plugin Does the rest, giving you a simple solution to <a> tag dropdowns after simply linking to the required scripts
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>
Which can be found on the GitHub page here >> https://github.com/claviska/jquery-dropdown
NOTE:
Due to some of the answers/comments left below (with which I agree), I feel this question is too vague, and does not explain sufficiently my problem. I was too hurried when I put it together, and this has caused the incorrect answers, for which I accept the fault. Due to the current answers and comments, I feel that even if I edited this question again, that future viewers would be confused by the answers/comments on the page, unless everyone were to update them as well. Because of this, i have created another question that completely clarifies my problem. Again, I apologize for the confusion I caused on this question.
The clarified question can be found here: Style an Ordered List like “X.X” based on list start attribute
I am working on updating a client website that contains a policy page. Within the policy are nine different sections, each with their own content. Inside each section are different section statements, which should have the numbering system of "x.x". However, this does not exist in basic HTML. In addition, some sections have various different forms of ordered lists inside themselves.
I have determined that I do not want to tackle this problem in a nested way, that is to say like this:
<ol>
<li>Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
This is the way that every other answer I have looked at treats the problem. Rather, I wish to tackle it like this (code for below sample). I want a list that simply displays "x.1, x.2, x.3," where 'x' is dependent on the start number of that particular list.
<h2>Section 1</h2>
<strong>Heading 1</strong>
<ol class="specialList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<strong>Heading 2</strong
<ol type="lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Section 2</h2>
<ol class="specialList">
<li>
<ol type="upper-alpha">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2>Section 3</h2>
<ol class="specialList">
<li>First item
<ol type="circle">
<li>First subitem</li>
<li>Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Section 4</h2>
<ol class="specialList">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Section 1
Heading
1.1 First item
1.2 Second item
1.3 Third item
Heading 2
i. First item
ii. Second item
iii. Third item
Section 2
2.1 First item
A. First subitem
B. Second subitem
2.2 Second item
2.3 Third item
Section 3
3.1 First item
• First subitem
• Second subitem
3.2 Second item
3.3 Third item
Section 4
4.1 First item
4.2 Second item
4.3 Third item
This way, I can avoid using a nested ordered list, and hopefully simplify the matter, especially the necessary CSS. It will mean hardcoding some start value attributes in to each ordered list, but the policy sections will not change frequently, so this should not matter.
I do not wish to use JavaScript, as the client wants it to look this way regardless of the user's setup. The pages are JSP pages, so if there is a way to set it up to dynamically generate, that would be acceptable.
I have already looked at these links below. While they are excellent questions, none of them answer my specific question. The first deals with nested ordered lists, while I am dealing with a single ordered list. The second one has the right idea, but is still a bit different (has "x.x.x", while I only want "x.x").
Can Ordered List Produce Results that looks like 1.1?
Achieve sub numbering on ordered list
Please let me know if I need to clarify anything! Thanks!
Summary
In conclusion, the client wants a list that will start at "x.1" and go as far as necessary, where "x" is a given start value attribute for the specific list. I just clarified this matter with them, which is the reason for this "update" of requirements. Basically, I need a class that changes the numbering system of the top level of a list to the "x.x" format (again, where the first "x" is the starting value"). Any sublists (nested lists) will not follow this format, but will follow another format as specified by the "type" or "list-style" attribute.
Took a while to figure this one out!
here is my fiddle
h2.title {
font-size: 20px;
font-weight: 800;
margin-left: -20px;
padding: 12px;
counter-increment: ordem;
}
li.heading {
font-size: 16px;
font-weight: bold;
padding: 12px;
list-style-type: none;
}
.bullet {
counter-reset: bullet;
padding-left: 12px;
}
.bullet li {
list-style-type: none;
}
.bullet li:before {
counter-increment: bullet;
content: counter(ordem)"." counter(bullet)" ";
}
ol.none {
list-style: none!important
}
li.s2sub::before {
counter-increment: none!important;
content: none!important;
}
li.s2sub {
list-style: upper-alpha;
}
li.s3sub::before {
counter-increment: none!important;
content: none!important;
}
li.s3sub {
list-style-type: circle;
}
li.roman::before {
counter-increment: none!important;
content: none!important;
}
li.roman {
list-style: lower-roman inside;
}
<body>
<ol>
<h2 class="title">Section 1</h2>
<li class="heading">Heading 1</li>
<ol class="bullet">
<li>text 1 one</li>
<li>text 1 two</li>
<li>text 1 three</li>
<li>text 1 four</li>
</ol>
<li class="heading">Heading 2</li>
<ol class="bullet">
<li class="roman">Item 1</li>
<li class="roman">Item 2</li>
<li class="roman">Item 3</li>
</ol>
<h2 class="title">Section 2</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s2sub">First subitem</li>
<li class="s2sub">Second subitem</li>
</ol>
</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
<h2 class="title">Section 3</h2>
<ol class="bullet">
<li>First item
<ol>
<li class="s3sub">First subitem</li>
<li class="s3sub">Second subitem</li>
</ol>
</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</ol>
</body>
I got it to work like so:
body{
counter-reset: section children;
}
li{
list-style:none;
}
.parent::before {
counter-increment: section;
content: counter(section) " - ";
}
.parent li:first-child{
counter-reset:children;
}
.parent li::before{
counter-increment: children;
content: counter(section) "." counter(children) " - ";
}
<ol>
<li class="parent">Section 1
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
<li class="parent">Section 2
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ol>
I removed the list style, since it isn't necessary.
What this does is create two separate counters for the children and the sections, then resets the children counter on every new section.
JSFiddle Demo
I have an img floated to the left followed by a long ul that should render to the right of the img then continue below it. It does this, but the portion of the ul next to the img it all left aligned and loses its indentation.
Here is a minimum case example. (also in jsbin)
<html>
<head>
</head>
<body>
<div style="float:left"><img src="http://i410.photobucket.com/albums/pp190/FindStuff2/Photography/Winter/winter.jpg" width="200" height="150" /></div>
<ul>
<li>Level 1</li>
<li>Level 1</li>
<li>
<ul>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
<div style="clear:both"><!-- --></div>
More content More content More content More content More content More content More content More content More content More content More content
</body>
</html>
I appreciate your help.
Try this:
/* add some margin-right for some white space between the list and image */
div {margin-right:12px; float:left;}
/* add overflow and set the list-style attributes */
li {overflow:hidden; list-style:inside square none;}
css:
div {margin:0 10px 5px 0; float:left;}
ul{
padding:0px;
list-style-type:none;
margin:0px;
}