I am trying to implement some BASIC css onto my website - it is a simple tree type menu.
Here is the test page I have created for it:
http://www.worldheritagetrip.com/1309-2/
Here is the working jsfiddle:
https://jsfiddle.net/fadmrdbm/
and the code:
<ul class="collapsibleList">
<li>
<label for="mylist-node1">Click to open list 1</label>
<input type="checkbox" id="mylist-node1" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<label for="mylist-node2">Click to open list 2</label>
<input type="checkbox" id="mylist-node2" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
and the css:
.collapsibleList li > input + * {
display: none;
}
.collapsibleList li > input:checked + * {
display: block;
}
.collapsibleList label {
cursor: pointer;
}
I have copied the html and css EXACTLY to my wordpress page and it fails :(
Can someone spot the problem?
The problem is that Wordpress has added extra tags to your HTML in order to try and help with the output.
Take a look at this jsfiddle - in it, the HTML from your site for the element in question is directly added from the rendered wordpress output and the same problem exhibits itself. Wordpress has added a p tag,
The declaration .collapsibleList li > input + * hits any tag, regardless of type, that is directly following an input. In your original jsfiddle, you used the HTML you pasted into WordPress, without the extra added tags, so the ul was directly after the input. With Wordpresses added p tag, the ul is now not directly following the input.
You can even see this in your page, the list is appearing when it shouldn't, but the click is also acting on the p tag and that is showing and hiding itself and creating the extra whitespace that you can see there.
Select the p tag in the inspector. You'll see the margin-bottom that is making the whitespace changes and you'll also see the css selector above applied to it. Also in the inspector you can just delete the p tag (and don't refresh the page) then see that your list works as expected as it falls back into the css selector defined.
You can get rid of erroneous WordPress tags by making sure you leave no white-space in the HTML, or you could look at a JavaScript solution that would probably be more robust.
For the record, JSFiddle takes the contents of your boxes and ensures they load, so you can drop something in their and see it working in an isolated sense but it won't direct you towards issues with external libraries, wordpress processing or missing definitions.
How are you implementing your CSS? In your HTML with or in a seperate file? If it is seperate, you need to link your CSS file with <link href="CSSFILE.css" rel="stylesheet" type="text/css"> . It will also need to be in the same directory.
Related
I try to tidy the following html code, and I get an strange result. li elements are not aligned.
Is it correct to have al ul tag and text inside an a
<a> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
Why It could happens?
ul tag is a block element tag - a tag is a inline-block element tag - it is not recommended to put block elements within inline-block elements.
If you had a basic navigation it would look like
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
As explained earlier - within the ul tag you can assign the a tags to navigate to other links/webpages.
The accepted ways of providing indentation to your code is by using 2-space or 4-space indentation (Every time you open a child tag in the next line give it 2/4 space ). Although in HTML indentation does not matter, your code will work perfectly fine with whatever way you wish to do indentation.
tidy code (2-space indentation):
<a href="Link_to_anything"> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
I have added href attribute , as the purpose of the <a> tag is to link the contents inside to another web page or part of a web page
DEFINITION:
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination.
The anchor tag can hold most tags inside it like <img>, <p>, <h1> to <h6>,etc. You can perfectly add <ul> tag within the <a> tag
Essentially, I have a micro site inside a large application. I wanted to create a tertiary navigation with an active state for pages. Its single html blob that gets inserted in multiple pages.
Ideally I would use an active class to highlight via which page in the tertiary navigation the user is on like below
<nav>
<ul>
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
But I have no control of the backend application and only have full control of html, css and want to avoid using solution with jquery detect url.
my css would be
nav li:target {background:#ccc}
instead of
nav li.active {background:#ccc}
I have seen it done kinda like this for anchor tags like this.
The question is if its possible to do something like for different urls? what the proper usage of the :target class?
This below is what i have so far based on comments
<nav>
<ul>
<li><a id="page1" href="page1.html">Page 1</a></li>
<li><a id="page2" href="page2.html">Page 2</a></li>
<li><a id="page3" href="page3.html">Page 3</a></li>
</ul>
</nav>
does not work across multiple pages? here is a git working project
The way you are trying to use the target class is backwards based on the example you provide above. Right now you are asking for the target class to highlight the link that is selected but the target pseudo class highlights the content section its associated with based on the link selected. If you view w3schools site demo here you can see it in action. Notice that the content is change when the link is clicked, not vice versa.
If you want your navigation links to be highlighted based on the one selected you will need to dynamically add the 'active' class most likely using Jquery. Hope that helps.
EDIT
Based on our conversation I have looked through your code and was able to help fix it up.
<!DOCTYPE html>
<html>
<style>
.content:target {
background: #ccc;
}
</style>
<body>
<nav>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<h1>This is Page one</h1>
<div class="content" name="page1" id="page1">This is Page ONE paragraph</div>
</body>
</html>
You were applying an IDto the anchor tags when the nav links dont need an ID they need to have the ID value passed in the URL as #page1. Also your target CSS is the content section not the navigation menu. Follow this set up for the other pages and it should work great.
See §6.6.2. The target pseudo-class :target
Some URIs refer to a location within a resource. This kind of URI ends
with a "number sign" (#) followed by an anchor identifier (called the
fragment identifier).
URIs with fragment identifiers link to a certain element within the
document, known as the target element.
A target element can be represented by the :target pseudo-class. If
the document's URI has no fragment identifier, then the document has
no target element.
So you can use
nav li:target {
background: #ccc
}
<nav>
<ul>
<li id="page1">Page 1</li>
<li id="page2">Page 2</li>
<li id="page3">Page 3</li>
</ul>
</nav>
Is there any HTML element that I can use to wrap other elements to use as a placeholder? For example,
<ul>
<placeholder id="list-placeholder">
<li>item 1</li>
<li>item 2</li>
</placeholder>
<li>last item</li>
</ul>
Then I'd be able to access #list-placeholder via JavaScript and append children to it.
I don't think I can use <div> because divs aren't valid in all contexts (such as a list); furthermore, they may be inadvertently styled (I want my placeholder to be invisible).
Browsers don't render the contents of <template> whereas I do want to render what's inside my placeholder
Likewise, <script> tags with a custom type don't render their contents either
No, in HTML, there is no general wrapper element—which is what this is really about. What comes closest is ins and del elements, which can wrap both inline and block elements and have transparent content model. But even they are not allowed e.g. as a child of a ul element.
Instead of trying to use a wrapper e.g. for some li elements in order to apped children to it, set an id attribute on the last of the li elements in question and insert siblings after it. This is more natural in terms of DOM, since then all the li elements will be children of ul, instead of being partly children, partly grandchildren.
According to W3, only a <li> can be a child of a <ul>, therefore, the answer to your question is no. There is not a valid way to wrap two <li>s that are children of a <ul>.
If you have to, you could use a <span>. I have created an example, while not valid, this runs correctly in all modern browsers.
Example snippet and some proof below:
function showList(){
document.getElementById('list-placeholder').style.display = "block";
document.getElementById('showList').style.display = "none";
}
<ul>
<span id="list-placeholder" style="display:none;">
<li>item 1</li>
<li>item 2</li>
</span>
<li>last item</li>
</ul>
<input type="button" value="Show more list items!" onclick="showList()"/>
If you don't HAVE TO use a wrapper, you can and should use the following VALID code:
function showList(){
var hidden = document.getElementsByClassName('hidden')
for (i=0; i<hidden.length; i++){
hidden[i].style.display = "list-item";
}
document.getElementById('showList').style.display = "none";
}
.hidden
{
display:none;
}
<ul>
<li class="hidden">item 1</li>
<li class="hidden">item 2</li>
<li>last item</li>
</ul>
<input type="button" value="Show more list items!" id="showList" onclick="showList()"/>
Use a class to select hidden items instead of a wrapper. That's the correct syntax for your question.
Also, there are set <script> types, just like there are set <input> types (text, button, radio, checkbox, range, etc.). That is why you should specify the type, so the browser understands your code.
Hope this helps!
So long story short, for ages, ive been using some CSS reset on my projects.
i was trying to make a regular sitemap page(you know with links in an unordered list) and when i do this (code below)
<div id="smap">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
Products
<ul>
<li>Cantaloupes</li>
<li>Watermelons</li>
<li>HoneyDews</li>
</ul>
</li>
<li>Sales Team</li>
<li>Contact / Directions</li>
<li>Growers</li>
<li>Packers</li>
<li>Shippers</li>
<li>Importers</li>
<li>Distributors</li>
</ul>
</div>
The list comes out but the products sub-items are not indented.
In the CSS reset, the line that's doing this is
vertical-align: baseline;
When i removed it,although it restored the indentation on my sitemap list, it messed up my menus throughout the site.
i want to target that lists specifically so, choosing that lists parent div which is "smap"
What im wondering is, by default, what is a lists vertical alignment value??
like for example, if i do this
#smap ul, li {vertical-alignment: SOMETHING; }
what is the default value for a list to be indented?
Thanks in advanced.
If you want to revert to the default value for any property after a reset, then you should use the value initial - you might want to read this article for more on it.
However, the ul indentation is given by the padding-left of the ul - see http://dabblet.com/gist/3144582. I think vertical-align shouldn't influence that.
I've come a bit stuck this afternoon with a bug in my web application in the latest version of Opera.
Usually, it is possible to remove elements from the markup's tab-index flow by giving it the attribute:
tabindex="-1"
This means that when someone comes to the page and starts hitting their 'tab' key they will traverse the anchors/inputs in the document but those elements with -1 assigned will be ignored.
However, Opera's spatial navigation flow still allows users to access those elements via their keyboard.
Does anybody know of an alternate way of removing elements from Opera's spatial navigation flow in the same way that elements can in other browsers using tab-key document traversal?
Specifically: removing anchors from being accessible via Opera rather than inputs.
The markup below gives a rudimentary example. In non-Opera browsers you can use the tab key to go through the list, but it skips links 3, 4, and 7 because they have tabindex = -1 set. In Opera using spatial navigation (Ctrl+down/up arrow) it will still focus on those links..
<html>
<head>
<style>
:focus{border: 1px dashed green}
</style>
</head>
<body>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3 (tabindex -1)</li>
<li>Link 4 (tabindex -1)</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7 (tabindex -1)</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</body>
</html>
I can't find a nice way to do this. It's possible to do an ugly hack like <a onfocus="document.moveFocusDown()" tabindex="-1"> but I would not recommend it because there isn't a good way to figure out if the user wants to go up or down..well, you could listen for keyup and do it from there if a tabindex=-1 element is focused and the key is arrow up/down, I guess..
I recommend you report a bug saying that spatnav should respect tabindex="-1" - IMO your code as-is is fine and it would make sense to change this on Opera's side. I'm happy to kick the bug in the general direction of the right developers once you've reported it. (I work on testing and QA at Opera).
As you probably know, Opera has a different type of keyboard navigation than most browsers. This actually makes it incredibly easy to navigate using keyboard navigation.
Now, back to your question... it works for me in Opera 10.61 1250 (Windows 7). The following is my sample page:
<html>
<head>
</head>
<body>
<input type="textbox">
<input type="textbox" style="display:none">
<input type="textbox" tabindex="-1">
<input type="textbox">
</body>
</html>
The 2nd and 3rd inputs are skipped when I hit tab.
If this differs from what you have, please post a code sample.
My solution for this issue was to cache the href attribute as data- for each link that should not be included in the focus loop, then when the link can receive focus again, I restore the href from the cached data-.
http://jsfiddle.net/majornista/5pbFz/46/