I am currently trying to style my navigation bar with different colors for each list item.
Here is the html code
<ul>
<li id="item1">Home </li>
<li id="item2"> About </li>
<li id="item3"> News </li>
<li id="item4"> Video </li>
<li id="item5"> Donate </li>
<li class="part">Contact </li>
</ul>
And here is the css code
#item1{background:#7375D8};
#item2{background:#4E51D8};
#item3{background:#1A1EB2};
#item4{background:#303285};
#item5{background:#080b74};
#header ul li.part
{
background:#689AD3;
}
For some reason only item 1 and li.part are actually displaying the colors correctly , the rest display nothing in all browsers.
Dreamweaver however is displaying all the colors in the preview section so I have no clue what the problem is with them .
Many thanks for your contributions.
It's just a syntax error! The semicolons should be inside the curly braces!
#item1{background-color:#7375D8;}
#item2{background-color:#4E51D8;}
#item3{background-color:#1A1EB2;}
#item4{background-color:#303285;}
#item5{background-color:#080b74;}
#header ul li.part
{
background-color:#689AD3;
}
You have not closed the semicolons properly, it was outside the braces so thats the reason it was not working. See the css rules below for correct one.
Write your css like below:
#item1{background:#7375D8;}
#item2{background:#4E51D8;}
#item3{background:#1A1EB2;}
#item4{background:#303285;}
#item5{background:#080b74;}
#header ul li.part{background:#689AD3;}
the semi colons should be before the closing brace for each style. the unclosed tags are causing the problem
Related
When I validate my html on w3 validator, I get the following error:
Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.).
The site is displaying properly (and the anchor is working) on my phone, tablet and desktop, and I don't really understand this error message. Can somebody tell me what I did wrong and how to do this properly?
Here's the part of the code that produces the error:
<section id="skills">
<div class="skills-header">
<p>Pozdravljen Svet! Pišem lahko:</p>
</div>
<div class="skills-container">
<ul>
<li>< html5 ></li>
<li> { css3 }</li>
<li>javascript.js</li>
<li class="break">$(jQuery)</li>
<li class="break"><%= rails 4 %></li>
<li class="break">< div class="bootstrap" ></li>
<li class="break">$ sudo apt-get update</li>
<li class="profile-icon ion-social-linkedin"></li>
<li class="profile-icon ion-social-github"></li>
</ul>
</div>
</section>
<ul> can only contain <li> elements. It's as simple as that really.
<ul> is an "Unordered List", and an <li> is a "List Item". A list should only contain list items...
You may find it is working in your browser, but you shouldn't keep it that way. Some browsers will auto-correct your error and wrap an <li> around your <a> elements, others will just make it look awful.
If you want to correct your code I suggest the following:
<li></li>
<li></li>
I'm putting together a WP website, and on the menu bar the active menu item is underlined. All of the menu items (li) had a padding-right set on them, but I need to take it off the active element so that the border on the bottom only extends to the end of the text. To make up for it, I need to somehow target the next li but I can't quite figure out how to do it. I'm working in the context of someone else's WP theme which is always a challenge but I think this is probably doable, I just don't know quite how to combine the CSS selectors. Here's the basic menu structure:
<nav id="top-menu">
<ul id="menu-top">
<li id="menu-item">
<a>ITEM 1</a>
</li>
<li id="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li id="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
To target the padding on the element, I have to use #top-menu ul > li#current-menu-item > a
So if I wanted to target the 3rd element in this example, what code would I use? Is this even possible, or am I trying to be too specific? I'm hoping some combination of child and descendant selectors, but I'm not sure how I can make it all work together. Thanks for your help!
Usually in situations like this I resort to a bit of jQuery. With jQuery, you can use next() to get the li after the one you've targeted.
First, you've mixed up ids and classes. You need to be using classes here (ids cannot be repeated):
<nav id="top-menu">
<ul id="menu-top">
<li class="menu-item">
<a>ITEM 1</a>
</li>
<li class="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li class="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
Then this would give you the li after the current one:
$('.current-menu-item').next()
So you could do something like add another class to it (obviously my class name is waaaayyy longer than it really needs to be!):
$('.current-menu-item').next().addClass('the-one-after-the-current-menu-item');
Which you could then style via css.
.the-one-after-the-current-menu-item { // styling here.... }
Yes, the "+" in CSS selects the element after whatever. In this case, something like this:
#current-menu-item + li {
background: red;
}
Although, you may have another problem in that you can't use spaces in IDs. If the IDs in your example were classes instead, you'd be completely fine.
as pointed out by russtuck91, that current-menu-item needs to be a class, then his answer is the one i would implement, it is the cleanest.
however if you cant change that (which you have to as you cant have spaces in id's), you can use :nth-child(x) where x is the number of child elements down:
#top-menu li:nth-child(3) a {
color:red;
}
will still recommend russtuck91's answer though
I want to add my navigation in the sidebar, and there isn't space for it.
I want to set it up so that when I hover over a word such as (Links) a list will appear. But I'm not sure what code I should be using to accomplish this.
An example can be seen here: http://www.colourlovers.com/ when you hover over Browse it shows a list of other links.
<div id="navigation">
<a href="http://aftermidnightworkouts.tumblr.com/tagged/healthyrecipes">Dear
Charlie</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Portfolio</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Aftermidnightworkouts</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Writings</a>
</div>
Here's a little bit of code to get you started:
http://jsfiddle.net/jonigiuro/ZsAQb/
<ul id="navigation">
<li>
Dear Charlie
<ul class="subnav">
<li class="item">
subnav item1
</li>
<li class="item">
subnav item2
</li>
</ul>
</li>
</ul>
It's better to use a list for navigation menus like yours, it would be even better to wrap it in a nav tag (html5).
The trick is that you insert a child list for the subnavigation inside a list item of the main navigation and set it's css to be hidden by default. When you hover on a main navigation item you just target it's child subnavigation and display it
Just google for CSS drop down menu, lots of pages about it, you can even have it generated and then inspect the code yourself (for example here). You just need a bit of css code that use :hover selector.
I have an issue with links for which their focus is jumping around.
The site is here: www.bikramyoga.cz
The links that are troublesome are in this HTML piece:
<ul id="sub">
<li id="mail">
chci zasílat novinky
</li>
<li id="fb_icon">
to se mi líbí
</li>
</ul>
When I first created the site the links worked fine, now not so much.
Any ideas where my CSS is messed up?
If you display your <a> as block, instead of inline-block it seems to work as you want.
#mail a{display:block}
#fb_icon a{display:block}
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.