I'm trying to achieve an effect like the one above but am unsure of the best way to do it. It it possible to use the unordered list and then change the styles so the bullets only appear on the inside?
If not would the best way be add a background image to each list item using pseudo to stop them showing before the first list item?
Thanks
This is relatively simple, so I doubt you tried, but because it requires so little effort, here you have the solution: (ok, so maybe the solution is so glaringly obvious you missed it ;p )
http://jsfiddle.net/kVsce/
HTML
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
CSS
ul li:first-child { list-style: none; }
Try this..can modify it according to your need.
CSS
ul { background: #004A80; overflow:hidden;}
ul li { color: #3CBCFF; font-size: 18px; float: left; width: 65px; }
ul li span { color: #FFFFFF; font-size: 14px; font-weight: bold; }
ul li:first-child { list-style: none; }
HTML
<ul>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>
<li><span>Item 3</span></li>
<li><span>Item 4</span></li>
</ul>
Related
This question already has answers here:
Understanding CSS selector priority / specificity
(4 answers)
Closed 3 years ago.
I was trying to create a responsive menu but selecting a specific element worked out differently.
For example, when I selected "nav ul li" for list styles in the default size and selected "ul li" for list style in the breakpoint, it didn't work as I intended.
It was fixed when I selected "ul li" for both the default size and the breakpoint but I don't know why it fixed the issue because as far as I know, selecting "nav ul li" and "ul li" are the same thing. Could somebody help me with this?
nav {
width: 100%;
background-color: darkblue;
}
ul {
width: 80%;
margin: 0 auto;
padding: 0;
}
nav ul li {
list-style-type: none;
display: inline-block;
padding: 20px;
}
ul li:hover {
background-color: orange;
}
ul li a {
color: #ffffff;
text-decoration: none;
}
.toggle {
width: 100%;
padding: 10px 20px;
background-color: #001f44;
text-align: right;
box-sizing: border-box;
color: #ffffff;
font-size: 30px;
/* to hide toggle */
display: none;
}
/* Break Point for the toggle */
#media screen and (max-width:768px) {
.toggle {
display: block;
}
ul {
width: 100%;
}
ul li {
display: block;
text-align: center;
}
}
<div class="toggle">
<i class="fa fa-bars"></i>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Resume</li>
</ul>
</nav>
You are running into specificity issues. In CSS, if two different rules target the same element with same attributes, the rule with the more specific selector will win and cancel out the less specific rule.
Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
nav ul li {/* more specific rule wins */
color: blue;
}
ul li {
color: red;
}
<nav>
<ul>
<li>The first list example</li>
</ul>
</nav>
<nav>
<ul>
<li>The second list example</li>
</ul>
</nav>
What is happing is that you are not overriding your selection in the media query.
For instance lets say you got:
CSS:
p a{
color: red
}
#media screen and (max-width:768px) {
a {
color: blue;
}
}
html:
<p> <a>Some Url </a> </p>
The media query wont override the selection for is not as specific as the prior selection.
CSS is about priorities for the more specific the higher the priority of style.
So as:
p a { some style} is more specific than a {some style} then the priority stands for the first one.
In your example, ul li is less specific than nav ul li, thats why you are not overriding the style with the media query.
Hope this answer your question.
Go to w3schools.com for CSS selection rules.
CSS is easy to start writing and really hard to maintain.
One approach to simplify maintainability and avoid specificity conflicts is BEM (Block, Element, Modifier) in which every element has a class and that class describes the element as either:
a Block
a Block Element
a Modified Block
a Modified Block Element
Eg.
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">The first list example</li>
</ul>
</nav>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">The second list example</li>
</ul>
</nav>
This will help you entirely avoid any specificity conflicts.
N.B.
BEM is just one approach to writing CSS. Others which similarly seek to simplify maintainability and extendability are OOCSS and SMACSS.
You will find on the web nearly a decade's worth of blog posts and tutorials on any of these approaches to writing CSS.
I'm learning how to build pure CSS drop-down menus, and I'm seeing a weird issue. I've searched and haven't found anything useful.
If you hover over the Blog link, you'll see "Case Studies" split in half with, "Case" on one line and "Studies" on the next line.
I' ve checked my HTML and it looks fine. It's been a long day so maybe I'm missing something obvious. :o
I have this so far:
<nav class="p-nav">
<ul>
<li>About</li>
<li>Showcase</li>
<li>Services</li>
<li>Blog
<ul>
<li>Case Studies</li>
<li>Tutorials
<ul>
<li>CSS</li>
<li>Javascript</li>
<li>Playground</li>
</ul>
</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
#import url(http://fonts.googleapis.com/css?family=Lato:300, 400);
.p-nav li {
position: relative;
}
.p-nav ul ul {
display: none;
position: absolute;
top: 100%;
}
.p-nav ul li {
float: left;
}
.p-nav a {
display: block;
font: 300 100%/70px"Lato", sans-serif;
padding: 0 30px;
}
.p-nav ul li:hover > ul {
display: block;
}
Here is the link to the code: http://jsfiddle.net/6CwYh/20/
Can anyone explain why it's doing that, and how I can fix it?
TIA.
Cause of space "problems" it places those two words on two lines.
If you don't like that you can add white-space:nowrap;to the <li>so it want wrap, have a look at the fiddle: http://jsfiddle.net/6CwYh/21/
.p-nav li {
position: relative;
white-space:nowrap;
}
There is simply not enough space for the text to fit, which is why it is wrapping. Give the 2nd level ul a width, like 350px.
http://jsfiddle.net/6CwYh/24/
Also, make sure you use direct descendant operators (>) I've added some in the above link.
If I target #something ul li That actually will target all uls and all lis in #something even if they're nested.
This was causing the items in the dropdowns to float, which caused further problems.
/* Better selectors */
#something > ul {}
#something > ul > li {}
#something > ul > li > ul {}
#something > ul > li > ul > li {}
make it wider:
nav ul li{
width:200px;
}
and its fixed
Have simple document with two unordered lists. The two lists are separate from each other in that one is not nested inside of the other.
See working example here: JSfiddle
A class is being applied to the First List, but not the Second List. I'm finding that the class is being applied to all lists on the page, even when the other lists do not share the same class.
Markup:
<style>
#listContainer
{
margin-top:15px;
}
. .expList ul, li
{
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
.expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
.expList { clear:both;}
</style>
<p style='font-size:1.4em;'>First list</p>
<div id='listContainer'>
<ul class='expList'>
<li>A<ul><li>A1</li></ul></li>
<li>A</li>
</ul>
</div>
<hr>
<p style='font-size:1.4em;'>Second list. </p>
<ul>
<li><b>Cats</b>
<ul>
<li>Cheezburger</li>
<li>Ceiling</li>
<li>Grumpy</li>
</ul>
</li>
<li><b>Role Models</b>
<ul>
<li>Bad Luck Brian</li>
<li>Paranoid Parrot</li>
<li>Socially Awkward Penguin</li>
</ul>
</li>
</ul>
Why would applying a class to a completely separate UL affect a different, non-nested UL on the same page?
EDIT - see the accepted answer to this question for a very good explanation of this problem.
You're applying the style to all li elements:
.expList ul, li
...means "ul elements in element with class expList, and all li elements".
Since it is the ul that has class expList, I'm wondering if you actually want:
.expList li { ... }
Meaning all li elements in ul.expList. Guessing though, hard to say without more info.
I'm learning CSS and html and am stuck on retaining the look of the hover/active state after an item has been clicked. I've looked at several posts on this site and haven't been able to apply the lesson to my application. I also found a solution here http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ but it didn't work for me (I'll assume it's my fault).
Another source suggested using a span class which is what I'm currently trying. I want to have the same hover color (#fff), weight (bold), and background image in use when a menu item is selected to show the user exactly where they are (this is in the secondary sidebar nav and comes in to use on those pages where the main nav has a dropdown with multiple otions). The only characteristic that's working for me is the bold text. You can see the work in progress here:
http://www.mentalwarddesign.net/dynamec/About/index.html
I'm assuming the class I've created in the span is being overridden, but I'm at a loss as to the remedy. Any and all help would be greatly appreciated.
Following is the code for the li and then the corresponding CSS. Thanks in advance!
<ul class="nav">
<span class="chosen"><li>What We Do</li></span>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}
Ed, the CSS selector :active means "Being activated (e.g. by being clicked on)", not "Having an href attribute that resolves to the URL of the current page". You can use server-side logic to insert a class=”chosen” or similar. E.g:
<li class="chosen">What We Do</li>
And, CSS style: ul.nav li.chosen a { }
There is another way to do it as mentioned on the tutorial link you gave, however it is not a good example.
Well first of all, you cannot wrap an li inside of a span. The only direct descendent of a ul is a li. You can put the class chosen directly on to the li and it works just fine.
<ul class="nav">
<li class="chosen">What We Do</li>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
Put the chosen class in the li element itself. Drop the span altogether.
EDIT:
Sorry, in the a element, i meant to say.
A span is a tag, a class is just an identifier. They don't really have anything to do with one another except a class can be used to apply a style to a span but that's true of any tag.
In your case you're trying to put a span (an inline element) around an li (a block level element). In HTML inline elements should not contain block elements.
You should be able to just do it like this: EDIT fixed based on the actual CSS
<li>What We Do</li>
I am having this issue and I am hoping that it is so simple and that is why I can not figure it out.
I want to use an image divider inbetween navigation <li> elements.
Here is my CSS:
#nav {
width:70.5%;
padding-left:29.5%;
list-style: none;
margin: 0px auto;
float:left;
background-image:url(images/bk_nav.gif);
background-repeat:repeat-x;
display:block;
text-align:center;
#margin-top:-4px;
}
#nav li {
float: left;
margin: 0px;
text-align:center;
font: 13px/100% Helvetica, Arial, sans-serif;
background-color:#cccccc;
}
.divide
{
position:relative;
float:left;
width:4px;
height:42px;
background-image:url(images/divider.gif);
}
#nav a {
color: #ffffff;
text-decoration: none;
text-align:center;
padding: 14px 25px 14px 25px;
font: 14px/100% Helvetica, Arial, sans-serif;
display: block;
text-align:center;
}
Here is the HTML:
<ul id="nav">
<li class="page-item-2 current_page_item">Home</li><span class="divide"></span>
<li class="page-item-20">Our Program</li>
<li class="page-item-10">Social</li>
<li class="page-item-13">Economic</li>
<li class="page-item-15">Environmental </li>
<li class="page-item-17">Resources </li>
</ul>
Currently I only have one divider in there because I am testing it. This code works fine in FF but IE is destroyed by it. Anyone shed some light on this frustrating situation?
UPDATE:
The one is right and the other is not. I was able to create the same error in FF so you can see both. (Just moved the <span>)
<ul>
<li>list item</li>`
<li class="divider"></li>
<li>list item 2</li>
</ul>
Then, in order to make the divider appear closer to the list items, just adjust the margin/padding of the .divider class
First thing's first:
A span cannot be a direct child of a ul element. It is not standard HTML, and so there's no telling what might happen. Only lis can be children of uls.
Suggestion:
I would, were I you, put the divide class on an li instead. That way, you have standard HTML at the very least, and maybe it'll even fix the page. Other than that, I would need a link to a demo as Bears will eat you suggested to be of any assistance.
I'm not entirely sure what "entire background" means, but I'm going to suggest that you use background-position and background-repeat to help. Read through these and it should help you figure out what you'd like to do.