Im very new to html and css, and I am having trouble accessing this list to edit in css:
<div id="content">
<div id="recent-users">
<ul id="recent-user-list">
<li class="user">Bob Bobalooba</li>
<li class="user">Mary Contrary</li>
<li class="user">James Bean</li>
<li class="user">Jim Jimbulator</li>
</ul>
</div>
</div>
I've tried many variations of things like #recent-users-list, #content #recent-users #recent-users-list li a etc and I havent been able to find any other posts that have helped witht his specific situation.
Thankyou in advance for any help.
First of all, accessing elements via ids are done with hash # and classes with period .. They are not interchangeably.
You are not using commas to select underlying elements. Commas actually allow you to select multiple different elements at once.
You can directly access the list via:
#recent-user-list
Or its children li elements via:
#recent-user-list .user
Or its grandchildren li a elements via:
#recent-user-list .user a
Documentation can be found here:
https://www.w3schools.com/cssref/css_selectors.asp
Related
after I spent two hours trying to figure this out by myself, I feel it's the right time to ask people who actually know how to code.
What is my situation
I'm building a WordPress theme and I struggle to make the navigation work the way I want it. What I have in mind looks like this:
sketch of home page
Since it is WordPress menu (and because I plan to adapt the looks throughout the website), I need it to be a list. But I struggle to make the first-level items appear as headings and the second-level items as items below.
This is as far as I got:
https://jsfiddle.net/grysom/bpe924du/
I tried random stuff using flexbox properties + adding a break using :after selector with content: "\A"; but with no luck.
Do you have an idea how to do it? Is it even possible?
Thank you in advance for your ideas!
Have a nice day
grysom
You'll want the 2nd level list <ul> to be inside of the <li>:
<ul>
<li>
Pro veřejnost
<ul>
<li>Co je ergoterapie</li>
<li>Kdo je ergoterapeut</li>
<li>Seznam zařízení</li>
<li>Etický kodex</li>
</ul>
</li>
<li>
Praxe
<ul>
<li>Nabídky práce</li>
<li>Vychytávky a tipy</li>
<li>Legislativa</li>
</ul>
</li>
</ul>
I've updated your jsfiddle: https://jsfiddle.net/grysom/bpe924du/ but you'll need to adjust your styles a bit to differentiate the levels.
I have this menu:
<div id="menu-home">
<ul>
<li> a </li>
</ul>
</div>
When I am on the test.php page that corresponds to test menu, I need it's li to have a different style..
I tried
#menu-home ul li:active
but it didn't work..
Thanks
There is no :active state for <li>
Instead you can do it with PHP.
<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>
And in the CSS, you can give this:
#menu-home ul li.active {}
The <li> element does not have an active state, since it is just meant to be a (stateless) bullet point. The selector :active can only be used on a link; an example can be found here.
However, :active will only highlight the link as it is clicked. After that, it performs whatever action and/or navigation it is set to do and then the link will be visited. From there on you can't tell it apart from the other already visited pages that you are not currently viewing and it does not become "unvisited" again, even if you navigate to another page. So this does not do what you intend.
Instead, I would create a class .active in your CSS where you can define all your custom styling. Then, the PHP that generates your pages needs to take care of setting the class correctly on the selected menu item, ie.: attach class="active" it either to the <li> or the <a> whenever the menu is build.
(yeah, just see Praveen's answer for the code ^^)
example;
<ul>
<li>
<div class="img1"><img src="img.jpg" /></div>
<div class="cs1">Text text</div>
<div class="cs2">text text</div>
<div class="button">Next</div>
</li>
</ul>
like above code block div in li. I heard it is wrong usage. Is it true?
Both elements are block elements so nesting them is fine. Checkout the permitted content allowed in <li> in the Mozilla Documentation.
According to the W3C validator it is perfectly fine to use divisions.
you can also check your html whether it is valid or not in w3cvalidator
Hope this validator helps.
The best place to check it if you are in doubt is HTML DTD. It's a bit cryptic if you look at it first time, but it's a good source.
Let's look at your example:
http://www.w3.org/TR/html4/struct/lists.html#edef-UL
DTD stands that in UL (or OL) you can have only LI's (one or more)
<!ELEMENT UL - - (LI)+ -- unordered list -->
Then if you take a look on LI element:
<!ELEMENT LI - O (%flow;)* -- list item -->
it can take any element from the 'flow' shortcut (zero or more as the '*' stands for). You can click on the %flow link to learn what are those elements.
There is many other things you could learn from it, i.e. what kind of attributes given element can have etc.
No, it is often used by developers as easier CSS friendly dropdowns among many other uses you can probably think of.
The HTML syntax (any version) allows a div element inside an li element, as one can easily check from the specifications, or using a validator.
In any other sense than purely syntactic, the “wrong usage” issue is here really with the use of a bulleted list (ul element) with a single item in it. There is nothing formally wrong with it; it just does not seem to make any sense.
No it's not wrong use but it depends on what you want.
If you want a drop down menu every div must be inside a <li>
like the example shown below.
Eg:
<ul>
<li><div class="img1"><img src="img.jpg" /></div>
<li><div class="cs1">Text text</div> </li>
<li><div class="cs2">text text</div> </li>
</ul>
I have a menu that will be automatically created in an asp.net page. I'm trying to use a pure CSS cross browser menu but how can i set it so that each subsequent child is autohiden/shown w/o having to define the style for each level of the menu.
Is this the only way to accomplish this with css?
Essentially im looking for a way to use css to show/hide the child menu items w/o having to define the style for every level - especially since i dont know how many levels there will be.
you should be able to do it by only specifying down to the second level
<html>
<head>
<style>
.mnusub li ul{ display:none; }
.mnusub li:hover > ul{ display: block; }
</style>
</head>
<body>
<ul class="mnusub">
<li>test1
<ul class="mnusub">
<li>test2</li>
<li>test11
<ul class="mnusub">
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</li>
</ul>
</li>
<li>test5
<ul class="mnusub">
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
</li>
<li>test9</li>
<li>test10</li>
</ul>
</body>
</html>
The key here is the ">" selector as it specifies direct descendants and not sub-descendants
enjoy
When you want to affect each child individually, but without having to make style rules for each of those children, then you need more logic, which CSS doesn't provide. You could use something like PHP for that logic, or you could go with Javascript/jQuery. In that case, you can toggle CSS classes on child[x] through jQuery, and you only need to style those classes. Then it wouldn't matter which child got the class, it would be styled accordingly. Note that you should first make sure your menu is at least usable without Javascript, so users aren't dependent upon it.
I'm using SIFR 3.0 in combination with suckerfish popup menus. I only want to SIFR the top level li's and not apply the effect to the nested ones. I'm also using WordPress, so restructuring the menu, like wrapping the parent in a <div> or other object is too hard (I'm still figuring out the basics of WordPress).
Is there a way to turn SIFR
ON for ul#menu li
but OFF for ul#menu li li ?
Other things I've tried that haven't worked is applying a class or id to the parent <li class="top-level"> or <li id="top-level">--that didn't stop the SIFR, it still grabbed the children.
Thanks so much for the help.
I'm going to assume your HTML structure is like this:
<ul id="menu">
<li>
My link
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
When you replace ul#menu li, you will replace the entire content of the <li> element. Unfortunately this also includes the submenu. The solution is to replace just the link, but note that you can't directly replace <a> elements.
Therefore:
<ul id="menu">
<li>
<span>My link</span>
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
And replace ul#menu > li span.
Finally there is the question whether the Suckerfish menus actually work if the events have to come through sIFR. I suspect it won't, meaning you're probably better off not using sIFR here.
This can be done with the CSS child selector:
ul#menu > li
this will only select li elements that are direct children of ul#menu. This should work in all standards complient browsers, and IE7+.
For IE6 there are a few hacks you can do to fake it, although I prefer to use jQuery to make up for selectors it doesn't support:
$('ul#menu > li').css({ ... });
which you can place in conditional comments.
If you download the uncompressed sifr source, and also have jQuery or are good with javascript you can probably put a conditional in at around line 491 of the sifr code along the lines of
if ($(node).parent().parent().parent().attr('id', 'menu')) {continue;}
I'm not great at jQuery, and I'm also not sure what kind of object the nodes that sifr runs through are, but in theory something like the above should make waht you want possible.