I am trying to create custom bullet points and it is not working.
This is my HTML.
<div id="services">
<ul id="serviceText">
<h2 id="serviceHeader"><strong>Services I Offer:</strong></h2>
<li>Intros</li>
<li>Transitions</li>
<li>Lower Third Titles</li>
<li>Web Page Design</li>
<li>and more...</li>
</ul>
</div>
This is my CSS
ul#serviceText {
list-style-image: url(images/checkmark.gif);
font-size: 14px;
float: right;
padding-top: 5px;
color: white;
}
My site is located here xdtrammell.com/lol if it helps you to see all my code.
change your selector to ul#serviceText li. Also keep in mind that you can't include h2 element in ul. Is not valid html.
Specifically I think you're trying to create custom bullets that are images, here is how I would do it.
The CSS
.list {
margin: 0;
padding: 0;
}
.list-li {
background: url('../directory/your image here.jpg') no-repeat top left;
margin: 0;
padding: 4px 0 4px 20px;
list-style: none;
}
The key thing to note is the background image is in the top left, so take that into consideration when you adjust your padding. Padding is: Top, Right, Left, Bottom.
The HTML
<ul class="list">
<li class="list-item">lorem ipsum</li>
<li class="list-item">lorem ipsum</li>
</ul>
I hope this helps!
You're far better of using a CCS background for your list items than using list-style-image. You get far greater control over the positioning of the graphic and the spacing of the text.
See: http://preview.moveable.com/JM/ilovelists/
Does it need the ../ before the image URL so it knows to go up a directory? In other words, does your image exist in the top level directory or in one of the next-levels? If it doesn't exist in the top level then it needs "../"
Just change the path to image folder in URL like this(../images/checkmark.gif) and "li" tag element is enough as a selector.
li {list-style-image: url(../images/checkmark.gif);}
my case was,
the bullet was hidden or invisible when list-style: inside was not set.
Related
I'm trying to make a sidebar navigation list containing another list whose contents show/hide when clicked. For the li containing the collapsible list, I put in a custom list-style-image (actually, two that are toggled between with JS when clicked.) The problem is that the custom image is rendering on the edge of the page instead of in line where a regular bullet point would be. The image has a transparent background, so that's not the problem. Maybe it's something with how I floated the div to the left?
Here's my HTML and CSS and a screenshot of how it's displaying.
Code snippets (css/html):
#sidebar{
position: fixed;
float: left;
width: 20%;
background-color: green;
}
#main{
float: right;
width: 75%;
background-color: blue;
}
#songs{
margin-bottom: 0;
}
.song{
list-style: decimal;
}
.songclosed{
display: none;
}
.closed{
list-style-image: url("../images/closed.png");
}
.open{
list-style-image: url("../images/open.png");
}
<div id="sidebar">
<ul>
<li>
<p>Home</p>
</li>
<li>
Info
</li>
<li id="openclose" class="closed" onclick="openclose()">
<p id="songs">Songs</p>
<ol>
<li class="song songclosed">
Song 1
</li>
<li class="song songclosed">
Song 2
</li>
<li class="song songclosed">
Song 3
</li>
</ol>
</li>
</ul>
</div>
Image--See the little black triangle on the left?
I've tried list-style-position: inside and overflow: hidden. Both made a difference, but neither worked properly.
Final note: The images are bigger (100x100) than a regular bullet point so that may be a slight problem, but I can edit them down and see what changes if someone can tell me how big a regular bullet is.
(Edit: I'm new to coding, so my apologies for stupid mistakes)
I can't find any errors in my coding, but my images are positioned slightly off-centre, to the right :( The images have been entered using a list format, but I'll just copy one image and then the relevant CSS:
<nav>
<ul>
<li>
<img src="Images/mountains.jpg" alt="Mountains">
</li>
</ul>
</nav>
(Updated) CSS:
li {
text-align: center;
margin: 0 0 40px;
}
I cant find what's wrong :(
Is it possible that my table is out of line? (Reference image in comments)
My ul element had some default padding, so I removed all padding in my universal selector.
It's always best practice to use reset css or normalize and then style your elements as per your need.
As stated in the commemt position: center; is not valid css.
To align to the center, give your li elements a text-align a center like:
li {
text-align: center;
}
Figured it out!
My ul element had some default padding, so I removed all padding in my universal selector.
In CSS list-style-image displays the image to the left of the text, is it possible to shift the image to the right of the text?
HTML
<nav id="headerNav">
<ul>
<li>Join Now</li>
<li id="login">Log In</li>
</ul>
</nav>
CSS
#login {
list-style-image:url('login_padlock.png');
}
Kind regards
Not using list-style-image, no. You could, however, assign a background image like this:
#login{
background: url('login_padlock.png') no-repeat center right;
}
You can but not by using the list-style-image. What you need to do is use a background image aligned to the right. Something along the lines of this:
#headerNav li { list-style: none outside none;
padding-right: 25px;
background: url('login_padlock.png) 100% 0 no-repeat; }
As I know it's not possible with a list.
You could make a table instead of a list, and put the image manually with a <img> tag in the last, separate column, with text-align set to right.
I have made a basic navigation bar with four 'buttons' and I am using a background image as a divider. The problem I am having is when I create a :hover state, the background covers up the divider. How can I fix this so that the divider image always shows?
Here is the markup:
<div>
<ul class="main">
<li>Home</li>
<li><a class="divl" href="#">Item1</a></li>
<li><a class="divl" href="#">Item2</a></li>
<li><a class="divl" href="#">Item3</a></li>
</ul>
</div>
ul.main {
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
background: url(grad.png) repeat-x;
overflow: hidden;}
ul.main li{
float: left;}
ul.main a {
padding: 0 3em;
line-height: 3em;
text-decoration: none;
display: block;
color: white;}
.divl {
background: url(a.png) repeat-y top left;}
ul.main a:hover,
ul.main a:focus{
background: rgba(0,200,0,0.1);}
Thank you.
You can apply the divider background-image to the li elements instead:
ul.main li {
float: left;
background: url(http://dummyimage.com/1x100/f0f/fff) repeat-y top right;
}
See: http://jsfiddle.net/825cK/
How about you take the divider outside of the background image and place a div inside the list item? Then you can style the divider as you like without the :hover background getting in the way.
Something like:
<li>link here<div class="divider"></div></li>
-or-
Put the divider in the list item as a background.
In my opinion, you have a more fundamental problem with the overall structure of your backgrounds. If the user magnifies the text on their browser, the text will overlap with your borders on your background image no matter what way you spin it.
It's hard because I can't see what the background is supposed to be, but if your background just a vertical linear gradient, you would probably be better off slicing it up and making it as a single background for each List Item instead of the entire Unordered List.
This will allow you the flexibility to fix the problem you initially posted with use of margins, and also make your job much easier if you ever need to add another 'button.'
I have a main menu, and in the HTML code, it is in the correct order, but when viewed in the browser, it is reversed. Why?
HTML:
<div class="header">
<img src="images/JTS_1_B_FL31.png" alt="J.T.S Logo" class="logo" />
<ul class="menu">
<li class="current">Home</li>
<li>Services</li>
<li>Support</li>
<li>Contact Us</li>
<li>My Account</li>
</ul>
</div>
CSS:
.header{
width: 100%;
height: 30px;
background-color: #1D242D;
}
.logo{
padding: 5px 0 0 5px;
float: left;
}
.menu{
float: right:
}
li{
display: inline;
list-style: none;
float: right;
padding: 5px 5px 7px 5px;
}
Screenshot:
You have the LI's floated: right, as well as the #menu floated right, which will layout from right to left. You might try float: left on them, maybe try without a float attribute on either #menu and the LI.
When you use CSS to float things right, they are attached to the right of the page in the order that you list them.
In this case, 'Home' is getting attached to the right of the page, then 'Services' is attached as far right as possible (which ends up being to the left of 'Home').
You either need to reverse the order of your list (since this is expected behaviour), or possibly put the entire list in a single div which is floated right.
You are floating each list item <li>. This causes each new list item to appear to the left of the previously floated items.
float: right within the same box element will put elements added later to the left of a previously right-floated element. if you don't like Jared's suggestion, you can add them in reverse order.
Because you've told the list-elements to float: right. They're doing exactly what you told them to. If you leave the li elements with display: inline and remove the float declaration they should appear in the right order, with the menu itself still floated to the right.
Seems to work (please note the colour change of the a elements, blue-on-black was painful to try and read): JS Fiddle.