I have an inline stylesheet that is cascading really strangely.
I have a menu made with a <ul> and I want to make it so that when a user is on a page, the background color of the current page link on the <li> is green. I did this by creating an ID with background-color: #288E3A;, but despite placing it after the ID for the menu, I cannot make the current <li> turn green. The only way I can get it to work is to use !important, but I cannot bring myself to use that solution. -shudder-
I have a feeling this is probably something really simple I am missing. Can someone explain where I went wrong?
#menu ul {
padding: 15px;
list-style-type: none;
}
#menu ul li {
background-color: #363636;
margin: 0px 0px 15px;
line-height: 50px;
padding: 0px 5px 0px 5px;
}
#current_page ul li {
background: #288E3A /*!important*/;
}
<div id="menu">
<p>MAIN MENU</p>
<div id="button_container">
<ul>
<li id="current_page">HOME</li>
<li>CAR LOANS</li>
<li>AUTO LOAN REFINANCING</li>
<li>AUTO CALCULATORS</li>
<li>TOOLS AND RESOURCES</li>
</ul>
</div>
</div>
<div id="content_container">
<img src="img/cf_mobile_website-4.jpg" />
</div>
your css is incorrectly specifying the element, what you want is this :
#menu ul li#current_page{
background:#288E3A;
}
Better yet you could use css to specify the first child so you wont need to add a custom id:
#menu ul li:first-child{
background:#288E3A;
}
Related
I'm a relative newcomer to web design - after learning the basics a while ago (and promptly forgetting them), I started reading about it a few months ago. I've begun to make my own web pages in order to test and improve my skills, but I'm having issues with getting my navigation bar to display properly. The HTML code for my navigation bar is as follows:
<div class="nav">
<ul class="nav">
<li class="nav"><a class="nav" href="#">Home</a></li>
<li class="nav"><a class="nav" href="#">Coffee</a></li>
<li class="nav"><a class="nav" href="#">Food</a></li>
<li class="nav"><a class="nav" href="#">Catering</a></li>
<li class="nav"><a class="nav" href="#">About</a></li>
<li class="nav"><a class="nav" href="#">Contact</a></li>
</ul>
</div>
<!--Navigation bar.-->
The CSS code for the pertinent elements (div, ul, li & a) is all listed below:
div{
border: 2px;
border-radius: 3px;
margin: 0 auto 60 auto;
padding: 10px;
width: 980;
}
/*BASIC DIV ELEMENT.*/
/*LINKS.*/
a{
color: #545454;
font-family: lucida grande, lucida sans, sans-serif;
font-size: 14px;
text-decoration: none;
}
a:hover, a:active {
color: #191919;
}
/*LINKS.*/
/*NAV BAR*/
a.nav:link{
background-color: #D7C5CC;
color: #191919;
display: inline-block;
padding: 15px;
text-align:center;
width: 90px;
}
a.nav:hover{
color: #191919;
background-color: #EDD9DF;
}
li.nav{
float: left;
}
ul.nav{
display: center;
margin: 0 auto 0 auto;
}
/*NAV BAR*/
I'm an absolute beginner when it comes to writing HTML and CSS code, so apologies if that was poorly done. I'm having trouble with the navigation bar on two fronts:
I can't get the corners of the navigation bar to round properly. I've previously altered ul.nav and li.nav to have "border-radius: 10;" as an attribute - both to no avail.
I can't get the navigation bar to center properly on my page (I'm testing it in Chrome). Every other div centers perfectly; and I've tried editing the "display" and "float" attributes to no effect.
I've searched through many similar posts on Stackoverflow, but none of the answers seemed to get the desired result.
EDIT: My goal is to have a continuous (where all of the buttons are "connected") navigation bar where only the outermost corners are rounded. For example:
http://cssmenumaker.com/menu/indented-horizontal-menu
All you need is to add this CSS:
ul.nav li:first-child a {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
ul.nav li:last-child a {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Here is a jsFiddle if that helps too.
Also, if you want an exact copy of the example you gave a link to, then here's that jsFiddle.
Please check this: jsFiddle.
To add a border-radius, I added the following CSS:
a.nav:link {
border-radius: 10px;
}
To center the navigation menu, I added the following CSS:
ul.nav{
text-align: center;
}
I also removed the float: left property assigned to li.nav and added this new CSS to it:
li.nav{
display: inline-block;
}
well in first time your class is invalide because you apply the same in differents levels, if you have a css properties for your class this properties maybe will have conflicts or not work.
in this case my recomendation is:
<nav>
<ul class="navbar">
<li class="nav-item selected">Home</li>
<li class="nav-item">Coffee</li>
<li class="nav-item">Food</li>
<li class="nav-item">Catering</li>
<li class="nav-item">About</li>
<li class="nav-item">Contact</li>
</ul>
</nav>
<style>
nav{
position:fixed;
}
.nav-item{
color: #000;
border: 1px solid blue;
background-color: rgba(255, 255, 255, .6 )
}
.nav-item:hover
{
background-color: rgba(0, 255, 255, .6 )
}
.selected{
color: #058;
border: 1px solid red;
background-color: rgba(255, 0, 255, .6 )
}
nav: is html5 item to make navigation bars
class {
navbar: there is the ensamble of items, use for set general options, distribution, for all items in navbar.
nav-item: is for create options for every sngle item, is posible create effects.
selected: other class for marked a selected item, is possible use many class in the same item, only need write a space, with javascript is possible set or delete a class, in this this case
<script>
$(".nav-item").click(function(){
$(".nav-item").removeClass("selected");
$(this).className = $(this).className + "selected";
});
</script>
this function change the class selected to the item clicked.
}
the style is only an uggly example
I'm trying to style my WordPress Menu. I want each menu item to have a different color and the background color of all the children on pages and posts must have the background color the same as the parent text color.
What I want is the following:
- <ul id="main-menu" class="menu">
<li id="1">This is Red
<ul>
<li id="4">Background Red</li>
</ul>
</li>
<li id="2">This is Blue
<ul>
<li id="5">Background Blue</li>
</ul>
</li>
<li id="3">This is Green
<ul>
<li id="6">Background Green</li>
</ul>
</li>
- </ul>
I managed to get this right on the home page only, thinking that it would be the same for each page. But on other pages it's not reflecting as it's intended to reflect.
CSS styling for lists that has the '>' in it I am still battling to understand - I just find it confusing.
If someone could point me to a good tuturial or show me how it's done, I'd be most greatful.
An ID's can't start with a number, change it if you're currently using it. If there's no way to change it you can use [id='1'] {/* some css */}
The HTML
<ul class="menu">
<li id="first">This is Red
<ul>
<li>Background Red</li>
</ul>
</li>
<li id="second">This is Blue
<ul>
<li>Background Blue</li>
</ul>
</li>
<li id="third">This is Green
<ul>
<li>Background Green</li>
</ul>
</li>
</ul>
The CSS
#first {
color: red;
}
#first ul > * {
background-color: red;
color: white;
}
#second {
color: blue;
}
#second ul > * {
background-color: blue;
color: white;
}
#third {
color: green;
}
#third ul > * {
background-color: green;
color: white;
}
Here it is at work http://jsfiddle.net/9mD8z/
Hope it solves your problem.
just Now i found the answer for this question:)
# Appearance > Menus look top and click: Screen Options!
Then check (CSS Classes) under: Show advanced menu properties
So will display new field called CSS Classes. with each item!
Now you can target the classes you have assigned from within your stylesheet.
Regards:)
Guest!
I've managed to work this out for my self the styling I need to apply actually goes like this:
.jqueryslidemenu #menu-item-12 a{color: #6cd7fb !important;}
.jqueryslidemenu #menu-item-12 > ul.sub-menu {border: 1px solid #6cd7fb; border-radius: 10px; background: none repeat scroll 0 0 #6cd7fb !important;-moz-box-shadow: 8px 8px 9px #888888; -webkit-box-shadow: 8px 8px 9px #888888; box-shadow: 8px 8px 9px #888888; }
.jqueryslidemenu #menu-item-12 > ul.sub-menu li a{color:#fff!important; background-color:#6cd7fb !important;}
.jqueryslidemenu #menu-item-12 ul.sub-menu > li a:hover{
background-color:#6cd7fb !important;
border-color: #56c8f5 #65E1F7 #AEEEF9; border-image: none;
border-style: solid;
border-width: 1px;
border-radius: 15px;
box-shadow: 0 -5px 9px #AEEEF9 inset;}
This is working for me - I know I have to work on the styling the color a bit more. If anyone has a better solution, I'm all ears :)
Obviously this is just for one of the menu items - the id of the other menu items change
I have the css layout: One column fixed width layout, from maxdesign.com
the following is the navigation div:
<div id="navigation">
<ul>
<li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
<li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>
</ul>
</div>
Now, I want to place an asp:label with the current user logged in, in the same navigation div by doing this:
<div id="navigation">
<ul>
<li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
<li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>
</ul>
<div id="username">
<asp:Label ID="lblUsername" runat="server" Text="User name"></asp:Label>
</div>
</div>
with the css code:
#navigation
{
float: left;
width: 960px;
background: #1f2d3a;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 1px 5px;
color:#fff;
font-size: 14px;
/*font-weight: bold;*/
border-right: 1px solid#fff;
}
#navigation li a:hover { background:#0c749b; }
#username
{
float: right;
padding-right: 5px;
color:#fff;
}
But the label is always shown below the line of menu items, at the right but below them.
Can someone help me?
Why not place the label in a right floated li, inside #navigation? Your CSS can stay the same, since #username is floated right already.
<div id="navigation">
<ul>
<li><asp:LinkButton ID="lkbDataEntry" runat="server">Data Entry</asp:LinkButton></li>
<li><asp:LinkButton ID="lkbReports" runat="server">Reports</asp:LinkButton></li>
<li id="username"><asp:Label ID="lblUsername" runat="server" Text="User name"></asp:Label></li>
</ul>
</div>
you need to float the ul. right now the ul is a block element, meaning anything after it will show up on the next line, thus the username is below it. if you assign a float:left, it should allow elements to appear in the empty space to the right of the list.
To my knowledge, the answer to this is no, can't be done, but I need a second opinion:
If I have the following:
<li>
<a >#</a>
<div class="sub">
#
</div>
</li>
and have a background image that appears on li a:hover is it possible to have that background stay on when hovering on the .sub div? This also has to work pure CSS - no javascript cheats.
My understanding is because .sub isn't a child of the a we can't reference it in css to keep the hover.
Because the image is for only one section of the code, I can't move it to the li and reference li:hover a.
Not sure what all you are trying to achieve, but there are many hover effects that can be done.
SECOND UPDATE: If you don't need to interact (other a tags, etc) at all with anything in the div, then this way cheats to get the effect. Note how the anchor inside the div does not register because of the z-index.
UPDATE I think I understand your issue better now. Can you add a wrapper and do the following?:
Example HTML:
<ul>
<li>
<div>
<a>Some anchor text</a>
<div class="sub">Some div content <a>and anchor</a></div>
</div>
</li>
</ul>
Example CSS:
li:hover {
background-color: cyan;
}
li > div:hover > a {
background-color: green;
}
a:hover {
color: yellow;
display: block;
}
a:hover + .sub {
outline: 1px solid blue;
}
.sub:hover {
color: red;
outline: 1px solid red;
}
If you can't use a class on the li or modify the div.sub to be in the a, you're probably out of luck without Javascript:
Is there a CSS parent selector?
However, if you can, you could use:
<ul>
<li class="sub">
<a>Class #</a>
<div class="sub">#</div>
</li>
<li>
<a>Inner #
<div class="sub">#</div>
</a>
</li>
<li>
<a>None #</a>
<div class="sub">#</div>
</li>
</ul>
li.sub:hover,
li a:hover {
background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG);
}
li a {
border: 1px solid blue;
display: block;
}
.sub {
border: 1px solid green;
}
http://jsfiddle.net/B7Au2/4/
I don't know if you can modify the html, but if you can, try swapping the div and the a:
<li>
<div class="sub">
#
</div>
<a >#</a>
</li>
Now you can use the adjacent sibling selector:
li a:hover, li .sub:hover + a {background:url('some-image.png')}
Unfortunately there's no way to select the previous element through CSS: that's why you need to swap your elements.
I have a menu div which has a dark background. Inside it, I have several menu item divs with 1px margins on the right and the left. This way I've got separators between them. Obviously these appear on the very left and very right side of the menu which I don't want. Is there a way to accomplish this without inserting 1-pixel divs as separators?
Thank you
edit: sorry, I thought it was descriptive enough. Here is the code:
<div id="menu">
<div class="menu_item"><img src="imgs/menu/szabalyzat.png" /></div>
<div class="menu_item"><img src="imgs/menu/profil.png" /></div>
<div class="menu_item"><img src="imgs/menu/zenekarok.png" /></div>
<div class="menu_item"><img src="imgs/menu/jelentkezes.png" /></div>
<div class="menu_item"><img src="imgs/menu/esemenynaptar.png" /></div>
<div class="menu_item"><img src="imgs/menu/mmmk_estek.png" /></div>
</div>
IE6 incompatibility is OK (thankfully).
The following rule will apply to all .menu_item elements that follow another .menu_item element:
.menu_item + .menu_item {
border-left: 2px solid black;
}
The simplest way yo achieve it is to mark your first and last elements with custom classes and remove that margins from them.
<ul class="menu">
<li class="first">One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin: 0 1px; }
.menu .first { margin-left: 0; }
.menu .last { margin-right: 0; }
</style>
You can also try using complex css selectors, like :first-child, but they do not work in older versions of MSIE.
OR, you can use 2px margins on the right side instead and go with only one additional class:
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li class="last">Four</li>
</ul>
<style>
.menu li { margin-right: 2px; }
.menu .last { margin-right: 0; }
</style>
If a high percentage of your audience's browsers support CSS3, you can use the :first-child and :last-child pseudo-classes:
div#menu div:first-child {
margin-left: none;
}
div#menu div:last-child {
margin-right: none;
}
Can't you have 2px left-margin instead of 1px on each side and then use the css pseudo class :first-child to remove these margin for the first item ?
EDIT: I agree with the fact that you should use border as separator rather than background but in case you do this that way for some good reasons, my answer's still valid :-)