How can I add an icon in front of a specific list item?
<ul class="rightNav2">
<li id="homeLnk">Home</li>
</ul>
I have the following style for the list items already and I want to add a specific icon in front of one of the items. The image however does not appear.
.rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 6px;
color: white;
}
.rightNav2 #homeLnk {
list-style-image: url('/images/homeIcon.png');
}
There are several methods to add an image to a list item.
Here is one using a background image. http://jsfiddle.net/p05g14zm/
rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 20px;
color: white;
}
.rightNav2 #homeLnk {
background-image: url('http://i.stack.imgur.com/vQ4nM.jpg?s=32&g=1');
background-repeat: no-repeat;
background-size: contain;
}
Try
.rightNav2 #homeLnk:before {
content: url('/images/homeIcon.png');
}
Also you might want to make sure that the image path is correct.
Please check out my codepen... I believe this may help you:
http://codepen.io/anon/pen/myRWmZ
html:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<ul>
<li>Link 1</li>
<li class="home">Link 2</li>
<li>Link 3</li>
</ul>
CSS:
ul {
list-style-type: none;
}
li.home::before {
font-family: FontAwesome;
content: "\f015";
margin-right: 3px;
}
li.home {
margin-left: -18px;
}
So what I did was place an icon using the :before selector. The margin adjustments are meant to ensure that each of the list items still align properly.
The css below would add an icon to the left of the home li element.
.rightNav2{
list-style:none;
padding:0;
margin:0;
}
.rightNav2 li{
padding:0;
margin:0;
}
.rightNav2 #homeLnk {
padding-left: 35px;
/* padding-left above is the width of the icon plus any whitespace between text */
min-height:10px;
/* min-height above is the height of the icon */
background-image: url('/images/homeIcon.png') no-repeat center left;
}
I would as in the answer above recommend considering icon fonts if this a responsive site.
Background images on zoom can become very grainy.
Problem
The list-style-image property determines whether the list marker is
set with an image, and accepts a value of "none" or a URL that points
to the image: ~css tricks
This means that, rather than applying this styling to the li, you're meant to apply it to the parent ul. Something like:
ul {
list-style-image: url(images/bullet.png);
}
So you can't place it on a single element using just this syntax (unless you wanted to use the :first-child selector (not tested))
My Solution
This solution may or may not be of use to you, but it's using pseudo effects (meaning no real 'extra' elements need to be added). The pseudo element would also be clickable, too (with no need of worrying about image sizing, as this would do it for you):
.rightNav2 li {
display: inline;
padding-right: 6px;
padding-left: 6px;
position: relative;
display: block;
/*only for demo*/
}
.rightNav2 #homeLnk a:before {
content: "";
height: 100%;
width: 20px;
left: -20px;
top:0;
position: absolute;
background: url(http://placekitten.com/g/20/20);
}
<ul class="rightNav2">
<li id="homeLnk">Home
</li>
<li>another link
</li>
<li>and another link
</li>
</ul>
Related
I am trying to make the menu links (under Menu) on the following website fill the full width of the bar. So when you have "Soup & Salad" as active, it extends all the way to the left of the blue bar. There should also be no space between blocks when you hover over the link next to the active state.
http://www.woodonwellington.com/
ul#menuNav
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
background-color: #0c0648;
padding-top: 13px;
padding-bottom: 12px;
}
#menuNav li
{
display: inline;
list-style-type: none;
}
#menuNav a {
padding-top: 13px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: #fff;
cursor: pointer;
}
It happens because your li is set to display:inline; In your code you have an enter and a couple of spaces/tabs between the <li></li> blocks. To fix this you have to write the tags right after eachother. You want to limit the space between those <li> tags.
In stead of this:
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
Do this:
<ul>
<li>
Content
</li><li>
Content
</li><li>
Content
</li>
</ul>
Answer on comment:
The same problem appeared on the link itself. As you can see on the image below you made the li elements touch eachother.
Now to make the links touch eachother you have to do the same.
Instead of:
<li>
<a>Link</a>
<li>
Do this:
<li><a>
Link
</a><li>
It is not a nice solution but it will fix your spacing between the links.
you could use display:table/table-cell to acomplish this:
basic CSS to apply:
#menuNav {
display:table;
width:100%;
border-collapse:collapse;
}
#menuNav li{
display:table-cell;
}
#menuNav li a {
display:block;
text-align:center;
}
remove any floats from CSS to test this. float kills display (unlesss set to flex, but this is another option)
You can simply remove the display: inline; in your .css and add float:left;
#menuNav li
{
list-style-type: none;
background-color:red;
float:left;
}
This will remove all the spaces.
Check this
http://jsfiddle.net/BishanMeddegoda/30w56oft/
I'm not happy with my code which uses a sprite image to show different images for each item in a list. The code can be seen here:
http://jsfiddle.net/spadez/JBuE6/45/
Before it was possible to click anywhere along the width of the column and it would select the list item because I used display: block.
However, because my sprite requires:
width: 0px;
It means I have to click on the actual list text in order to select it. Removing the width: 0px from the class .nav li achieves the affect I want. Can anyone show me how to do this, with some clean efficient code.
I'd take advantadge of CSS pseudo-elements, like ::before. You can do it in this way:
http://jsfiddle.net/franciscop/JBuE6/53/
HTML:
<nav>
<ul>
<li>
User
</li>
...
CSS:
nav a {
color: gray;
display: block;
line-height: 26x;
width: 100%;
}
nav li a::before {
display: inline-block;
content: "";
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 20px;
}
#user::before {
background-position: -10px -6px;
}
OLD ANSWER [alternative]:
I would change the padding left and the sprite to the <a>, so that you can click them also.
.nav li {
}
.nav li a {
color: gray;
display: block;
line-height: 26x;
padding-left: 30px;
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 0px;
}
http://jsfiddle.net/franciscop/JBuE6/50/
You should be putting your images on the links, not the list. Use display:block and padding-left: to provide enough room. In general, put all non-positional styling on the A-tag, not the LI.
Other than that, you are doing it the right way.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Navigation hyperlinks only work when mouse is on the text
Can you set a link to the whole width of an < li > instead of just where the text is?
This is what I mean, I want the user to be able to click on anywhere on the button and go to the link and not just the text: http://jsfiddle.net/b7S4L/
One of the problems is that I cannot use display: block; because I have a number after the < a > link for example (1)
Don't style the LI at all, (other than float:left and clearing padding, marging and list-style-type) if needed. Put all styling on the A (and use display:block).
I don't want the number on the right to be on a seperate line that's
the problem, it should be on the right of the Text
I think I understand what you're trying to do here. Though, I'm not sure because your question has been quite confusing..
First, do set display: block on the a. That is the right thing to do here.
Then, move the number inside the a, and add a span inside:
<li class="cat-item cat-item-147">
<a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indlæg i kategorien Food">
<span>Food</span> (4)
</a>
</li>
Then, some extra CSS is needed. You should merge the new CSS with what you already have - for the demo, I've added it within the HTML pane for simplicity (marked with <!--new css right here-->):
http://jsfiddle.net/thirtydot/b7S4L/3/
div.gg_newscats li a {
display: block;
padding: 16px 0;
color: #333
}
div.gg_newscats ul li {
padding-top: 0;
padding-bottom: 0
}
div.gg_newscats li a span {
color: #cc0014
}
div.gg_newscats li a:hover {
text-decoration: none
}
div.gg_newscats li a:hover span {
text-decoration: underline
}
The messing around with span and :hover is to keep the colour and underline exactly as you had it.
Anchor tags by default are inline boxes, which means that they don't fill their parent entirely (they don't take all the space) and they shrink only to fit their content. Thus you should use this CSS to make'em fill the space of li element:
li a
{
display: block;
height: 100%;
}
Also keep in mind that you should remove any padding from the li elements and remove margins of a elements. This way, border of anchor tags meet borders of li tags. For an example, look at links of Thought Results.
One solution I tend to use is to make the <a /> element within a <li /> element blocklevel with
display: block;
After that removing any padding you specified on the <li /> element and add it on the <a /> element instead and you should get the same visual output, but with the entire <li /> as a link
While you can manage this with jQuery, you can also use simple CSS for most browsers:
<style>
ul { width: 200px; background: #ccc; }
li { line-height: 3em; }
a { display: block; width: 100%; height: 100%; padding: 5px; }
</style>
<ul>
<li>This is a link</li>
</ul>
Add display:block; to the style and you're all set!
EDIT
Eh, didn't see the jsFiddle example. If you remove the top/bottom padding from the LIs and put it on the As, plus put the count in a SPAN within the As, these rules will achieve the desired result:
div.gg_newscats a {
display: block;
height: 100%;
padding: 10px;
}
div.gg_newscats a span {
color: black;
}
div.gg_newscats ul li {
float: left;
font-size: 13px;
margin-left: 2%;
margin-top: 2px;
text-align: center;
width: 30%;
padding: 2px;
}
Sample HTML:
<li class="cat-item cat-item-148">
<a title="Vis alle indlæg i kategorien Electrical" href="http://test.vps.graenseguiden.dk/newscat/electrical/">
Electrical
<br>
<span>(1)</span>
</a>
</li>
Edit 2
new code... a lot simpler... only thing that didn't go the way I liked was that the text-decoration of the link had to go.
.cat-item
{
padding: 0px;
}
.cat-item a
{
padding: 13px 0px 13px 0px;
}
.cat-item span
{
margin-left: 5px;
color: black;
}
.cat-item a:hover
{
text-decoration:none;
}
I had to change the markup just a little (put the numbers in a span) but other than that it wasn't too much
demo here: http://jsfiddle.net/ZW6uV/1
had to tack on !important because of a conflicting imported style sheet.
Edit
Readers Digest version: Don't put your padding on the <li> ... ever. Put padding on the <a> within the <li> and then it will fill the empty space and have the same effect but be able to handle the click also. -snip-
Yes just remove any padding from the LI element and push out the padding as needed on the anchor tag
<li class="link-wrapper">
<a href="http://this.com" >Go Here</a>
</li>
CSS
.link-wrapper{
margin: 0;
padding: 0;
}
.link-wrapper a{
display: block;
padding: 3px 5px;
}
Since you are using jQuery, you can do it this way:
$("li.cat-item").click(function () {
$("a", this).click();
return false;
});
I'm not an advanced user of CSS, but I have a decent working knowledge i suppose. I'm tryin to make an unordered list that uses different icons for each list element. I would also like the background colour of the list element to change upon hover.
Is there a way to do this through CSS, or would you just include the icon image within the list element (like below)?
<li><img src="voters.jpg">Voters</li>
Using the list-style-image on the ul level makes all of the icons the same, and I haven't been able to figure out another way. Most examples I've found teach you how to use images in a list, but only if the bulleted images are the same. I'm definitely open to suggestions and improvements on the way I'm trying to do this.
thanks
<div class="content-nav">
<ul>
<li class="instructions">Instructions</li>
<li class="voters">Voters</li>
</ul>
</div>
.content-nav {
font-size:12px;
width:160px;
z-index:0;
}
.content-nav ul {
padding:0 20px;
margin:30px 0;
}
.content-nav li {
padding:5px;
margin:5px 5px;
}
.content-nav li a {
color:#666;
text-decoration:none;
}
.content-nav li.voters a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.voters a:hover {
background:#0CF;
color:#000;
}
.content-nav li.instructions a {
background:#FFF;
color:#666;
text-decoration:none;
list-style-image:url(images/voters.jpg);
}
.content-nav li.instructions a:hover {
background:#0CF;
color:#000;
}
You could add background images on each list element, and use padding to push the text away from it.
<ul>
<li class="li1">List 1</li>
<li class="li2">List 2</li>
</ul>
.li1 {
background:url('li1.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
.li2 {
background:url('li2.gif') 50% 50% no-repeat no-repeat;
padding-left: 5px;
}
Just make sure the padding-left is the same size as the image (or a bit larger if you want spacing)
Using CSS3's :nth-child() selector, does not require additional markup on each <li> element:
Live Demo
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
ul li:nth-child(1) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal01.png');
}
ul li:nth-child(2) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal02.png');
}
ul li:nth-child(3) {
list-style-image: url('http://google-maps-icons.googlecode.com/files/teal03.png');
}
Browser Support: IE9+, FF3.5+, SA3.1+, OP9.5+, CH2+
I would suggest to use the icons as background-images for each list element. With this approach you can easily position the "bullet points" also (especially horizontal positioning).
You try to set the list-style-image property on an a element. Try setting it on the li element instead.
If you want to use different icons for each list, than give each list an unique name and use background-image and position it appropriately in CSS.
Just use the image in content property of your pseudo-element ::before:
li.item1::before {
content: url(/Images/icon/item1-icon.svg);
display: inline-block;
width: 1em;
margin-right: 6px;
margin-left: -1em;
}
You obviously need to have a class for each li with different image.
/* Cờ cho language switcher */
.widget_polylang ul {
list-style: none;
}
.lang-item-en:before {
background: url(/wp-content/uploads/2020/03/us.png) no-repeat 0;
padding-left: 20px;
content: "";
}
.lang-item-vi:before {
background: url(/wp-content/uploads/2020/03/vn.png) no-repeat 0;
padding-left: 20px;
content: "";
}
i code for Polylang's language switcher
I've got a horizontal navigation bar made from an unordered list, and each list item has a lot of padding to make it look nice, but the only area that works as a link is the text itself. How can I enable the user to click anywhere in the list item to active the link?
#nav {
background-color: #181818;
margin: 0px;
overflow: hidden;
}
#nav img {
float: left;
padding: 5px 10px;
margin-top: auto;
margin-bottom: auto;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0px;
background-color: #181818;
float: left;
}
#nav li {
display: block;
float: left;
padding: 25px 10px;
}
#nav li:hover {
background-color: #785442;
}
#nav a {
color: white;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
<div id="nav">
<img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
<ul>
<li>One1</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
<div>
<h2>Heading</h2>
</div>
Don't put padding in the 'li' item. Instead set the anchor tag to display:inline-block; and apply padding to it.
Define your anchor tag css property as:
{display:block}
Then the anchor will occupy the entire list area, so your click will work in the empty space next to your list.
Make the anchor tag contain the padding rather than the li. This way, it will take up all the area.
Super, super late to this party, but anyway: you can also style the anchor as a flex item. This is particularly useful for dynamically sized/arranged list items.
a {
/* This flexbox code stretches the link's clickable
* area to fit its parent block. */
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
(Caveat: flexboxes are obvs still not well supported. Autoprefixer to the rescue!)
Use following:
a {
display: list-item;
list-style-type: none;
}
Or you could use jQuery:
$("li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
You should use this CSS property and value into your li:
pointer-events:all;
So, you can handle the link with jQuery or JavaScript, or use an a tag, but all other tag elements inside the li should have the CSS property:
pointer-events:none;
Just simply apply the below css :
<style>
#nav ul li {
display: inline;
}
#nav ul li a {
background: #fff;// custom background
padding: 5px 10px;
}
</style>
here is how I did it
Make the <a> inline-block and remove the padding from your <li>
Then you can play with the width and the height of the <a> in the <li>
Put the width to 100% as a start and see how it works
PS:- Get the help of Chrome Developer Tools when changing the height and width
If you have some constraint where you need to keep <li> structure as is and would like your a tag to take up the full area within the li element you can do the following:
a {
display: flex !important;
width: -webkit-fill-available;
height: -webkit-fill-available;
justify-content: center;
align-items: center;
}
Put the list item within the hyperlink instead of the other way round.
For example with your code:
<li>One</li>