It seems like with html like
<ul id="projectsList" class="list-style-1">
<li>
<a href="/projects/view/1">
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</a>
</li>
</ul>
firefox adds markup to make it
<ul class="list-style-1" id="projectsList">
<li>
<p class="heading">New Project 1</p>
<p class="desc">by <strong>jiewmeng</strong></p>
<ul class="meta">
<li>Your progress <strong>0%</strong></li>
<li>Project's Progress <strong>0%</strong></li>
<li>Your tasks due today <strong>0</strong></li>
</ul>
</li>
</ul>
I narrowed the problem to the meta list items if I comment out the meta list, it works http://jsfiddle.net/MSegC/2/
I want to use the <a> as a block level element as I want the user to be able to click the whole box to enter the link
A is not a block level element in html (at least in html 4) so the short story is you can't use it like this :). That's why FF breaks' it for you.
http://htmlhelp.com/reference/html40/block.html
You should do what you want with an onclick event on the containing block.
Another option seems to be to force the doctype of the page to be html5 since in html5 it is possible for a to be a block level element.
http://davidwalsh.name/html5-elements-links
As previously mentioned, <a> is not a block-level element, but you can make it into one by setting the display property to either block or inline-block.
display:block; should make it act like any other block-level element.
display:inline-block; is a half-way house between making it a block-level and an inline element. If display:block; makes your page layout go nuts, then use inline-block instead.
Related
I am new to HTML and so here is very basic question, for which unfortunately I could not find a hint any where . So I am putting it here. Basically, I have to use the tags href, and style both. How do I do it? For example, consider the following:
I have a list like this:
<ul>
<li style="color:blue;font-size:20px;text-align:justify">that is inclusive, innovative, and relevant</li>
</ul>
Now I want to have a hyperlink on the text :
that is inclusive, innovative, and relevant
For example, clicking the above text should go to google.com
How do I do this?
Here you go let me know the style is preperly applied or not.
<ul>
<li style="color:blue;font-size:20px;text-align:justify">that is inclusive, innovative, and relevant</li>
</ul>
You need to use the anchor tag <a> and set the href property to your url. The display text can go inside the element.
Visit Google
A list with two links:
<ul>
<li style="color:blue;font-size:20px;text-align:justify">
<a href="https://www.example.com">
that is inclusive, innovative, and relevant
</a>
</li>
<li style="color:blue;font-size:20px;text-align:justify">
<a href="https://www.w3.org/MarkUp/1995-archive/Elements/A.html">
Anchor tag spec
</a>
</li>
</ul>
Styles can be applied to the link or the list item. The browser does some default styling to anchor tags to make them blue and underlined, and purple after being visited. Often times this default styling is removed or overridden.
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
I'm building my website using only html and css. I've read several tutorials and did my research, but now I'm stuck in an area. I have created a menu on top of my page using ul and li and within the li are the links. the links themselves hold more info other than just the link. There is a span after them, and the span shows info that I will show after the user clicks on the link. I use a:focus for the info to show on the page. So the structure is:
<ul>
<li><a href="#" tabindex="1">RESUME
<span class="resume">
blah blah blah
</span></a>
</li>
<li><a href="#" tabindex="1">My artwork
<span class="artwork_area">
blah blah blah
</span></a>
</li>
</ul>
While it's fine that the resume section works well with a:focus, and getting it to display on the page only after the user clicks on it, it will not work the same with 'my artwork' because I need to have more links inside that section. I know that it's not allowed to have links nested inside other links, so how can I get the code to look like this?
<ul>
<li><a href="#" tabindex="1">RESUME
<span class="resume">blah blah blah</span>
</a>
</li>
<li>My artwork<!--notice how the link ends here-->
<span class="artwork_area">
<p>blah blah blah
<img src="assets/images/large_image1.jpg"/>Pic1
<a href="assets/images/image2.jpg" ><img src="assets/images/large_image1.jpg"/>Pic2</a>
</p>
</span>
</li>
</ul>
This is where I'm stuck. I can't figure out how to make that span section appear without nesting it inside the link, but that won't be acceptable to nest another link within it.
I've only been reading and putting to practice html and css for about 3 weeks, so I'm not that savvy yet. I would really like to do my website in only html and css as I see it is more convenient and loads much faster. I made a short youtube video to explain how it currently looks.
You should look into the :target pseudo element. This way you could hide the content in an div with an id and then link to this id with the #-sign. Have a look at this example. It messes up jsfiddle a bit but works good when you do it on your own page.
Here is a nice read on the :target pseudo element. CSS-Tricks
Hope this can help you.
Update
Here's a better example
Short Answer
I had a quick look on the w3schools css selector reference and noted the element+element selector with example:
div+p -> Selects all <p> elements that are placed immediately after <div> elements
So I tried the following style and it works for your second example
a:focus+span {
display:block;
}
And The Rest Of It
I've made an assumption on what your css looks like - perhaps you could edit your question to show this so that your example is complete.
But based on the html example you provided the following works for both cases.
<style>
li>span {
display:none;
}
li>a:focus span {
display:block;
}
li>a:focus+span {
display:block;
}
</style>
Thinking about it if you were to make things consistent so that you never nested the span inside the action link, you could remove the a:focus span selector. Your resume list-item would become:
<li>
RESUME
<span class="resume">blah blah blah</span>
</li>
Also if you haven't already done so you might want to give the list-item elements of your menu system a common class eg menu-item so as to constrain css further. Here the intent is to always show the last list-item Outside.
<style>
li.menu-item>span {
display:none;
}
li.menu-item>a:focus+span {
display:block;
}
</style>
...
<ul>
<li class="menu-item">
... Resume
</li>
<li class="menu-item">
... My artwork
</li>
</ul>
<ul>
<li>
Outside
<span class="resume">outside stuff which is always shown</span>
</li>
</ul>
One final thing; I noticed that clicking on one of the image action links breaks the whole thing since the main action link is hidden again. From what I can see there's no parent-from-child selector so I'm not sure at this stage how this will work for you. Anyways I think the element+element selector answers your specific question.
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.
Is there something wrong with the following HTML, or am I simply experiencing a Firebug error? When I view the first list element in firebug, you'll see that firebug has difficulty correctly identifying the anchor; however, it has no problem with the second (outer) list element. If I remove the nested list from the first list element, then the problem disappears. Similarly, if I remove the outer list, the problem disappears. So, there appears to be a problem with placing an anchor around a nested list.
I've tried replacing the anchor with a div, and even a span, and firebug doesn't complain, so this seems to be anchor specific. I've also tried various doctypes, with no success.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<ul>
<li>
<a href="http://whatever" style="display:block">
<p>some text</p>
<ul>
<li>a list entry</li>
</ul>
</a>
</li>
<li>
<a href="http://whatever">
<p>more text</p>
</a>
</li>
</ul>
</body>
</html>
The a element only allows inline-level elements as child elements. So the p element and ul element are not allowed there.