i know this might seem straightforward, but i can't solve it, im trying to make the whole list item linkable, rather than just the word home
the html code:
<li class="current">Home</li>
p.s. when you hover the li, background color changes, so i want that whole list item to be hyperlinked, if you get what i mean, not just the word
Wrapping a block level element (the li) within an inline-element (a), is invalid mark-up, which has the potential to throw errors, depending on your doctype. That being the case, first change your mark-up around to:
<li>link text</li>
Assuming that your li is display: block then the following will cause the a to 'fill' the available space:
a {
display: block;
width: 100%; /* this may, or may not, be necessary */
}
If you're using this for a horizontal list, and the li are display: inline, then you can use the following:
a {
display: inline-block;
}
And style-to-taste.
Do it in reverse
<li class="current">Home</li>
not sure what your other styles are but you can change the tag with something like
li.current a{
display:block;
}
This should do it:
HTML:
<li class="current">Home</li>
CSS:
li a {
display: block;
}
// or
li.current a {
display: block;
}
Related
I'm working with Bootstrap. I'm trying to add an image as number icon to my list. It is kind of a bad practice to add <div> tag inside <ul> tag, so is it possible to add icon with ::before?
Here's my code:
<ul class="lizt" id="sub-lizt">
<li class="item">1. Bunch of geebrish</li>
<li class="item">2. Bunch of geebrish</li >
</ul>
ul {
list-style-image: url('/your_img_path.jpg');
}
You can use this in your CSS. For in-depth just take a look Here.
Putting a div inside an li tag is not a bad practice. It would be wrong to put a div directly inside a list ol/ul, but not inside a list item.
That being said, you don't need a div to put a numbered image as bullet for your list, because, in fact, list-style property allows using an image as bullet.
.item {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=1');
}
.item:nth-child(2) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=2');
}
.item:nth-child(3) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=3');
}
<ol class="lizt" id="sub-lizt">
<li class="item">Bunch of geebrish</li>
<li class="item">Bunch of geebrish</li >
<li class="item">Bunch of geebrish</li >
</ol>
You'd probably want your images vertically aligned in the middle with your text. In that case, you have many options, like moving up your a elements from its relative position.
.item a {
display: inline-block;
position: relative;
top: -0.75em;
}
So, i am creating a menu, and i noticed that there is some unexplainable margin between li's. It also can not be seen in dev's console. Here is the code:
HTML
<div class="navbar">
<ul class="navbar_ul">
<li class="navbar_list_item navbar_main">Point Blank</li>
<li class="navbar_list_item navbar_main">Tanki Online</li>
<li class="navbar_list_item navbar_main">Dota 2</li>
<li class="navbar_list_item navbar_main">Warface</li>
<li class="navbar_list_item navbar_minor">Топ аккаунтов</li>
<li class="navbar_list_item navbar_minor navbar_last_item">О нас</li>
</ul>
</div>
And, here is the CSS:
.navbar_list_item {
display: inline-block;
}
.navbar, .navbar ul, .navbar li {
text-align: center;
padding: 0;
}
.navbar_ul {
width: 100%;
}
.navbar_list_item {
color: white;
width: 16.3%;
margin: 0;
height: 40px;
}
.navbar_main {
background-color: #3978C2;
}
.navbar_minor {
background-color: #2E3A86;
}
Here is the screenshot of menu:
Thank you!
This looks like the space/new line characters between </li> and <li> tags. Try to write the markup as such:
<li>content</li><li>content</li><
li>another content</li><li>yet another one</li>
The space is there is a 'side effect' (actually confusing but intended behavior) of how display: inline-block works. Inline block elements are rendered the same as inline elements, namely it assumes that they should be part of a line of text. Add to that the fact that HTML compresses all whitespace (space, tab, newline) into a single space and what happens is the newline character between each LI becomes a space character and you have a small visible gap between elements.
There are several methods to fight this. You might
Use negative margins to bump the elements back in line
Use zero-sized font
Use display: block and float: left
Use display: table
Remove all whitespace characters between LIs in your code
And there are other methods. Each has its own advantages and disadvantages.
A nice writeup of different solutions can be found here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
There are no margin between li element. the space between each li is related to your
width: 16.3%;
so you have 6 li element proportionally spaced ..
This mean that for each element the width is fixed..
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
Some days I swear I'm going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn't seem to be working. What am I missing?
My CSS looks like this:
ul > li {
text-decoration: none;
}
ul > li.u {
text-decoration: underline;
}
ul > li > ul > li {
text-decoration: none;
}
ul > li > ul > li.u {
text-decoration: underline;
}
And my HTML looks like this:
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined</li>
</ul>
</li>
</ul>
Yet it comes up like this:
text-decoration does not behave the same as other font/text related styling like font-weight. Applying text-decoration will affect all nested elements as well.
Check this out:
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Excerpt:
Text decorations on inline boxes are
drawn across the entire element, going
across any descendant elements without
paying any attention to their
presence. The 'text-decoration'
property on descendant elements cannot
have any effect on the decoration of
the element
. . . .
Some user agents
have implemented text-decoration by
propagating the decoration to the
descendant elements as opposed to
simply drawing the decoration through
the elements as described above. This
was arguably allowed by the looser
wording in CSS2.
I've got the info from: http://csscreator.com/node/14951
You get rid of text-decoration applied to a parent element in those cases:
Out-of-flow elements, such as floated and absolutely positioned ones
li {
float: left; /* Avoid text-decoration propagation from ul */
clear: both; /* One li per line */
}
ul { overflow: hidden; } /* Clearfix */
ul {
overflow: hidden; /* Clearfix */
}
li {
float: left; /* Avoid text-decoration propagation from ul */
clear: both; /* One li per line */
}
li.u {
text-decoration: underline;
}
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined</li>
</ul>
</li>
</ul>
Atomic inline-level elements, such as inline blocks and inline tables
But if you use li{display:inline-block}, then you don't have bullets (you lose display:list-item) and the items appear one next to the others.
Then, to have one item per line, you can use
li {
display: inline-block; /* Avoid text-decoration propagation from ul */
width: 100%; /* One li per line */
}
And to add the bullets, you can use ::before pseudo-elements. However, bullets shouldn't be underlined, so you will need to take them out-of-flow or make them atomic inline-level too.
li {
display: inline-block; /* Avoid text-decoration propagation from ul */
width: 100%; /* One li per line */
}
li:before {
content: '• '; /* Insert bullet */
display: inline-block; /* Avoid text-decoration propagation from li */
white-space: pre-wrap; /* Don't collapse the whitespace */
}
li.u {
text-decoration: underline;
}
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined</li>
</ul>
</li>
</ul>
li {
display: inline-block; /* Avoid text-decoration propagation from ul */
width: 100%; /* One li per line */
}
li:before {
content: '•'; /* Insert bullet */
position: absolute; /* Avoid text-decoration propagation from li */
margin-left: -.75em;
}
li.u {
text-decoration: underline;
}
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined
<ul>
<li>Should not be underlined</li>
<li class="u">Should be underlined</li>
</ul>
</li>
</ul>
This behavior is specified in CSS 2.1 and CSS Text Decoration Module Level 3:
Note that text decorations are not propagated to any out-of-flow
descendants, nor to the contents of atomic inline-level descendants
such as inline blocks and inline tables.
o.k.w.'s answer above explains perfectly why you can't do what you are asking without some other changes. No, you're not going mad!
Possible workarounds:
try border-bottom?
wrap the text you want underlined in a span class="u" tag? (to prevent the text-decoration from decorating nested elements)
if you aren't able to change the markup, you could add some scripting to accomplish the same as my previous suggestion.
Best of luck!
The reason you´re seeing what you're seeing is that your rule
ul > li.u
takes preference over:
ul > li > ul > li
as a class is specified and that has more weight than the element selectors together.
Edit: What you could try is:
.u ul {
text-decoration: none;
}
.u {
text-decoration: underline;
}
and play around with that (perhaps you will have to use li.u instead of just .u).
However, depending on the content you might want to wrap the underlined parts in q, em or strong tags and style these tags instead of using a class. That way you would be describing your content as well as styling it.
I ran into a similar issue when using an external theme/CSS, so I couldn't modify it to remove the text-decoration: none;. In my case, I had a child element with a link, but the link wasn't being underlined as expected. I tried using display: inline-block; as others mentioned, but it has no effect.
What worked for me was overriding the text-decoration as you had done, but also including !important to force it to override the parent's text-decoration.
// Defined in an external CSS, so I couldn't modify it.
.footer {
text-decoration: none;
}
// In my CSS file.
.footer a {
text-decoration: underline !important;
}
So for your particular example, I imagine this may do the trick (I did not test it to confirm):
ul > li > ul > li {
text-decoration: none !important;
}
The cleanest approach I’ve found is just to set the underline to the background’s colour.
.u {text-decoration: underline;}
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}