I'm having a small issue here:
<div id="navbar">
<ul id="navtabs" class="floatcontainer">
<li <?php if ($_GET['dept'] == "home") {echo"class='selected'";} ?>><a class="navtab" href="index3.php?dept=home">Home</a>
<ul class="floatcontainer">
<li>User Panel</li>
<li>Report Bugs</li>
<li>Staff Forums</li>
</ul>
</li>
<li <?php if ($_GET['dept'] == "management") {echo "class='selected'";} ?>><a class="navtab" href="index3.php?dept=management">Management</a>
<ul class="floatcontainer">
<li>User Listing</li>
</ul>
</li>
</ul>
In the code, the correct floatcontainer is meant to show up in each case for the li above, however, the bottom one, the floatcontainer with the User listing li only shows in both cases.
How do I resolve this?
If you don't want the ul showing up unless $_GET['dept'] is some particular value, then put it inside an if() block?
Related
<div class="menu">
<ul>
<li>
<ul class="sub-menu">
<li>
<ul class="sub-menu">
<li></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Could You please tell me how to target just first ul element with "sub-menu" class as on an example above? Every pseudo-class I know targets both "sub-menu" ul-s at the same time.
One option:
ul:not(.sub-menu) > li > .sub-menu {
...
}
I have three lists:
<ul class="mighty-list" id="list1">
<li>Cool</li>
<li>Yah</li>
</ul>
<ul class="mighty-list" id="list2">
<div id="floating_button"></div>
</ul>
<ul class="mighty-list" id="list3">
</ul>
Now i want to write an s there a way to select list2+list3 ( or select list 1 only) , considering they are empty of any <li> children?
I'm aware that the :empty solution none of the above because list3 contains white space, so i need a different solution to select list with <li> only
There is a way using jQuery.
You detect any <li> on the page and add a class to the parent. Then you can do what you want to that class in the CSS.
$('li').parent().toggleClass('has-li', true);
.has-li {
/* your code here */
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mighty-list" id="list1">
<li>Cool</li>
<li>Yah</li>
</ul>
<ul class="mighty-list" id="list2">
<div id="floating_button"></div>
</ul>
<ul class="mighty-list" id="list3">
</ul>
I have an issue that I have not experienced before and I am hoping to get some information on it. I have a nav bar that is displayed at the top on a webpage and for some reason when the code is run, the browser adds some a>/a> tags which cause my links to have some... disposition themselves. I am hoping to find out how to stop this from happening. Below is an example of the code.
My code:
<nav>
<ul id="LevelMenu">
<?php if($currentuser['userlevel']==0) { ?>
<li>Register New Account</li>
<?php } else {
if($currentuser['userlevel']==1) { ?>
<li><a href="inactive.php">Account Panel<a></li>
<?php } else { ?>
<li><a href="user.php">Account Panel<a></li>
<?php if($currentuser['userlevel']>2) { ?>
<li>Administration</li>
<?php }
} ?>
<li>Log Out</li>
<li>Add Article</li>
<?php } ?>
</ul>
</nav>
Code on Browser:
<nav>
<ul id="LevelMenu">
<li>
Account Panel
<a></a>
</li>
<a></a>
<li>
<a></a>
Home
</li>
<li>
Administration
</li>
<li>
Home
</li>
<li>
Log Out
</li>
<li>
Add Article
</li>
</ul>
</nav>
Result:
This line:
<li><a href="inactive.php">Account Panel<a></li>
You're not closing the <a>, but opening a new one. Fix:
<li>Account Panel</li>
Same problem with:
<li><a href="user.php">Account Panel<a></li>
You are Not Closing Your Anchor Tag.
Correct format would be <a href = "" ></a>
And You are Doing it like this:
<li><a href="inactive.php">Account Panel<a></li>
Instead Do This:
<li>Account Panel</li>
And Same with all other Places where you are doing the same.
Refer To The W3 Documentation for further information on anchor tag.
Hi I want to select the "Link" in class beers only but It always select all the links from sub-menu. I try
.beers:first-child does not work
.beers a:nth-child(1) does not work
.beers a:first-of-type (this apply to all the links of sub-menu)
<ul>
<li class="beers"><a>Link</a> only here
<ul class="sub-menu">
<li ><a></a></li> not here
<li><a></a></li> not here
</ul>
</li>
<li ><a></a></li>
<li ><a></a></li>
</ul>
Please help me
If you want to use style for a
.beers > a{color:green;}
If you want to use for li you have override
li.beers{ color:green;}
li.beers ul li{ color:black;}
You can get first element from child as below:
<style>
.beers >a {
background-color:red;
}
You have to maintain the elements level. Try the below one.
.beers>a
.beers:first-child
to
.beers li:first-child
With:
<ul class="beers">
<li><a>Link</a> only here
<ul class="sub-menu">
<li ><a></a></li> not here
<li><a></a></li> not here
</ul>
</li>
<li ><a></a></li>
<li ><a></a></li>
Following is my listing:-
<div class="box">
<div class="box-heading">Menu</div>
<div class="box-content">
<ul>
<li>My Account</li>
<li>Edit Account</li>
<li>Password</li>
<li>Contact Admin</li> <!--display none-->
<li>Address Books</li><!--display none-->
<li>Emails & Notifications</li><!--display none-->
<li>Order Now</li>
<li>Order History</li><!--display none-->
<li>Pending Orders</li>
<li>Current Orders</li>
<li>Completed Orders</li>
<li>Downloads</li>//display none
<li>Newsletter</li>//display none
<li>Logout</li>
</ul>
</div>
</div>
I dont want to display the following list they are:-
Contact Admin
Address Books
Emails & Notifications
Order History
Downloads
Newsletter
using css how can i display the above list as none
THanks in advance.
The most flexible solution is to add a class to the list items you want to hide, e.g.:
<li>My Account</li>
<li>Edit Account</li>
<li>Password</li>
<li class="foo">Contact Admin</li> <!--display none-->
<li class="foo">Address Books</li><!--display none-->
<li class="foo">Emails & Notifications</li><!--display none-->
<li>Order Now</li>
<li class="foo">Order History</li><!--display none-->
<li>Pending Orders</li>
Then
.foo {
display: none;
}
Live Example
But if you can't do that, you pretty much have no choice but to use :nth-child (counting starts with 1, unlike most programming stuff):
ul li:nth-child(4),
ul li:nth-child(5),
ul li:nth-child(6),
ul li:nth-child(8) {
display: none;
}
Live Example
That would, of course, hide those list items in every list, so you'll want to lock that down a bit more specifically.
The problem with doing it this way is, of course, that if you modify the list later, you have to change those indexes. It's fragile. Using a class is more robust.
CSS:
.hidden
{
display:none;
}
HTML:
<li class="hidden">Contact Admin</li> <!--display none-->
<li class="hidden">Address Books</li><!--display none-->
<li class="hidden">Emails & Notifications</li><!--display none-->
<li>Order Now</li>
<li class="hidden">Order History</li><!--display none-->
If you want to use in-line css you should add a style to your ul element:
<li style="display:none;">
otherwise you use a class and setting the property display:none;
<style>
.hide{
display:none;
}
</style>
<li class="hide">