Someone can explain how it does work on SASS?
ul.breadcrumbs
margin-top: 30px
display: flex
list-style-type: none
gap: 20px
li.bread-item
&::after
content: ">"
margin-left: 20px
&:last-child::after
content: ""
I'm trying to remove the last after element from li in the ul list
:last-child asks "Am I the last child?", rather than "What is the last child of this element?". With that in mind then you can see that you're targeting ul elements which are the last child of whatever their parent element is. All you have to do is indent the rule so that it's targeting the li instead.
ul.breadcrumbs
margin-top: 30px
display: flex
list-style-type: none
gap: 20px
li.bread-item
&::after
content: ">"
margin-left: 20px
&:last-child::after
content: ""
That'll work as you're intending and remove the > from the last li.
Related
How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?
I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955
I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.
Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/
Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.
There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.
Here is the html:
<nav id="idMainNav">
<ul>
<li>ASDF</li>
<li>QWER</li>
<li>ZXCVB</li>
<li>UIOP</li>
<li>HJKL</li>
<li>VBNM</li>
<li>TYUI</li>
</ul>
</nav>
Here is the css:
#idMainNav{
width: 900px;
}
#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}
#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}
#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#idMainNav li:first-child {
padding-left: 10px;
}
#idMainNav li:last-child {
padding-right: 10px;
}
li {
background: green;
}
li:nth-child(odd) {
background: red;
}
#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}
The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).
Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.
I created tabs using <li>. I used css to add style but the problem is, there is a space between tabs. I tried to add margin: 0px; in ul.tabs li but the spaces are still there.
Please see the link http://jsfiddle.net/cfv65agn/
Thanks.
A straightforward fix is to set the font size of your ul with the class "tabs" to 0, and set the proper font size on the list items directly.
This will remove the default spacing between them, without the need of magical negative numbers.
I just tested, and the following works:
ul.tabs {
font-size: 0;
}
ul.tabs li {
font-size: 16px; /* set to the font size you want */
}
Change margin in "ul.tabs li" to a negative number. -3 gets rid of them, -2 makes them real small.
Adding float: left to your ul and li will fix it too (make ul 100% width as well):
CSS
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
float: left;
}
ul.tabs li {
background: #ffffff;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border-top-right-radius: 1em;
border-top-left-radius: 1em;
border: 1px solid #afafaf;
margin : 0px;
float: left;
}
Here's a jsFiddle
probably it is because you have set display:inline-block in ul.tabs li.
changing it to float:leftwill fix this. this usually happens when there is a \n between inline-block elements
display: inline-block will honour white-space between them. Simply delete the tabs an spaces between your li's. The will unfortunately make your code slightly less readable, but you can more or less compensate by putting a line break within the li, at the end.
I have a strange trouble with css.
Take a look at the first element of the menù (Home) of this site (is a beta): http://nightly.gamempire.it/
I want to remove the "Home" word from the first element (and leave only the house icon).
I tried removing the word, but it break the style of the element.
If I set to the property
body > nav a.master { width: 30px; overflow: hidden; }
it break the style of all the menù.
What can I do?
Thanks
body > nav li {
display: inline-block;
vertical-align: middle;
}
body > nav a.master {
display: block;
height: 36px;
font-size: 0;
padding: 0;
}
Another option would be to do this:
nav li:first-child a {text-indent: -9999px;}
or also
nav li a.master {text-indent: -9999px;}
I'd like to create a horizontal navigation list of links, where the nav links are evenly spaced and take up the full width of the enclosing container <ul>. Nav links can be different widths. The first and last links should line up with the beginning and end of the <ul> respectively (meaning the links aren't centered), like this:
|left side..right side|
link1 link1 link3 link4
Unless I'm mistaken, I don't think there is a way to do this in CSS2. But is there a way to do it in CSS3? Otherwise I'll need to do it in Javascript.
If you insist on CSS3, you can do it with box-flex. Since this isn't fully implemented in all browsers, the properties still have the -moz and -webkit prefixes.
Here's the CSS to do it:
ul {
display: box;
}
li {
box-flex: 1;
}
But since not all browsers use it, you have to add -moz-box-flex, -webkit-box-flex, etc.
Here's a demo: http://jsfiddle.net/tBu4a/9/
That's straightforward to do with CSS2:
ul {
display: table;
width: 100%;
}
li {
display: table-cell;
}
a {
display: block;
}
Here's a working example. The problem isn't so much that CSS2 doesn't have a way to do it, it's that IE didn't fully support CSS2 until version 8.
--edit
OK, now I think I understand your requirements:
ul {
display: table;
width: 100%;
border: 0;
padding: 0;
background-color: blue;
}
li {
display: table-cell;
border: 0;
padding: 0;
text-align: center;
}
li:first-child {
text-align: left;
}
li:last-child {
text-align: right;
}
a {
display: block;
padding: 0.25em 0;
background-color: white;
text-decoration: none;
}
Here it is in action. I've zeroed out all the borders and padding as per your comments, you could add some back in but you would, of course, need to zero out the left border/padding of the first link and the right border/padding of the right link using either li:first-child or li:first-child a (and the opposite last-child ones).
I made a new website and my problem is that the menu is ok in FF and other browsers, but not in IE.
The problem is, it wont list the list elements, no hover , no color, and not inline.
here is the code
nav {
margin-top: 15px;
}
nav ul {
position: relative;
left: 297px;
}
nav li {
float: left;
padding: 0 20px;
font-size: 12px;
line-height: 65px;
background: url(images/line.png) no-repeat right 10px;
height: 72px;
text-transform: uppercase;
}
nav li a {
color: #656464;
text-decoration: none;
display: block;
}
nav li:hover {
background: url(images/hover.png) repeat-x 0 35px;
color: #242424;
}
could please someone could give me a hint?
nav is an HTML5 element; old IEs will not recognize it and thus won't apply your styles.
To make IE recognize HTML5 markup, place the HTML5 shiv on your page, then declare a rule for nav and any other HTML5 elements you use, giving them a display: block style, just above the CSS that you have now.
<nav> is fine to use on a page, but you will run into problems with it when you try and style it as many browsers simply skip the tag if they don't understand it.
Wrap the <nav> tag in a wrapper div and style that instead, and strip away any styling from the semantic tags so they are naked.