I have a nav ul li:after definition in a css like:
nav ul:not(.first) li:after {
margin-left: 10px;
content: '';
color: #bbb;
}
But to get rid of the not(.first), because it is affecting other "nav" in the page...
I want to apply the properties to a specific nav ul, li:after, the others nav are fine, only this I want to apply this style:
<nav>
<ul>
<li id="all">All</li>
<li id="web">WEB</li>
<li id="print">DesignD</li>
<li id="illustration">Illustration</li>
</ul>
</nav>
Is it possible? How to do it?
Normally I'd suggest using the style attribute but sadly I doesnt really work with :later.
So as already mentioned you will have to work a class or an id and then targeting it in css.
I'm pretty sure I know what your taking about, but forgive me if I'm wrong. You would like to apply those styles to just the first li?
In that case you should call out
nav ul:first-child li:after {
margin-left: 10px;
content: '';
color: #bbb;
}
Related
This is my first time posting a question here.
I am working with twitter bootstrap on a website design. I have to create the navigation menu such that the items listed there will be separated with pipeline. I have found another similar question here - Add a pipe separator after items in an unordered list unless that item is the last on a line and I used that, but the items are not separated as they are supposed to.
What I need to get: http://prntscr.com/4br2lb
After implementing the code from the post I found here I get this: http://prntscr.com/4br2yj
Here is my code:
HTML:
<div class="navbar navbar-default navbar-static-top header-menu">
<div class="collapse navbar-collapse navHeaderMenuCollapse">
<ul class="nav navbar-nav navbar-middle navbar-text" style="float:none;margin: 0 auto; display: table;table-layout: fixed;">
<li>HOME</li>
<li>AUTO</li>
<li>LIFE</li>
<li>HEALTH</li>
<li>BUSINESS</li>
<li>MORE...</li>
</ul>
</div>
</div>
CSS:
ul li {
float: left; }
ul li:after {
content: "|"; padding: 0 .5em; }
Thank you in advance!
Why not use a border for each li except the last instead? E.g:
Demo Fiddle
ul li:not(:last-child) {
border-right:1px solid grey;
margin-right:20px;
padding-right:20px;
}
Otherwise, you will likely need to add positioning to your :after psuedo elements or change the display to inline-block - though its hard to say without being able to replicate your issue with the provided code.
switching the a tags to inline blocks fixed it
div.navbar a {
display: inline-block;
}
ul li:after {
content: "|";
}
ul li:last-child:after {
content: "";
}
jsfiddle demo
I'm building a link list:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
Wanting them to appear as a link bar I add the CSS:
li { display: inline-block; }
Then, I would like to add a small content between the links using CSS, so :
li :before { content: "+"; }
And here is the problem, the + is integrated to the <a> inside the <li>.
Why is it so ? I'm using li:before, not a:before !
How can I prevent it ?
Here's a JSFiddle showing it : http://jsfiddle.net/KY58h/
Remove space between li & :before in your css.
Make the syntax correct. Not
li :before {
but
li:before {
forked fiddle -> http://jsfiddle.net/LsMq2/
You can use a image for the purpose.
ul li + li {
background:url('seperator.gif') no-repeat top left;
padding-left: 10px
}
I do not want that the same color is side by side. At the moment: 1-2-1-1-2 but It must be: 1-2-1-2-1
HTML
<ul class="list list-unstyled">
<li>The_hangover_part_1.avi<span class="pull-right">25Gb</span></li>
<li>The_hangover_part_1_intro.avi<span class="pull-right">15Gb</span></li>
<li>Covers<span class="pull-right">255Kb</span></li>
<ul>
<li>the_hangover_part_1_cover_1.jpg<span class="pull-right">123Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
</ul>
</ul>
CSS
.list li:nth-child(even) {
background: transparent;
}
.list li:nth-child(odd) {
background-color: rgba(255,255,255,0.05);
}
First, you need to correct your HTML. The ul element can't be nested directly in another ul, it must be inside one of the lis:
<ul class="list list-unstyled">
<li>The_hangover_part_1.avi<span class="pull-right">25Gb</span></li>
<li>The_hangover_part_1_intro.avi<span class="pull-right">15Gb</span></li>
<li>Covers<span class="pull-right">255Kb</span>
<ul>
<li>the_hangover_part_1_cover_1.jpg<span class="pull-right">123Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
<li>the_hangover_part_1_cover_2.jpg<span class="pull-right">122Kb</span></li>
</ul>
</li>
</ul>
Then, when you get the correct markup, you can redefine the order of colors for sub-items of the odd items of the main list:
.list li:nth-child(odd) li:nth-child(odd) {
background: transparent;
}
.list li:nth-child(odd) li:nth-child(even) {
background-color: rgba(255,255,255,0.05);
}
This is because the :nth-child selector only looks at the position within its direct parent. To fix this, you can remove the li tags outside of their ul and indent them by giving them a class that contains the indentation style.
My HTML file is:
asdfasdf
<ul>
<li id="differentstyle">Car</li>
<li>Car1</li>
<li>Travel</li>
</ul>
and my CSS style is:
#differentstyle ul li {
padding-bottom: 50px;
}
but this style is not modifying the "car" (the first one). Am I doing anything wrong? Is this suppose to work?
It does not style anything, because #differentstyle ul li selects a <li/> inside a <ul/> inside #differentstyle, but there is no <ul/> inside your #differentstyle. Use
ul li {
padding-bottom: 50px;
}
instead if you want to style all <li/> elements. Or use
#differentstyle {
padding-bottom: 50px;
}
if you just want to style the first <li/>. Or, if it's really just the first you want to style differently and you just want the styles to apply to a specific list, change your html to
<ul id="yourClass">
<li>Car</li>
<li>Car1</li>
<li>Travel</li>
</ul>
And use this css:
#yourClass > li {
padding-bottom: 50px;
}
#yourClass > li:first-child {
padding-bottom: 100px; /* different style for the first item */
}
#differentstyle ul li : means, the li inside the ul inside #differentstyle, and there's no li inside a ul inside #differentstyle.
So simply use:
#differentstyle {
padding-bottom: 50px;
}
Fore More Info: CSS selectors
Your selector #differentstyle ul li { means "match a li which is a descendant of a ul which is a descendant of an element with the id 'differentstyle'". If you want to target that first li, simply use #differentstyle { ... }
I think you have a height problem . and some code issues for use margin-bottom: 50px; instead of padding-bottom
so remove your all code .Just try to add below code
<ul>
<li id="differentstyle">Car</li>
<li>Car1</li>
<li>Travel</li>
</ul>
CSS:
ul
{
height:160px;//Its not a important
}
ul li
{
margin-bottom: 50px;
}
Please see this output design
I have a menu uses nested unordered lists to give the appearance of a secondary dropdown menu. This is working well for the most part. I recently refactored the CSS code to make it cleaner and easier for me to understand, but now I can't seem to get the secondary (dropdown) menu to appear behind the top-level menu. Both elements have positions declared.
The HTML is fairly straightforward and I don't think there's any problem here:
<div id="header-menu">
<ul>
<li>what</li>
<li>what
<ul>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</li>
<li>what</li>
<li>what</li>
<li>what</li>
</ul>
</div>
The CSS, however, is doing things that I don't really understand.
#header-menu > ul > li {
font-size: 2em;
display: inline;
position: relative;
}
#header-menu > ul > li:hover {
background: #a4b0ac;
padding: 25px 0;
}
#header-menu > ul > li > a {
padding: 25px;
position: relative;
z-index: 100;
}
#header-menu li > ul {
display: none;
position: absolute;
z-index: 99;
background: #CC6601;
}
#header-menu li:hover > ul {
display: block;
}
#header-menu li ul > li {
font-size: 0.8em;
display: block;
position: relative;
}
#header-menu li ul > li a {
padding: 10px;
display: block;
}
#header-menu li ul > li a:hover {
background: #a4b0ac;
display: block;
}
EDIT: Misread your question initially.
You can't put different z-indexes (z-indices?) on elements that are nested in that way because inside of one element cannot hide behind itself while the rest of it shows. You'll have to un-nest these and then apply the z-index, or remove the conflicting reference in the first z-index applied to <a>.
I tested this in Firefox 3.6 on Windows and it appears to work fine. That is, the secondary menu is appearing under the primary menu. Perhaps you could give us a screenshot of what you're seeing?
Cheers,
Scott
I looked at in in IE7, FF3.5, and Chrome (4.0.249.8).
It looked great in Chrome (drop down under the second menu item), in IE7 the drop down was under the third menu item, and in FF it was under the first menu item. Is this part of the problem? If is is, I believe it is a "position" (relative/absolute) problem vs. a "z-index" problem.
Also, with regard to z-index, I believe that IE resets the z-index stack whenever you change the position along the hierarchy. In your example, the css changes from "relative" to "absolute". Maybe that has to do with it?