I've this code generated with php:
<li class="current"><li>Page1</li></li>
<li><li>Page2</li></li>
<li><li>Page3</li></li>
<li><li>Page4</li></li>
I want to add a css property to tag a inside to list with class current.
I've tried with .li + li + a {property:attribute} etc...
Any suggestions ?
////////////////////// Edit
Ok guys... We did nothing. I tried to simplify the code. Here is the whole code (generated by wordpress):
http://pastebin.com/GJ3zXd93
You can use:
li.current li a
But most likely the double list items are a mistake, so you probably want to use this instead:
li.current a
Also, as a sidenote, the "." in the selector you wrote is trying to find elements with a class of "li", not a list item element.
With the recent update of your question:
I think I know what's going on here. You probably have a widget generating the menu for you. The call to the widget is inside a ul in your PHP. The widget generates the menu inside a div. You are probably also using arguments for the widget call to wrap each menu item inside an li. Which would give you the structure you have:
<ul>
<div>
<ul>
<li><li></li></li>
</ul>
</div>
</ul>
To fix, find where you are calling the widget, and remove the ul that's wrapped around it. Then remove the before and after arguments from the widget call. That should give you this structure:
<div>
<ul>
<li></li>
</ul>
</div>
Then you should have an easier time styling the menu.
You want:
.current a {}
(All links which are descendant of the .current element).
Related
i have a site, 4yourtype.com. On the home page there is a button "Blood Type Diet App" i'm tryin to replace it with a dropdown menu button. However whenever i add the following the drop menu does not appear but does seem to be working:
<div class="Cusdropbtn">
<button onclick="cusMenu()" class="Cusdropbtn has-child">I'm here to...</button>
<div id="myDropdown" class="Cusdropbtn-content">
<ul>
<!--edit links here-->
<li>Weight Loss</li>
<li>Gain Energy</li>
<li>Reduce Stress</li>
<li>Immune & Seasonal Support</li>
<li>See Best Sellers</li>
</ul>
</div>
</div>
I have tried replacing and removing most of the css and just cant seem to find what is stopping it from functioning properly. Any help would be greatly appreciated. I tried replacing the code between the <li></li> tag where the current button resides.
Now that I understand your problem, I've discovered the solution. You have conflicting styles in your menu: specifically your dropdown list (.Cusdropbtn-content ul) and generic lists in the header (.sf-menu ul, .PageMenu li ul).
You'll see that the latter styles both have the same or higher specificity and are defined later in stylesheets with higher priority than yours.
My first note is that your custom styles should be included after the base styles in your HEAD element to ensure that any style you overwrite have priority. Second, both .sf-menu ul and .PageMenu li ul set the position of the list to absolute, which means that it's being moved out of its container. You should have something like postion: static !important on .Cusdropbtn-content ul if you want to ensure that it is unaffected by the offending styles.
I am pretty new to CSS. There seems to be a ton of properties and values and it is a bit overwhelming. I am currently trying to emulate a stylesheet I found online. I am currently stuck on this portion
.tabs nav li.tab-current {
...
...
...
}
I understand .tabs is class and .tabs nav is the nav within where the tabs class I used in the html page. Same goes for li. I'm not sure what the .tab-current means and how it is being used. I'm not sure where to look to find notes/documentation on this topic.
The structure looks something like this
<div class="tabs">
<nav>
<ul>
<li class="tab-current">Hey</li>
<li>hello</li>
</ul>
</nav>
</div>
I just added the ul tags in there since most li tags are found within them.
Anyway, the li.tag-current part of the selector just means that it's going to select the Hey and style it.
From the looks of it the tab-current class acts much like an active class you'd put on a list item or a menu item to show that it's the currently selected item.
li.tab-current means li element with class tab-current.
So basically your CSS rule will be applied to all li tags with class tab-current being inside nav elements which are inside elements with class tabs
Ive got the following code:
<ul>
<a href="./index.php?profile=User1">
<li>User1 : 16</li>
</a>
<a href="./index.php?profile=User2">
<li>User2 : 4</li>
</a>
</ul>
This works perfectly fine in all major browsers, but it isn't allowed/invalid HTML and the right way should be this:
<ul>
<li>
User1 : 16
</li>
<li>
User2 : 4
</li>
</ul>
But if I do it like the second example only the text not the whole <li> is clickable like i want it to.
Should I stay with the invalid working version or has anyone a better solution?
Use CSS to make the link take up the entire list item, eg. display: block (and any other styling you might want).
Wrapping links around list items is invalid HTML.
Short answer is NO, it won't be validated, only li can be inside ul and ol elements.
So this is incorrect
<ul>
<a><li></li></a>
</ul>
This is fine
<ul>
<li><a></a></li>
</ul>
Anchor tag is inline element so make it block using display:'block' so that it will take full width of its parent i.e. li tag
The second way around is the correct way to do it, you just have some minor styling issues.
If you set the <li>'s to have no padding and the <a>'s to have no margin, the links will fill the entire area of the list item.
You have to use the valid way.
And set the "a" tag with :
display: block
http://jsfiddle.net/TYVV6/1/
And if you don't want to show the points at the beggining of the list elements.
You'll have to use :
list-style: none;
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
I've never come across this problem before and its quite annoying me. I have a list which when hovered over, a box appears around it.
I have a list set out like the following
<div id="sidebar">
<h2>Our Services</h2>
<ul>
<li>Furniture</li>
<li>Kitchens</li>
<li>Bedrooms</li>
<li>Flooring</li>
<li>External Joinery</li>
<li>Commercial Work</li>
<li>Staircases</li>
<li>Tiling</li>
</ul>
</div>
But for some reason firefox doesnt render the whole list item as a link, only the text.
It works across other browsers (even IE) but not firefox.
Change
<li>Furniture</li>
To
<li>Furniture</li>
Inside a UL you are supposed to have LI elements, not anything else. However, inside the LI you can have other tags such as A
Update
You can set the style of A to display:block as mwgriffith suggested on comments.
or to make the whole line a link you can also assign a click event on the LI, here is an example using jQuery
I figured it out, instead of having the <li> display the background I used display:block on the <a> tags and uses the a:hover to create the background.